Visually oriented and easy to use cloud storage app right at your finger tip without all the complicated steps to complete a task
Overview
- Roles
- UX Design
- Visual Design
- Brand & Identity
- Deliverables
- User Surveys
- Competitive Analysis
- User Personas
- User Stories
- User Flows
- Paper Prototype
- Wireframes
- User Testing
- Style Guide
- Hi-fi Mockups
- Prototype
- Tools
- Sketch
- Invision
- Affinity Designer
- Affinity Photo
- Usability Hub
- Draw.io
- Duration
- 8 weeks
Summary
Mikumo is a visually oriented, simple to use cloud storage app that lets anyone upload, delete, move, share, edit files without all the extra complicated steps.
Problem
There are many cloud storage apps today, but they look visually unattractive and lack the simplicity, making it difficult or time consuming for users to complete a task.
Solution
By making the app more visually oriented, and removing links that might be looping or repetitive, will attract users of all technical levels and make the overall experience much more pleasurable and easier for users.
Discovery & Research
User Surveys
To find out what the users truly needed and wanted, I conducted a Survey to make sure I asked all the right questions to avoid scope creep down the line.
Users v Non-Users Comparison:
Reasons for not using cloud storage services:
- • Keep files on external drive
- • Think it’s unsafe
- • The free option doesn’t offer enough space
- • Don’t need it
- • Hosts their own
Actions needed to be taken to convert non-users to users:
- • Make it cheaper or free
- • Make is safer
- • Make it easier to use
What cloud storage service are they using:
What do our surveyors use cloud storage services for:
- • Reduce storage space in personal devices
- • Uses for work
- • Share file with family and friends
- • Backup
- • Online collaboration
Features the users like about the apps:
- • Easy to use
- • Gives more storage space in device
- • Easy Access and auto-uploads
- • Simple icloud integration with apps on mac/ios
- • Can be organized and cleaned efficiently
Some things our users don’t like about cloud storage services:
- • Doesn't offer enough space
- • Hard to use
- • Slow
- • Too expensive
- • The mobile apps can be a bit faulty
User Personas
From the successful user survey and interviews I conducted, I was able to divide them into three types of users — casual users, hardcore users, and non-users.
Jeff Jefferson
“I just wished there was an app that showed me the exact time my bus arrived”
Age: 41 / Location: Miami, FL
Work: Teacher / Relationship: Married
Goals
- Jeff wants to share files and folder with his students
- He wants to make sure all of his children photos are safe and organized
- He doesn’t want to pay a dime for storage service, even if he has to watch or read ads in order for it to be free
Frustration
- Jeff feels that cloud storage service are too expensive
- He worries that his photos might disappear
- He doesn’t like that there’s always some kind of maintenance going on
James Jameson
“If the public transportation system improved, I’d stop driving my car”
Age: 32 / Location: Long Beach, CA
Work: DevOps Engineer / Relationship: Single
Goals
- James needs to be able to quickly and efficiently send files to his co-workers
- He wants to make sure that there’s enough space in his storage
- He needs to make sure his files and folders can be set to private or require password to access it
Frustration
- He believes that cloud service are not as safe as it’s supposed to be
- He feels that some services can be a little bit slow and faulty
- He doesn’t want to pay for cloud storage serivce, since he host his own
Olivia Olivarez
“The best app has to give the most space for the most affordable price, only then I’m sold on it ”
Age: 24 / Location: Chicago, IL
Work: Student / Relationship: Single
Goals
- She wants to easily share photos and videos with family and friends
- She also wants to be able to organize her photos and videos
- She wants to make sure that there’s storage space to take pictures whenever and wherever she goes
Frustration
- She wishes that iCloud options were a bit cheaper or offered a smaller sized option
- She wishes the Free option offered a little more storage space
- She feels that sometimes iCloud can be a bit complicated to use
Competitive Analysis
Before moving any further, a research on the competitors was paramount. The first two that came to mind were Google Drive and Dropbox due to their popularity, and to mix things up I decided to add Pinterest, because unlike the other two, Pinterest is more visually oriented.
Google Drive
Strengths
- • The free plan offers 15GB unlike other competitors that only offer 2GB for the free plan
- • Offers a sync features that opens up space on the hard drive
- • Drive offers many productivity tools that are synced to Drive
Weaknesses
- • It also doesn’t let you set an expiration date or download count limits to your links
- • Drive doesn’t offer password protection for links
- • Although it’s easy to use, their sync feature have a few bugs, that Google hasn’t documented the solution to its problem
Opportunities
- • Also let you add an expiration date and limit the download count
- • They can make the dashboard more visually attractive
- • They could also implement features that could give you the option to put password to your links
Threats
- • Competitors could implement new features and leave Google Drive to dust
- • Users could lose trust towards cloud storage services
- • Users could start using their own home cloud storage drive, instead of paying for google’s monthly service
Dropbox
Strengths
- • Dropbox makes it easy to share files and folders with other users
- • Dropbox is much easier to sync files and folders than Google Drive
- • With Dropbox’s premium option you can set a password, expiration date, and download limit to your links
Weaknesses
- • The Free plan only offers 2GB of storage
- • Their premium plan carries a steep price for only a few extra features
- • Dropbox’s productivity tools are not as good as Google’s
Opportunities
- • Dropbox could improve their productivity tools and promote it
- • They could offer more storage space to the users, at least as much as Google Drive
- • They could let users set a password, expiration date, and download limit to their links for free or drop their premium price
Threats
- • Users could become tired of dropbox’s lack of evolution
- • Google could copy features, like setting password, expiration date, and download limit
- • Another big company could enter the market and cause a more competitive space for Dropbox, Google Drive, and etc.
Strengths
- • Lets users save and upload many files without having to worry about going over the limit
- • Pinterest has become a hub for creative ideas, by users and visitors
- • It’s free to use and anyone can use it, without any limitations
Weaknesses
- • It has a social media feel, so many users may feel pressured by their follower/pin counts
- • Users upload copyrighted images, which brings many legal actions
- • Pinterest has a very complicated user flows, so much that visitors have a hard time navigating/using their webpage
Opportunities
- • They could improve their user flows, which would make the experience more pleasing
- • Pinterest could also improve the way users organize their pins and boards
- • They can improve their privacy
Threats
- • Scammers could take over Pinterest, leaving their users concerned
- • Companies like Google or Facebook could come up with their own picture oriented service
- • Newer generations could swerve away from pinterest
Information Architecture
User Stories
Next I grabbed all the data collected so far and organized all the features the app needed now, and features that could be implemented later into two types of user stories.
As a New User I want to:
- High Priority
- • Create a new account
- • Set initial privacy
- • Add a password
- Medium Priority
- • Sign up with my Google account
- • Sign up for a premium plan
- • Invite friends to use it
- Low Priority
- • Sign up multiple accounts
- • Make a business account
- • See available plans
- • See the features available
As a Returning User I want to:
- High Priority
- • Upload files and folders
- • Create a link to share my files
- • Browse through my files
- Medium Priority
- • Set privacy on who can open it
- • Delete my files
- • Organize my files and folders
- Low Priority
- • Edit my files
- • Set an expiration date on files
- • Add comments to files
User Flows
With the user stories done, I had an idea of how the app was going to work and what features needed to be implemented. With the high priority features in mind I drew up the process of how each task was going to look like. Making sure all tasks were made as simple, with less steps as possible so any user could use the app without doing a quick search.
Log in and Sign Up
Share and Browse
Wireframes
With the user flows done, I moved on to the wireframes. Finally I was able to organize how the page was going to look like. With the wireframes I was now really able to picture how the features, links, buttons, and etc, were going to look like and how they were going to be positioned in the page.
Wireframe Sketches
Before actually organizing the architecture of the page on a digital wireframe, I drew a couple of quick sketches to make sure that once I moved on to the digital wireframes I kept the mistakes to a minimum.
Digital Wireframes
After I made the sketches that could provide the best possible user experience to the users I created the digital versions of them.
Hero Page
Plans Page
Sign In Page
Sign Up Page
Dashboard
Uploading
User Testing
Lastly on the information architecture phase I conducted an initial testing with the lo-fi prototype I made from the wireframes before moving to the next stage in the design process. From the testing conducted I come to the following conclusions:
- • Although all users were able to complete the tasks, 2 users found it difficult to find the upload button.
- • The ellipsis icon was too small for users to find.
Ellipsis is too small
Upload Button is not detailed enough
- Keeping those two issues in mind, I decided to put the upload button at the very top typed “Upload”, this would ensure all users would find it.
- As for the ellipsis I made them bigger, and hoped that with colors added, users would have no problem finding it.
Visual Design
Brand Identity
Because the clients had a vague goal in mind made it possible to come up with many options for the brand and style guides. I decided to name the brand Mikumo; The Mi is short for Midori meaning Green in japanese, while Kumo means Cloud, so Mikumo means Green Cloud.
Initial Sketches
Initially I had my mind set on making Mikumo’s logo mark based on a cloud shaped. However after a few feedbacks from testing and surveys, I realized that by making Mikumo’s logo mark into a cloud, it would’ve become too cliché
Final Sketches
Ultimately I decided to go with the three 135º angled lines, which represents the letter Mi in Japanese Katakana.
Final Logo
The Green in the name is to represent nature; by using the app, users are actually elimination paper waste, and cloud, well because it’s a cloud service.
HI-FI Mockup
With the wireframes done, and all the pages well structured, it was time for me to start designing how the app was going to look like visually on mobile and desktop by adding all, and conduct a final user testing.
Hero Page
Plans Page
Sign Up Page
Sign In Page
Dashboard
Preference Testing
Before making the final prototype I decided to run a quick preference test, and see if the users would prefer a more visually attractive app or towards the simplistic look.
Dashboard - A
Dashboard - B
Conclusion
This was a very humbling experience. Sometimes I can be hard headed and think about what I want, and forget what the users want. So conducting all the surveys and multiple interviews, user testing, and preference testings, proved to me that the graphs don’t lie.
Moving forward I now know to trust more on the research conducted and less on what I think.