Skydrive

Desktop and Mobile Cloud Storage App

UX Research | UX Design | Visual Design | Brand Identity
Desktop PrototypeMobile Prototype

Summary

The cloud storage world is packed with diverse applications, but still, there is room for improvement. So I was tasked to build the app from the group up and find the right combination of features to meet the expanding needs of a cloud storage user.

The Problem

The client developed a comprehensive idea of joining the cloud storage and organization world. They felt plenty of room for a new application with the right features for the evolving world.

The Solution

After conducting extensive research, SkyDrive was born. SkyDrive boasts top-of-the-line security and advanced backup and sync settings to give users more control over their experience.

Responsibilities

  • User Research
  • Competitive Analysis
  • Content Strategy
  • Wireframing & HiFi Mockups
  • Branding
  • User Testing

Research and Analysis

The search started with a user survey asking questions about what was most important to the user about a cloud storage and organization based apps.
A sample of the questions asked were:
What cloud and organization apps are people using?
What do they use it for?
Do they pay for these apps?
Why do they use these apps?
What do they and don’t they like?
Auto Sync Data graph
What do you use the cloud for graph
Interesting Discoveries:

User Personas

User Personas were created from the information gathered in the research conducted

Leslie K.

The Techy Teacher
35 | Female | Chester, PA

“I love to have memories of things I’ve done, but there’s only so much space on my phone!”

Goals:
  • Share Pictures and Videos
  • Online space for students to collaborate
  • Organizing her students' work
Frustrations:
  • The online world can feel unsafe
  • All of those pictures slow down her devices
  • Forgetting to send content

Jim H.

The Media Maven
26 | Male | Arlington, VA

“You can have all the movies and albums in the world, but what the use if you don’t have 4k and surround sound?”

Goals:
  • Automatic file backup
  • Expanding space for his growing collection
  • Sharing files with friends
Frustrations:
  • Moving large files to the cloud kills bandwidth
  • He’s seen the security issues with the cloud
  • His files require a lot of space

Competitive Analysis

I conducted a competitive analysis to research the top challengers in the industry. With many competitors in the field, I narrowed it down to three leading contenders with ranging advantages. As a result, the opportunities for SkyDrive were discovered to be:

Google

Google Analysis
Strengths:
  • Collaborative Files
  • Can upload any type of file
  • Can display many different types of files
Weaknesses
  • UI can be confusing
  • Not easily integrated with outside apps
  • Can be slow/laggy
Opportunities
  • Better file creation tools
  • Better web layout
  • Improved version history
Threats
  • Apps with better integration
  • Brand loyalists (I.E. Apple, Microsoft)
  • Apps with better creation tools

Dropbox

Dropbox Analysis
Strengths:
  • Easy app integration
  • UI easy to navigate
  • Focus on organization
Weaknesses
  • Color contrast can be hard to read
  • Security issues
  • Can become expensive
Opportunities
  • Improve speed
  • Enhanced privacy
  • More storage per dollar
Threats
  • Apps with better security
  • Brand loyalists (I.E. Apple, Microsoft)
  • Apps with more free storage

Evernote

Evernote Analysis
Strengths:
  • Suggested Content
  • Tags for Organization
  • Team Collaboration
Weaknesses
  • UI has a steep learning curve
  • Very limited free version
  • Constant reminder to buy premium version
Opportunities
  • Storage ability
  • Easier to use design
  • More free features
Threats
  • Free apps with similar/better features
  • Apps with an easier to use design
  • Apps geared more towards the individual

High Priority User Stories

After gaining a better understanding of the user goals and the strengths and weaknesses of the current market, user stories were created. The following lists are items that were deemed high priority and used to create user flows:
As a new user I want to...
  • Create an account
  • Upload all document types
As a returning user I want to...
  • Log in with a user name and password
  • Share files
  • Create content
As an admin I want to...
  • Reset passwords
  • fix bugs

Wireframes and User Testing

