fuse mockup image

Project Overview

Even given the seemingly saturated market of cloud-based storage and organization products, we were tasked with developing a product that could fill an underutilized need in that space. To accomplish this, we needed to have the right combination of features to meet the needs of a particular audience.

View Prototype

The Problem

The cloud storage and file management space is full of products, but there a few that truly fulfill the needs of all users especially from a collaboration standpoint. Additionally, there are few that cross over between both personal and professional use.

The Solution

Inspired by the Git and Github workflow, Fuse is a cloud-based version control and file management hub for everything from your school projects to your client presentations that allows for collaboration across all files.

Design Roles

  • User Research
  • UI/UX Design
  • Visual Design
  • Branding

Design Deliverables

  • User Research
  • Competitive Analysis
  • User Personas
  • User Stories
  • User Flows
  • Wireframes
  • Branding/Identity
  • Prototypes
  • User Testing Results

Design Tools

  • Pen & Paper
  • Google Forms
  • Draw.io
  • Figma
  • Sketch
  • Usability Hub
  • InVision
  • Maze

Discovery & Research

User Research

To begin, I surveyed a wide range of users across multiple demographics, age groups, and professions, in order to get an understanding of their current use of cloud storage products, to get an understanding of their frustrations, and to get an understanding of the limitations that each felt regarding their product of choice.
See full survey results >

Key Insights:

  • 96% use Google Drive
  • 57% use Dropbox
  • 87% use for both sharing items as well as folders
  • 96% find it helpful to see other's changes
  • 77% use available collaboration features
pie chart img
Question posed to surveyors:

If a product had a feature that allowed collaborators to "fork" (or make their own copy or branch of) the file, which you could then ultimately approve as the "file owner" do you think you would find that feature helpful?

75% answered favorably

"Sounds like a git workflow, love it!"

Competitive Analysis

Key Insights:

View full analysis >
google drive logo

Google Drive is the most popular as well as the most cost effective, however, is limited in its collaboration features.

dropbox logo

Dropbox seems to answer a lot of those questions and frequently rolls out new features, however, their cost and storage options do not make it an attractive alternative.

box logo

Box seems to really market itself solely to professionals and is therefore not nearly as cost effective for a wide audience.

User Personas

Based on user surveys and the competitive analysis performed, representative user personas were developed in order to portray the ideal audience for this product idea

    Michael persona

    Michael

    Marketing

    28 | Male | Washington, DC


  • Motivation
  • Google Drive works fine for him personally, but where he really needs to see improvements is in collaborating with his coworkers.

  • Goals
  • He would like to be able to collaborate in real-time, in a single straight-forward app, with his coworkers

  • Frustrations
  • Co-workers don’t use file sharing service and prefer to just email back and forth which causes extra work bc it’s hard to tell which is current. It’s also hard to compare different versions to see which is best.

  • "My team needs all the help it can get!"
  • View full persona >

    Katherine persona

    Katherine

    Student

    20 | Female | Blacksburg, VA


  • Motivation
  • She is very organized and uses Google Drive to save her school files in addition to using it to collaborate with other students on projects.

  • Goals
  • She needs to stay on track, keep her grades up, and stay focused so that she can graduate next year.

  • Frustrations
  • Files get lost or are hard to find. Collaboration features are limited. Needs to be able to work together with her classmates on projects and make changes that they all can see.

  • "I need to stay on track so I can graduate on time!"
  • View full persona >

Information Architecture

User Stories

Based on product demands, user research, and user personas, tasks were developed that indicated what new users, returning users, and all users, needed to accomplish. The tasks were then organized into high, medium, and low priority to form user stories.

View all user stories >
new user stories
returning user stories

User Flows

Based on research, competitive analysis, and user stories, user flows were then developed in order to map out the ideal user experience. These were first sketched out by hand and then digitally. User flows included: onboarding, uploading and organizing, sharing a file/folder, creating a folder, creating a copy, and approving/disapproving/merging.

View all user flows >
user flow sketch
digital user flow
uploading and organizing user flow
create a project or folder user flow
approve, disapprove, and merge user flow

Wireframes

Referring back to the user flows, wireframes were created for each task. Firstly, sketches were drawn of the initial design ideas and then they were produced digitally. This was a continuous process until all user flows had been successfully wireframed.

View all wireframes >
sketch wireframe of welcome page
digital wireframe of welcome page
sketch wireframe of dashboard
digital wireframe of dashboard

Round 1 - Usability Testing

After digital wireframes had been constructed, the first round of usability tests commenced. Three scenarios were tested to ensure a good user experience. Testers were tasked with signing up for an account, adding a piece of content like a file or a folder, and lastly organizing a piece of content like a file into a folder.

