Draw
Case Study
Roles
  • UX/UI Design
  • Product Design
  • Visual Design
  • Branding & Identity
Deliverables
  • User Surveys
  • Competitive Analysis
  • User Persona
  • User Stories & Flows
  • Branding
  • Wireframes & Testing
  • High Fidelity Mock-Ups
  • Prototypes
Duration
  • 17 Days
Tools
  • Adobe Photoshop
  • Adobe Illustrator
  • Balsamiq
  • Figma
  • InVision
  • Sketch
  • Usability Hub
  • Google Survey

Summary

Cloud storage is a tool used by almost everyone in both professional and personal lives. Draw is one stop shop app from organizing files to collaborating any projects in real time with anyone. Users are saving time and unnecessary efforts with Draw. Draw makes you feel that distance means nothing and how fun and easy to organize files and collaborate projects with anybody.

Overview

The Problem

There is no project sharing cloud storage where we are able to collaborate and edit vector files in real time

Insight

Hassle to save images, then edit, then repost, then reshare

The Solution

  • A project sharing cloud storage that stores and edits vector files in real time with drawing tool
  • One stop shop for people to organize their files from storing pictures, writing journals, creating and working on projects, and collaborating projects together with co-workers, friends, or family.
  • While you edit the file together, you are able to chat with each other through cameras and speakers
  • Cross-platform desktop and mobile.

Process

Research & Discovery

Survey Image
Results

100%
Used cloud storage for business and personal

100%
Have used Google Drive, followed by 77% Dropbox, and 45% iCloud

87%
Use the cloud storage to update content from personal devices, followed by 81% use the cloud storage to share content with other users, 77% like the cloud storage because they can access from various devices.

50%
Paid for premium cloud service

* Percentages based on 30 user responses

Competitive Analysis

SWOT Analysis (Strengths, Weaknesses Opportunities, Threats)

google drive Image

Google Drive

  • Google Doc & Sheet integration and many third-party apps
  • In-app edit collaborations
  • Strong customer support
  • Online backup
  • Great cost - Free for 15 GB & starts from $ 1.99 monthly for 100 GB
  • Weak file-sharing security
Creative cloud Image

Creative Cloud

  • Many people have work with Adobe and familiar with the program for a long time so they are sticking with Adobe rather than trying another program
  • Great editing features for graphic design, movies, and photo
  • Expensive - Individual: US$52.99 /mo, business: 79.99/ mo
Dropbox Image
  • Very fast sync
  • Easy sharing, great web apps, seamless device, and PC integration
  • Limited space - only up to 1TB
  • Expensive - starts from $ 9.92/month for 1000 GB
  • No 24/7 support
Draw Image

How we can enter the market:

  • Affordable cost
  • Real-time update collaboration ability
  • Great vector drawing tools
  • Easy sharing
  • Fast sync & backup
  • Strong customer support
  • Target customers: Individuals & Business
User Persona User Persona Image User Persona Image
User Stories

Based on the information gathered from the survey and competitive analysis, user stories were created to highlight the main features of the product.

Role Tasks Importance
New User I want to open an account High
Role Tasks Importance
Returning Users I want to save an item High
Returning Users I want to organize my files High
Returning Users I want to create a drawing file from the app High
Returning Users I want to share my files with my friends High
Returning Users I want to open a drawing tool High
Returning Users I want to revise my drawing High
Returning Users I want to open a drawing tool High
Returning Users I want to search for a file High
Returning Users I want to sketch High
Returning Users I want to import vector icons High
Returning Users I want to import from Illustrator & Photoshop High
Returning Users I want to import data from Google sheet or Excel High
Returning Users I want to upload a file from my phone Medium
User Flows

The user stories were then converted into User flows to illustrate how the user would interact with the product and accomplish those goals. Below are user flows for onboarding, creating /open files and organizing files.

Branding

The name Draw was chosen among other ideas such as stroke, lines, freehand, and spray. Draw is a brand that wants to convey the feel of easy collaboration for any projects, including art. The logo should have a hand-drawn effect as if we draw the projects by hand.
This logo also conveys the meaning of the company is hot and on fire in the positive way.

Logo Design
Logo Design Image Logo Design Image
Color Palette Color Palette Image

Draw pages intended to have a White or light Grey background as if we start drawing from a blank White page. - Orangy Coral was chosen as the logo color because it conveys the meaning of creativity and also fire as if the company is hot in a positive way. Muted Blues and Pink were chosen as complementary colors with the added meaning of relax and easy working environment. The dark Grey was chosen here as the darkest contrast for font color or any other media used if needed. The design style of the brand should be clean, simple, and modern.

Fonts
Color Palette Image Color Palette Image

I chose ROBOTO for my brand typeface and BEBAS NEUE for the complementary typeface. These were chosen because they are modern, simple, and easy to read. It symbolizes the working environment when you are using the Draw product. Easy, simple, and modern.