I created Wireframe sketches to get the basic ideas and fundamentals of the project onto paper.
Homepage Sketch
Homepage
Dashboard Sketch
User Home
Once the sketches were complete they were turned into Digital Wireframes and used for used for Usability tests. The usability tests were to establish whether the user was able to do three essential functions: Sign up for an account, create a collaborative document, and move a file into a folder. Success was not determined by completion of the scenarios, but getting a better understanding of the user’s struggles.
Homepage Wireframe
The homepage was a positive experience for the users. They were quickly able to sort through the onboarding process and felt very comfortable with the information and layout of the page. In addition, users were quickly able to identify the type of program the website was for and appreciated the details provided.
Dashboard Wireframe
The User home felt comfortable to the user, but observing the users made it easy to see room for improvement. There was a need to make the navigation aspects more familiar to the user. I looked back at my wireframe sketches to see what changes were needed before putting the details into the Mockups.
Scenario 1
Users easily identified CTAs
Scenario 1
Onboarding was easily completed
Users were asked to complete three scenarios: sign up for an account with an email address, create a new sky document, and move the student loans file into the accounts and bills folder. Scenario one and the onboarding process were highly successful. The users quickly identified the sign-up buttons and completed the task without any missed clicks.
Scenario 2
Original wireframe
Scenario 2
Update with option button visual update
Scenario two was my most significant opportunity for improvement. The user needed to identify the New button, navigate to the SkyDrive file section and click Create a new Sky Document. With the original iteration of the wireframe, it was apparent the New button needed to stand out more. Uploading and creating unique content is at the top of the priority list and is the key to the site’s functionality. I also realized the need to remove scope creep. In this iteration, there were connections to SkyDrive itself, Google Docs, and Microsoft Office, each with the ability to create a word-processing document, spreadsheet, and slide decks. I realized that as much as the connectivity was excellent, it was not a top priority. I would need to redesign the element to be more straightforward.
Scenario 3
Users easily identified CTAs
Scenario 3
Onboarding was easily completed
Scenario three also showed room for improvement. User familiarity with cloud-based apps was to drag and drop items when moving them to another location. That was not available in this prototype. The option button also needed to stand out more. There was room to improve its visual hierarchy and become more apparent.

Visual Branding

Visual Branding List
Mind Mapping
After reviewing the research, a significant amount of detail was available to assist in moving forward. For example, using mind mapping and word lists, I could use the key ideas from my user interactions to find a name and logo that fit our goal.
Logo Sketches
Logo Sketches

With the basic sketches and word association in mind,  I created a mood board to get the feel of our product. The name SkyDrive felt on brand with our goal. When you break down the words, sky represents the cloud where users store their data, and Drive represents the idea of a hard drive and speed. Next, I gravitated toward simple geometric shapes, patterns, and images of the sky—shades of blue, pink, and gray lined up with all of the images that inspired me. When picking a brand typeface, all the mood board patterns pointed to a geometric type.

Moodboard

With the basic sketches and word association in mind,  I created a mood board to get the feel of our product. The name SkyDrive felt on brand with our goal. When you break down the words, sky represents the cloud where users store their data, and Drive represents the idea of a hard drive and speed. Next, I gravitated toward simple geometric shapes, patterns, and images of the sky—shades of blue, pink, and gray lined up with all of the images that inspired me. When picking a brand typeface, all the mood board patterns pointed to a geometric type.

Colors

Poppins was selected for its large variety of weights; its style has a feel that unites well with reliability and speed. PT Serif was chosen as the body typeface because of its detail and readability. This allows the user to scan information and creates a stress-free environment. Combining the two typefaces lets the user see the hierarchy clearly and make decisions rapidly.

Typography

When refining the logo, the simple geometric shapes came back into play. Along with the name I wanted a simple detail to relate back to the user research and the top priority of security. After ideating on ways to place a lock multiple variations of the logo were formed. The first iteration of our logo was born. Though I wanted to keep with simplicity and basic shapes, the logo needed a pattern to really stand out. A square and rectangle were joined to create the inner lock mechanism and creating the final logo.

Logo refinement

Style Guide and Mockups

