iOS App

Project Overview

I was tasked with looking at the issues present on the mobile QuillBot site, and fixing them through UI/UX design with an iOS app.





Research, Design

QB website.jpg

So, what is QuillBot?

QuillBot is a web-based paraphrasing tool that helps people rewrite sentences, paragraphs, or entire articles. It also gives you options for synonymous words and phrases that can be added to your writings.

QuillBot also has a summarizer function that can take a large amount of text and condense it into key points.

What are the issues when using QuillBot on your phone's web browser?

The interface for the web browser takes up valuable real estate.

Difficult to paste text into the box.

Running out of space for all of the controls.

qb - paste.png
qb - paraphrased.png
qb - para.png
google translate.png
apple translate.png

Apple Translate

Google Translate


The Correct Approach

Thinking about what this app does, I determined that it really shouldn’t be grouped with apps like Word or Google Docs. It felt more in-line with translation apps. Think about it, you add already existing text in, rather than creating text from scratch. So the output from the app aligns more with the output of a translation tool.

Quick Wiring Frames and QuillBot Sketches

UX Design is very similar to Industrial Design, so after I did my research, I moved onto sketching. Something quick to get my ideas down and give myself a basic framework for where I want to take my prototype.

Style Guide.jpg


San Francisco Pro Display, the

universal font for Apple devices.

Easy to read and well designed.


I used most of the icons from the desktop site, plus added the Favorites heart to save your favorite


Color Pallet

I wanted to keep it simple, and

create a color pallet based around three different colors: the official

QuillBot Green, a light gray, and white. This creates a clean and consistent look. The variations of orange are carry-overs from the desktop site and they add a nice contrast when paraphrasing.

Splash Page


Home Page


Home Page



frames - side panel.png
frames - para home.png
frames - home.png
frames - intro.png
frames - para home standard.png
frames - para home word flip.png
frames - home sum.png
frames - para home para.png



+ Word Flipper


+ Modes


Final Direction

Click the image to see the interactive Figma Prototype

Screen Shot 2021-01-11 at 4.26.58 PM.png
QB glamore shot.jpg

Check out my next project

JCC - intro copy.jpg

social media ads for the
Japanese culture center