Project Overview

Problem:

A hypothetical client wanted to create an app to compete in the cloud storage market while users expressed concerns with navigating the interface of current apps to quickly find and organize items.

Goals:

Solution:

Seraph! A product that provides users with a central location to store all their work. Users can find all the features they use quickly on the main dashboard. Best of all, Seraph offers easy-to-use color coding features to optimize organization.

  • My Roles:

  • UX Researcher

  • UX Design

  • Visual Design

  • Branding

  • User Testing

  • Deliverables:

  • User Surveys

  • Competitive Analysis

  • User Personas

  • User Stories

  • Site Map

  • User Flows

  • Wireframes

  • Branding

  • Style Guide

  • Hi-Fi Prototype

  • Specifications:

  • Tools:

  • Figma

  • Sketch

  • Usability Hub

  • Google Forms



  • Duration:

  • Three months

homepage

Research and Discovery



User surveys and competitive analysis helped me understand how a new product could fill in gaps where user's needs were not being met by current storage apps. The development of personas helped guide the rest of my process by combining what I had learned about users.

Survey findings

90% Are working professionals between the ages of 25-44

87% Use their cloud storage app to collaborate at work

65.2% Collaborate through email

60.9% Collaborate through link sharing

48.1% List keeping data secure as a major concern

40.7% List running out of storage as a major concern

85.2% Use their cloud storage for uploading content

70.4% Use their cloud storage for creating content

Many describe their ideal app as having a simple user interface that makes it easy to organize content, with plenty of space at an affordable price.

The competition

Google drive dashboard
  • 1. New button can be more prominent
  • 2. Not an accessible color combination
  • 3. Dropdown menu task unclear
Dropbox dashboard
  • 1. Storage usage unknown
  • 2. Left hand buttons difficult to find
  • 3. Too many steps to find deleted items
  • 4. Too many steps to share items
Box dashboard
  • 1. Storage usage unknown
  • 2. Left hand buttons difficult to find
  • 3. Icon actions unclear

Developing personas

Male persona

Daniel Meyerson

Film Editor | Age: 38 | Austin, TX

  • Motivation: Store a variety of large files securely
  • Frustration: Tracking files in different locations and limited space
  • “Paying for extra storage space gets to be very expensive.”
Female persona

Sonya Hernandez

Teacher | Age: 32 | New York, NY

  • Motivation: Create, store and collaborate securely
  • Frustration: Search easily and notifications when collaborating
  • “I hate when I can’t find a file because I forget what I named it.”

Information Architecture



I priotized tasks and planned the map and flows for the app using the research I had gathered. I later experimented with various layouts in my initial sketches. The wireframes I created served as my lo-fi prototype for my first round of user testing.

Setting up the structure

user flow

Sketching out the design

sketch

The lo-fi prototype

Takeaways:

After testing I realized that the new button and dropdown menus needed to be in a more prominent location for quick and easy access. I also needed to maximize space for content users would add.

Identity and Branding



The brand needed to be trustworthy, friendly and professional. The color palette and font pairs I chose aligned with the brand personality while providing contrast and user accessibility. To create the logo, I drew inspiration from the S in Superman and topped it with a halo for a friendly and heroic mark.

Adding personality

Mindmap Moodboard

Accessible combinations

typography color palette

The logo design

Further Testing



In my next iterations I added the branding elements and made CTAs and menus more prominent to improve user experience. I later conducted a second round of user testing and preference tests to refine the product's visual design.

User testing round two

A/B Testing

A/B test Yellow button vs blue button graph 70% yellow 30% blue A/B test Round button vs Rectangular button graph 75% round 25% Rectangular

Reflections:

The second round of testing revealed to me that I needed to refine the branding by adding contrast and softening corners. I also needed to further save vertical space to optimize user workspace. Another important addition was the empty state and the darkened modal backgrounds.

Finishing Touches



The final round of user testing and feedback from other designers guided me to make changes that would optimize the use of vertical space and improve the visual cues to clarify messages.

1.) Eyecatching CTA 2.) Vertical navigation on righthand side 3.) Elongated search bar inside header 4.) Empty state

1.) Quick access to frequently used features 2.) Ability to color code files and folders 3.) Collaboration notifications

1.) Rounded corners to match branding 2.) Simplified icons to clarify message 3.) Redesigned files and folders 4.) Accessible feedback messages

1.) Darkened backgrounds 2.) Rounded corners 3.) Titles bolded with black typography

1.) Saved activity log 2.) Ability to accept or reject changes

Conclusion



I learned a lot about the design process throughout the development of the Seraph app. I felt that it was challenging to come up with a new platform to compete in a market already oversaturated with trusted products. I realized after gathering feedback from users through surveys, interviews and testing that there is always something to improve upon to help a new competitor stand out. My research gave me the insights I needed to discover that excellent organization features would pave the way for a competitive app.

Improvements

I think that my research could have reached a wider audience as far as age, gender and racial/ethnic backgrounds to better represent users that would be serviced with this product.