Quilly-copy.jpg

Quillbot

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.

YEAR
PLATFORM

2021

Figma

ROLE

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
japanese.png

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 onto sketching. Something quick to get my ideas down and give myself a basic framework for where I want to take my prototype.

IMG_4936.jpg
Style Guide.jpg

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 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

Paraphraser

Home Page

Summarizer

Home Page

Drop-down

Menu

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

Summarized

Paraphrased

+ Word Flipper

Paraphrased

+ Modes

Paraphrased

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

DESIGNING A WEBSITE

FOR A FITNESS coach