Roboto is a neo-grotesque sans-serif typeface family developed by Google as the system font for its mobile operating system Android. Google developed the font to be "modern, yet approachable" and "emotional".

Bebas Neue is a sans serif font family based on the original Bebas Neue font by Ryoichi Tsunekawa. It has grown in popularity and become something like the Helvetica.

Wireframe & Testing

With my user stories and flows in place, I can begin sketching with paper then computer. When the wireframes were done, I was able to test them with a few people to collect some early feedback as follows:

Peter:

  • Confused on how to close the thank you window
  • On the “ Explore Draw” page, left menu should be locked
  • On the bottom of the “ Explore Draw” page, add click to get started or direct the user where they need to go
  • After sending the message (contact us), the page should be directed back to help page
  • Missing link on the “upload folder”
  • When opening a new page, the page should show at the top instead of the bottom
  • Confused about the top left icon on the document.

Joyce:

  • When opening a new page, the page should show at the top instead of the bottom
  • Missing a link on the “+” add file/ folder
  • Was wondering if there is a link to the home page on every page.

Cat:

  • On the Explore Draw page, the left menu should be locked
  • Adding “x” for closing the thank you note
  • When opening a new draw page, it opens as a new tab.
  • Do not need an icon to go back to the dashboard

Grace:

  • The icon on the top left side is confusing, do not need to link it to the dashboard
  • When she clicks and go to a new page, the page should show at the top instead of the bottom
  • Sign up page first then payment page after
  • After the thank you message, either it should disappear or click the “x” button
  • Add “Login” to the top menu
  • When opening a new page, the page should show at the top instead of the bottom
High Fidelity Mockups

When the High fidelity mockups were done, I was able to test them with a few people to collect some more feedback. The tasks are:
· To sign up
· To figure out what app is this
· How to add, save, and create files and folder in the dashboard

Most of the comments were about missing links to get out of the page, some of the images are blurry, the font sizes are too big, and the buttons are too small. I went back fixed the images issue, added the missing links, and revised the font and button sizes.

A/B Testing

After all the usability tests, I ran the Preference Testings or A/B testing and got great info for me to move forward with the final prototype.

css/images/ab_testing_1.webp
css/images/ab_testing_2.webp

57% prefer the first design without the Grey Background.

  • Easier read and you feel like you’re right there next to the person
  • More visually attractive
  • I like this one because the text seems to flow nicely with the background image
  • The 1/4 page design is more dynamic than splitting the screen in half

43% prefer the design with Grey background.

  • Because the main image has a lot going on and the black semi-opaque background creates a better color contrast for the text, making it more readable.
  • More focused
AB Testing Image
AB Testing Image

86% like the first design with the bottom area Grey.

  • All the bottom links/texts are not as important so it’s better that they recede into the background with the grey ground. The white ground makes all the icons and elements pop more and draw your eye to the more important things.
  • Visual hierarchy is clearly focused
  • Simpler navigation to follow
  • Clearer message
AB Testing Image
AB Testing Image

71% prefer without the Navy background.

  • It’s nice to keep the ground color the same so your eyes don’t get stuck on the files.
  • More minimalist and cleaner
  • White gives more brightness color
  • Clean presentation. Feels lighter
  • Chic and navy background looks like a screenshot
Final Product css/images/macbookpro_and_iphone_mockups.webp
Product Features

EDIT ANY FILES IN REAL-TIME
Users are saving time and effort with Draw.

EASY COLLABORATION AND SHARING FEATURES
Sharing files is as easy and fast as 2 clicks away. After sharing, you are able to edit the file together in real time and chat through cameras and speakers. Draw makes you feel that distance means nothing.

STAY ORGANIZED
Store all your files in one place with Draw, open anywhere, anytime, and from any devices. Draw makes you feel that organizing is easy and fun.

24/7 CUSTOMER SERVICE
Our knowledgeable customer service is available to help you with any questions or problem 24/7.

Conclusion

I was a little doubtful at the beginning of the stage because the project is too generic, too many competitors, and people are so used to with existing cloud services that they used. However, through some surveys, research, and really dig into people problems, I started to get excited about this project. The most useful research to me is the survey research and the SWOT analysis. Once I analyze the data, I realized nothing is impossible. The most challenging part of the project was writing the detailed content strategy. Without any visual, it is hard for me, especially for the first time, to picture in my head and write in detail every process of the app. The areas I enjoyed the most are coming up with ideas, branding, and final prototypes. Overall, this project is a very long project, however, I learned a lot along the way. Some are also mentally challenging, I learned how to tackle those situations. The most rewarding feeling was when the testers were able to navigate the app easily and also really like the product.

Lesson learned

Stay truthful to your users
Learn to let something go that is not right to your users.
User testing is the key to create and improve any product
Keep updating to make the product better

See more
Get in touch