Angel Cloud Storage

angel intro

My first large-scale design project was on the topic of cloud storage solutions. Although the cloud storage market is dominated by tech giants such as Google, I decided to create a security based product after careful user research and market analyses.

duration icon
Duration

16 Weeks

  • Research: 2.5 wks
  • IA: 4.5 wks
  • Visual Design: 9 wks
roles icon
Design Roles

UX Research, User Stories, User Flows, Wireframing, Mindmapping, UI Design, Branding, Mockups, User Testing, Prototyping

tools icon
Tools

Axure, Figma, Invision, Usability Hub, Maze

OVERVIEW

angel logo

Angel is a mobile and desktop application designed to provide a safer way to utilize content on the cloud. In a time of data breaches and unethical marketing practices, it is imperative for there to be a transparent service that offers simple and effective ways to keep files out of the hands of unauthorized users.

DISCOVERY

Project Parameter

The client brief was broad and did not specify a name, brand, or a target market for this project. It mainly called for creating a compelling and user-friendly cloud storage service from scratch. So I took upon this challenge to study the market as well as users needs to guide the direction of this product.

Problem

The core problem with existing cloud storage tools is that they don’t prioritize user security and often lack transparency.

security
Solution

To ensure that users understand the measures Angel puts in place to secure their content, I laid out three main ways they can store and share their files. These are by:

  1. allowing them to choose how they share content
  2. offering an automatic logout system
  3. assuring users that their information is stored safely

RESEARCH

User Survey

After clarifying the project scope, I began my research by conducting a google survey to understand the utilization of existing cloud storage services and to learn of any user concerns or frustrations that can be resolved through this app. The result were as follows:

95%

of participants utilize cloud storage on a weekly basis. 56% use them daily and 39% use them 3-5 days per week.

83%

create word documents while 72% create spreadsheets regularly as opposed to other forms of content.

72%

enjoy the convenience of accessing content from anywhere with internet, citing this to be the biggest advantage of utilizing cloud storage services.

27%

are frustrated with not knowing how safe their files are stored on the cloud, citing this to be their biggest concern with using cloud storage.

Although my survey results revealed that there was no clear indication that users were unhappy with their chosen cloud storage service provider, some had security concerns when it came to utilizing content on the cloud.

View all user survey
Competitive Analysis

While my survey had been generating responses, I had begun studying my competion. My aim was to understand the internal and external factors that were influencing some of the main stream cloud storage providers. I chose to study two market leaders (Google Drive and Dropbox) and one less known storage provider, Sugar Sync.

competitiors

Analyzing my competition solidified my survey statistics in that there was room to elevate security. Users wanted assurance that their files are stored safely on the cloud while maintaining an affordable plan.

View all competitive analysis

INFORMATION ARCHITECTURE

User Personas
Elizabeth Lee
  • Name: Elizabeth Lee
  • Age: 21
  • Location: Washington, DC
  • Occupation: Student

    Goals

  • Accessibility
  • Sync across all devices
  • Backup features

    Concerns

  • Cost of storage
  • Internet dependency
  • Safety
    Motivation
  • Elizabeth utilizes cloud storage services that allow her to create documents and collaborate on group projects real-time. Having a convenient storage service that tracks her/ her teammates work and automatically saves is essential to the success of her projects. She finds it disappointing that she gets too dependent on certain storage apps and before she knows she's reached her free storage limit which means that she has to pay for further storage space or pick and choose the files she wants to keep.
Elizabeth Lee
  • Name: Adam McDede
  • Age: 34
  • Location: San Diego, CA
  • Occupation: Business Analyst

    Goals

  • Create, share, store files
  • Centralized storage
  • Affordability

    Concerns

  • Security concerns
  • Nothing else
    Motivation

    Adam is an aspiring entrepreneur who loves attending leadership events in his area. As an analyst, he is always seeking ways to improve business processes at his company. He utilizes cloud storage to share content he learns from leadership events and workshops with his colleagues. He also believes that the pictures he takes when he travels and most of the items on his phone are automatically saved on the cloud as he set up his account when he upgraded to a new phone. Although he admits that he could organize his cloud content better, he finds it convenient to have a centralized place to save various types of files. His major concern with the cloud is not knowing how safe his files are.

User Stories

