Aerial

Personalized Cloud Computing

User Experience Design & Branding

Overview Discovery Information Architecture Branding Visual Design/Testing Final Prototype

Summary

I was tasked with designing a cloud storage app with only basic requirements and guidelines. Going through the design process step by step, my final product was Aerial - a cloud storage allowing users to get all their needs met in one place.

View Final Prototype

Design Role
Deliverables
Design Tools

UX Design
Visual Design
Branding
Competitive Analysis
User Survey
User Personas
User Stories/Flows
Wireframes
Branding Style Guide
Hi-Fi Mockups
Final Hi-Fi Prototype
Usability Testing
Figma
Sketch
Draw.io
UsabilityHub

Overview

Why Aerial?

Problem

Currently the issue many users face is that there is not an app that does everything. Users find it frustrating to rely on multiple apps to for their needs. Pinterest only lets users save and share files. Likewise Dropbox is specializes in storing files and sharing files. A new competitor must accommodate for cloud storage user needs, or offer a service to a niche market.

Solution

Aerial is a cloud based storage app allowing users to share, store, create, and organize content in one place. Aerial is a free service that provides a large amount of storage space and accommodates both personal and work content.

Discovery

Research

The first step was to complete a SWOT Analysis by analyzing competitors Box, Evernote, and Pinterest. I chose these companies because I am most familiar with them. These three companies specialize in different services. Box is a store and share app, Pinterest is a visual sharing app, and Evernote is a note creation app.

User Survey

The survey focused on these aspects:

Which cloud services do you currently use?
What do you primarily use cloud services for?
What kind of files do you store on the cloud?
Which ways do you prefer to organize cloud content?
What do you dislike the most about your cloud storage service?

User Personas

Marina Lee

25 year old Communications Specialist

Goals

Create large text documents
Receive feedback from coworkers

Frustrations

Interfaces are boring
Wants more customization
Wants to know available storage

Alex Scott

23 Year Old College Student

Goals

Share large files with friends
Collaborate with others in real time

Frustrations

Can not afford more storage
Annoyed by lack of offline access
Wants more organization features

Information Architecture

User Stories

After completing the competitive analysis and user research I was able to construct informed User Stories. To construct the user stories I compiled a list of tasks new and returning users would need to complete when they would visit the app. After listing the tasks, I ordered them from highest to lowest priority.

I want to create a new account
I want to log into my existing account
I want to view and edit files
I want to create content on the app
I want to upload content from my computer to the app

User Flows

User stories help me understand how the app will flow. I took the high priority tasks from my user stories and turned them into User Flows. These help me visualize the processes that need to be completed in the Minimum Viable Product (MVP) such as creating an account, logging into an account, and uploading files.

Wireframes

I began by making sketches of the wireframes with pencil and paper. Once I had a strong idea of the design, I translated the sketches to Figma and tested them with a few users.

Wireframe Sketches Digital Wireframes

The User Testing on the wireframes received very helpful feedback. I realized that a lot of content was lacking from my initial wireframes. This feedback helped me to start designing my high-fidelity prototype.

Once I completed the user flows, I began constructing the Content Strategy for the website. I wanted to make sure the website flowed nicely with a modern and playful theme, so the copy was written to reflect that. Other content planned for the website included photos to be used for illustrative elements.

Branding

Branding

Modern, fluid, and playful

I started the Branding Research by first sketching the logo using pen and pencil. This way I was able to quickly iterate and make as many changes as possible. I wanted the logo to embody all of the brand words. I really liked the alchemy symbol for air and decided to play around with it.

View Moodboard Download Style Guide

Visual Design and Testing

Prototypes

I used the feedback from my low-fidelity user test and began designing the high-fidelity mockup. The Style Guide helped me visualize the design of the app. I designed a desktop and mobile version of the website.

View Final Prototype

User Testing Results

The ultimate user test was for the high-fidelity mockup. This was tested with three users to get their feedback. I made minor changes based on the preference test. I found that the users needed an easier way to identify the most important buttons such as sign up, create, and share. The users suggested the addition of minor changes such as:

Files should save automatically
Make create button easier to find
Make share button easier to find
Add back button to on-boarding screen
Make sign up button easier to find

Final Prototype

Conclusion

The process of creating Aerial was positive and negative. We were pleased to receive a lot of feedback from our user survey and in depth feedback on all testing. Without this user data we would lack focus. When creating Aerial we found the branding and the low-fidelity mockup process quite challenging.

The issue with the low fidelity mockups were that the results were inconclusive. The initial mockup lacked adequate information which made it very difficult to test with users. Users were simply lost by the lack of information on the screens. This was a drawback because we did not receive feedback on which direction to go and had to start over. This slowed the progression of creating Aerial.

Creating the branding for Aerial was difficult because we struggled to decide on the theme. We felt stuck for a long time because we struggled to visualize the theme. At first we wanted Aerial to have a light and airy theme, but it was challenging to execute and we doubted our ability to do so. Ultimately we decided to incorporate darker colors to provide contrast. As a result we were quite surprised that our brand ditched the light and airy approach.

Making these mistakes made us more aware of what needs to be done In the future. Next time we will be more willing to change our design ideas in the initial steps. We will also make sure to add more detail in our low fidelity mockups.

This project made me realize that I am a perfectionist to some degree. I could have just designed a light theme for Aerial to save time, but I was not satisfied with the design. I wanted to create contrast of light and dark. I also learned that without user feedback, a successful user experience is not possible.

View Final Prototype

Let's create radical user experiences.

Thanks for stopping by.

Like my work and want to grab a coffee, or talk more UX?

Let's connect!

Get In Touch Download Resume