CLEAR INBOX

youth overlooking a sunrise

OVERVIEW

SCOPE
The goal was to work with a developer to design an app that would effortlessly archive an inbox. We collaborated on the basic funtionality of the app but the app design was left to me.
MY ROLE
I was the sole designer on this app desgin. Although I did test users, a lot of focus went into the UI of the product.
TOOLS
I used Sketch for creating wireframes and high fidelity mockups. InVision was used to create an interactive prototype.

DISCOVER

GOALS
This project came about as my client was talking to some of his older friends who were struggling to archive their inboxes. He recognized a need for an intuitive app to archive emails. His goal was to develop an application linked to Gmail that would be easily accessible for the older population; a demographic who may not have the tech savy to navigate these features themselves.
ORIGINAL FLOW

Gmail users have no clear way to apply an action to their entire inbox. They could use the “checkbox” feature to "select all," but it only selects 50 emails at a time, which is not effective when you have 10,000+ messages sitting in your inbox.

To archive all the emails in Gmail inbox:

  1. Enter “inbox” into the search bar
  2. Press the search button or press return to run the search
  3. Click on the small down arrow on the search bar and select Create filter with this search
  4. Click OK when warned that the filter will not apply to new mail
  5. Select Skip the Inbox (Archive It) and Also apply filter to X matching conversations
  6. Click Create Filter
  7. Inbox archived

DEFINE

PROBLEM
Users need a better way to clear their Gmail inboxes because there is not an intuitive way to archive entire inboxes at a time, leading to frustration and wasted time trying to remove small batches of emails.
SOLUTION
By creating the “Clear Inbox” app, users will be able to easily archive emails which will save them time and decrease their anxiety and frustration around navigating confusing tools.
PERSONA

JANET SMITH

Janet is a retired mother and grandmother who is active in her community. She is subscribed to community newsletters and multiple social media sites including facebook and Instagram to stay up to date on her family and friends. She opens her email to see an overwhelming amount of notifications daily.

Age: 60 yo

Tech empathy: Low

Needs from an app:

  • Simple layout with clear choices
  • Suggestions based on past purchases
  • Clear calls to action

Pain Points:

  • Overwhelmed by options
  • Indistinct settings categories
  • Having to remember a difficult proccess
  • Multiple step login/logout
middle-aged white woman smiling and looking away from the camera
I’m tired of being overwhlemed by the amound of emails in my inbox.

DEVELOP

DESIGN PROCESS
Because the process of archiving emails needed to be simplified, I worked to determine just how streamlined CLEAR INBOX could be without losing basic functionality. The initial code looked was basic, leaving lots of room for creative liscense.
THOUGHTS
  • The code is simple and to the point
  • Animating up and down gives users a visual cue the app is working
  • The amount of time it takes to count up and down is poor user experience
  • Because users will test the free version before buying premium, the interaction must be pleasing
  • How do I make the experience memorable since archiving is not a needed on a daily basis
INITIAL WIREFRAMES

Login

wireframes mockup
  1. Login with Google

Landing

wireframes mockup
  1. View emails animate up
  2. Archive emails
  3. View emails animate down

Success

wireframes mockup
  1. Receive confirmation
  2. Return to “Landing screen”

Landing, Zero

wireframes mockup
  1. Archive emails
USER FEEDBACK
  • Users need a choice to bail after initially choosing “archive”
  • Users were unclear where “Go Back” lead to after recieving confirmation
  • What happens when one chooses “Archive Emails” when at zero
MID FIDELITY

Login

mid fidelity mockup
  1. Login with Google

Landing

mid fidelity mockup
  1. View emails animate up
  2. Archive emails
  3. Confirm choice

Archiving

mid fidelity mockup
  1. Archive emails
  2. Progress indicator

Success

mid fidelity mockup
  1. Receive confirmation
  2. Start over

Landing, Zero

mid fidelity mockup
  1. Archive messages
  2. Receive feedback
USER FEEDBACK
  • Users responded positively to the ability to confirm their decisions
  • Users disliked the aesthetic of the floating links inclcuding “Log Out” and “Start Over”
  • Users liked recieving feedback that their inbox was at zero
FREEMIUM FEATURES

Subscription

freemium mockup
  1. Continue for free

Landing

freemium mockup
  1. No change in flow

Success

freemium mockup
  1. Receive confirmation
  2. Choose "Start Over"

Success, Modal

freemium mockup
  1. See timer counting down
  2. Exit or choose "CLEAR ALL"
RATIONALE
  • Users like Janet, are skeptical of paying for apps without proof that the app will deliver what it claims
  • To midigate the skeptisim, a “freemium” version of Clear Inbox was introduced
  • Users have the opportunity to clear 100 emails daily at no cost
  • The option to opt into the premium version begins at subscription and reappears on the “Success” screen
USER FEEDBACK
  • Users liked how clean and easy to navigate the subscription screen is
  • The fact that users can test the app before paying for it was seen as a positive
  • Users were liked the timer which gave real feedback to what their next steps should be
STYLE GUIDE
style guide
RATIONAL
  • Color

    • Blue is a color often used to convey feelings of tranquility and trust
    • Users want to feel a sense of relief when they interact with CLEAR EMAIL
  • Text

    • Ubuntu reports to have a unique tone of voice. Its style conveys a precise, reliable and free attitude.
    • Users need to feel in control throughout this process yet have peace of mind that CLEAR INBOX is reliable.
  • Icons

    • The interface started off with a flat design. A slight gradient and geometry was included to add interest.
    • A minimalistic design approach emphasises usability.

DELIVER

Clickable Prototype

LESSONS LEARNED
  • Create a SOW before starting on a client’s project to manage expectations
  • Be constantly communicating with the client to determine if both visions are in alignment with the end goal
  • Test early and often , even if you think you know enough about your user base to move forward with designs
CLIENT SATISFACTION
NEXT STEPS

For future iterations I would:

  • Animate images to demonstrate intent
  • Redesign the website for mobile.
  • Discuss creating a PWA version to imrove accessiblity and increase usage offline
  • Include more user testing to determine what interactions could be improved to make the app more user friendly