Quillbot

iOS App

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.

ROLE

US/UI Design
Research

PLATFORMS

Figma

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.

Apple Translate

Google Translate

Japanese

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.

Text

San Francisco Pro Display, the

universal font for Apple devices.

Easy to read and well designed.

Icons

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.