View full round 1 usability test restuls >

Key Insights:

  • Each tester had no issues going through the sign up process and found it to be very straightforward
  • Each tester successfully completed the task of organizing a piece of content as the flow is very similar to that of Google Drive
  • Testers stuggled to find the “create” and “add” buttons. Additionally, testers struggled to understand the wording and did not understand the difference between create and add. It became clear that this needed to be changed into one button with different wording and needed to be placed in a different location on the page
wireframe usability test result

Branding & Identity

Branding

Next, the branding process began. This process included further research, sketching, refinement, moodboards, deciding on a color palette, and developing a style guide. Given that this product was inspired by Git/Github, I wanted to convey a sense of having different parts, but that all come together in the end to complete the overall picture. So users are able to create copies of the same file, make changes, and then merge it together to make one single, finished product.

mind mapping image
word association image
initial logo sketches
logo sketches

Fuse: to join or blend to form a single entity.

The name “Fuse” was chosen based on the product’s concept. Once that was chosen, I began the process of developing a logo. Starting with sketching, I progressed to digital ideas and worked through various iterations of the idea based on feedback. In the process, I developed a color palette and a moodboard which allowed me to ultimately decide on the colors of the logo. After receiving feedback on my initial logo idea, I decided to change the idea slightly after realizing that when the logo was made smaller, it would not be as clear. I decided to go with the idea of different colors overlaying each other to form different colors. The idea behind this tries to show the idea behind Fuse itself. Lastly, I developed a style guide to show the overall branding, typeface, logo, and theme of Fuse.

moodboard image
finaling logo image

High Fidelity Mockups

Once I had a clearer idea of the product’s identity, I started the process of building out the high fidelity mockups through iterations so that I could ultimately develop a prototype and begin usability and A/B testing.

See original mockups >

Original mockups and iterations of welcome page

original dashboard mockup
1st iteration of welcome page mockup
2nd iteration of welcome page mockup

Original mockups and iterations of the dashboard

original dashboard mockup
1st iteration of dashboard mockup

Prototypes & Testing

Testing

Once the high fidelity mockups were complete, the testing commenced. Tools such as InVision, Maze, and Usability Hub were utilized for usability testing as well as A/B testing in order to ensure an ideal user experience was achieved.

preference test with no confetti
preference testing wtih confetti

I wanted to ensure that the marketing page for the product was not too overwhelming for each user so I tested this vs a “non-confetti” look in an A/B test. 63% of testers preferred the welcome page with the “confetti”, however many noted that it may be necessary to reduce the amount and the opacity.

preference test user avatar left
preference test user avatar top right

I wanted to test the user avatar location on the dashboard so that it made the most sense to each user. It was placed in the top right location as well as on the left-hand side above the menu. 54% of testers preferred the user avatar to be placed on the top right-hand side of the page.

preference test with merge button left
preference test with merge button top left
preference test with merge buttom bottom
preference test with merge button right

After completely usability testing with Maze, it showed that all users were ultimately able to complete the tasks successfully, however, most took an indirect path to success. The placement of the “merge with master” button was causing some confusion so I decided to preference test the button placement in 4 different locations. 69% of testers preferred the button to be placed in the top left hand area of the page. The results were non-conclusive as to if the testers preferred the button to be over the text or to have the text in the center area of the page.

Testing Results

The biggest takeaway from the usability testing is that the overall “workflow” of the product tended to cause some users confusion. Even with that, all users completed the tasks successfully, but took an indirect path to success. This tended to not be the case if users took the time to learn about the product from the welcome/marketing pages tended to perform better.

Conclusion

Final Touches

Based on all of the usability and A/B testing, additional changes to the layout of each page were made based on those results.

View Prototype
final welcome page mockup
final dashboard mockup
final master page mockup

LESSONS LEARNED

Because users who took the time to learn about the product from the welcome/ marketing pages tended to perform better, if more time permits, it would be helpful to build out “walk through” directions for new users so that the workflow is clearer. From the test results, it became clear that this may be necessary and could help with taking my conception and making it clearer to the end user from the “get-go.”

Additionally, from the entire project, I learned that I need to test early and test often. This is crucial to ensuring that I didn’t go down a road that may not be the best choice. Additionally, if I ever felt stuck, it was best to turn that into a preference test and let the users ultimately decided for me. Also, I realized that I needed to develop a strong design system so that my work could be more efficient.

Overall, I believe that the user research that was completed shows that there is a need for additional features than the current selection of cloud storage products provides. The functionality that Fuse provides in being able to create versions of multiple different file types, collaborate on those files with other users, and then ultimately merge them into the best, final version, addresses some of these current shortcomings.

Thanks for stopping by!

Get In Touch My Resume