top of page
quillbot Header.png


iOS App

Quillbot is an AI-enhanced paraphrasing tool that is mainly used on desktops. I was tasked with looking at the issues present on the mobile view of the QuillBot site and creating the UI for an iOS app.


US/UI 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 writing.

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 on to 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 paraphrases/summaries.

Color Palette

I wanted to keep it simple and

create a color pallet based on 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.

Final Direction

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



+ Modes


+ Word Flipper


Click the image to see the interactive Figma Prototype

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