style guide
With branding information near completion, I created a style guide for future reference. I presented all rules, from logos and iconography to colors and typeface, with key examples to give future designers the proper tools to succeed. Principles and SkyDrive’s vision are detailed in front of the guide to inform the designer of the feel of the product.
Homepage Wireframe
Homepage Hifi
Dashboard Wireframe
Dashboard Hifi
The style guide was used as the instrument to paint the details of the wireframe template. The user feedback from the initial usability test helped me see the initial flaws and correct the necessary information. I reflected on the original sketches when needed to find inspiration for prototype modifications. The desktop prototype was created first and used as a model for the mobile application. I ensured the mobile version was not a watered-down, bare-minimum adaptation but a fully-functional experience. I aim for the user to feel as comfortable using the mobile app as the desktop.

Preference Testing

I conducted preference testing to see how users relate to a few different aspects of the application. Specifically, coloring on mobile icons, sizing of desktop icons, and the homepage image was tested.
Preference test - White Icons
White Icons - 73%
Preference Test Blue Icons
Blue Icons - 27%
The first preference test was to see which coloring users preferred on mobile icons. The test came back in favor of the white icons.
Preference Test light background
Light Background - 48%
Preference Test Dark Background
Dark Background - 52%
Test two was to see if users preferred a darker or light background for the homepage. The test came back at a 50/50 split. So I decided to use the darker background to give more contrast and visual hierarchy.
Preference Test Larger Icons
Larger Icons
Preference Test Small Icons
Smaller Icons
Preference Test Medium Icons
Chosen - Medium sized
The final test was to see the preferred size of the desktop icons for bookmarked, recent, and recycled. The test came back statistically insignificant. After further research, the decision was made to find a size between the sizes tested.

User Testing and Prototypes

I conducted a second round of usability tests to test the desktop and mobile prototypes. I included a participant who titled herself "not tech-savvy" to see how someone unfamiliar with cloud storage would interact with the applications. Edits were made based on the tests as well as my observation of the experiences. SkyDrive is constantly evolving, ways to improve the design for better user experience should always be kept in front of the designer's mind. The devil is always in the details and will make our project stand out from its competition.
Desktop PrototypeMobile Prototype
Homepage Hifi
Version one
Homepage V2
Version two - focal adjustments
Homepage V3
Version three - sizing and focal adjustments
I modified the user home based on user testing to give more emphasis on the Avatar. This highlighted that the Avatar was clickable. The New button was adjusted to show its importance, making it a focal point. The navigation bar was also modified to feel more relevant.
Dashboard Hifi
Version one
Dashboard V2
Version two - focal adjustments
Dashboard V3
Version three - sizing and focal adjustments
I modified the user home based on user testing to give more emphasis on the Avatar. This highlighted that the Avatar was clickable. The New button was adjusted to show its importance, making it a focal point. The navigation bar was also modified to feel more relevant.
Mobile Home V1
Version one
Mobile Homepage v2
Version two - dark background
Mobile Hompage v3
Version three - CTA update
I modified the homepage similarly to its desktop equivalent. The Call-to-Action button became a more prominent focal point, showing the user what the screen's main intention is.
Mobile Taskbar V1
Version one
Mobile Taskbar v2
Version two - text added
Mobile Taskbar v3
Version three - sizing and spacing
I adjusted the mobile user home to make the bottom navigation bar more informative. In addition, labeling each of the buttons and readjusting the icon size make the bar more practical and less intrusive.

Final Thoughts

SkyDrive is a product that built itself. SkyDrive has focused on security and speed from the initial research to its current iteration. After each process step, the design found the next step to layer on the details of what this product is really about. Focusing on user feedback was incredibly helpful in determining what functioned as intended and what needed work. Although some aspects of the first drafts could have been more effective, I used feedback and observation to find the proper design. Avoiding scope creep was a bit of a struggle at times, but when re-evaluating and remembering Pareto’s Principle helped streamline the project to be a success.

At first, creating another cloud storage and organization competitor seemed daunting. However, taking the time to assess the competition and hear what the users had to say, it quickly became apparent what this project could become. The biggest lesson learned from this project was letting the users and data illustrate the design instead of preconceived notions. All of the information I learned helped me become a better designer. As a result, my future experience and designs will be crafted based on the product as a whole instead of each feature. When you become too feature-focused, it’s easy to miss how everything fits into the overall user experience.
Back to top button