Next, I wrote a user story with different users in mind. I identified 40 tasks in total that new, returning as well as all users would want in a new cloud storage solution. After compiling those tasks, I prioritized them in order of importance.

Role Tasks Importance
As a new user I want to create an account High
As a new user I want to view my dashboard High
As a new user I want to save an item Medium
As a returning user I want to log into my account High
As a returning user I want to be able to restore my password High
As a returning user I want to view the items I have saved High
All users want to log into their accounts High
All users share a single file and vice versa High
All users want to favorite certain files Medium
All users want to share files directly to social media Low
View all user stories
User Flows

Then, I created user flows to break down some of the paths users would need to take to complete key tasks such as signing up, uploading, creating and sharing content.

user flows
View all user flows
Sketches

After completing the user story, I sketched out my idea for a cloud storage solution and tested the basic process of uploading, creating, and sharing content with users.

sketches
Wireframes

I then turned my paper sketch into wireframes and ran another round of test only to find minor design flaws with the sign up process. My participants found completing key tasks such as uploading and sharing content to be “straightward”.

wireframes 1 wireframes 2 wireframes 3

VISUAL DESIGN

Branding: Name, Logo, Style Guide

I then moved on to branding my cloud storage services. I performed a mindmap exercise to brainstorm names and decided to go with the name ‘Angel’ as it related to my brand strategy. Angel seemed to be a memorable name that symbolized the protection and security this service promises to offer.

mindmap

I continued my pencil and paper ideation to sketch out potential logomarks. Once I had a good idea of the direction I wanted to take with the simple “A” shape, I turned my sketches into digital designs using Figma.

paper logo sketches figma logo sketches

In order to maintain consistency, I defined how the logo, color, typography and other assets are to be used in reference to this cloud storage service.

Color Palette
Logo

#0000EE

#7EC0EE

Recommended Background

#FFFFFF

#F4F4F4

Call to Action Buttons

#1FA344

Typography
  • Logo:
  • Brand Typeface: Encode Sans
  • Complimentary Typeface: Muli
  • H1 Main Heading: 36px
  • H2 Subheading: 24px
  • H3 Heading: 18px
  • Paragraph Text: 16px
  • Font Styles: Regular, Bold
High Fidelity Mockups

After solidifying branding for Angel, I applied visual components to create high fidelity mockups.

Mockups
Usability Testing

I then conducted both in-person and remote usability tests to obtain feedback on the various components and features I incorporated into my mockups. After several rounds of tests, I realized that I needed to incorporate additional security features. Some of the insightful feedback I received from testers included the automatic logout system making them feel safer compared to other cloud storage services. On the other hand, they critisized the asthetics as they pointed out that the serif brand typeface made the interface look outdated while the design of my icons in the tool bar were confusing. In addition, I recieved a comment that the gray background shade seemed “too dim”. Taking these constructive criticisms into consideration, I created the interface displayed on the right after several itterations. My last round of usability testing seemed to please users as they found the upgraded icons easy to understand and the improved interface “refreshing”.

mockup before and after

Some testers mentioned that certain features like the session timeout warning could be more prominent, especially in the desktop version of my mockup. After receiveing this feedback, I incorporated a warning icon and highlighted the timer for users to better notice the warning without having to read through the description.

mockup before and after
Preference Testing

Before wrapping up my mockup designs and rolling out my final prototype, I preference tested a few key areas of this product. One in particular was to see if a floating action button (FAB) would be more functional for users to easily locate the ‘upload’ icon.

Question: On your dashboard, do you prefer having the floating action button to upload content or the tool bar with the 3 options of uploading, creating, and sharing content?

A/B testing

Although some testers preffered a single icon to locate the most common action of uploading files to their cloud storage, the majority preffered the tool bar. Participants mentioned that they liked having “options” laid out in the dashboard. Depending on the highest rated choice and reasoning behind users’ preferences, I implemented their feedback into my final design decisions.

CONCLUSION

My main takeaway was how imperative user testing is especially in the beginning phase of the design process. Putting multiple initial ideas in front of testers early on during the wireframe phase can save tremendous amount of time as opposed to introducing new ideas later on during the mockup stage. Even though I did not test enough ideas as I could have right after completing my wireframes, I was able to incorporate essential iterations to my prototypes through preference and usability testing.