Kyodo_color_large.png

Kyodo is a cloud storage and file sharing app designed for freelancers and their clients. The app strives to defy the distance between them and strengthen their professional relationship by focusing on communication, feedback, and organization.

 
 
 

Roles

  • User research

  • UX design

  • User testing

  • Branding

  • UI design

 

Deliverables

  • Competitive analysis

  • User personas

  • User stories

  • User flows

  • Wireframes

  • Lo-fi/Hi-fi prototypes

  • Style guide

  • Logo

 

Tools

  • iPad Pro and Apple Pencil

  • Balsamiq

  • Draw.io

  • Sketch

  • InVision

  • UsabilityHub

  • Adobe Illustrator

 
 
 

Problem

Although the cloud storage market has tough competitors, none meet all the needs of freelancers. To create a cloud storage product for a target audience that is often remote and collaborates digitally with clients was a worthwhile challenge. Given this problem, I sought to find what distinct features do freelancers want when storing and sharing files?

 

Solution

In order for freelancers to have a successful relationship with their clients, they rely on their tools to excel at communication, feedback, and organization. Enter Kyodo: a collaborative cloud storage and file sharing app with a focus on feedback. Kyodo allows clients to provide clear approval or rejection on a file, making the iterative process more efficient.

 
 
 

Process

Discover

User Survey

To begin the process, I had to better understand how users are currently interacting with the market. I crafted a survey to answer the following questions:

  • What cloud storage apps are most popular?

  • What do people primarily use the app for?

  • What features do they like the most?

  • What are their pain points or frustrations?

I was also interested in what types of collaboration features were used the most. For example, sharing, real-time collaboration, commenting, or other? I collected responses from 19 people across all ages, gender identities, professions, and geographical locations.

 

Primary Uses for Cloud Storage Apps

Key takeaways:

  • Users prioritize being able to share files/folders, have ample storage space, and collaborate with others

  • Users are frustrated with current unintuitive organization tools and often have a hard time finding what they are looking for

  • Some users would like a feature to get clear approvals or sign offs on a design or document

 

Competitive Analysis

Survey results also revealed the three main competitors currently used in the market - Google Drive, Pinterest, and Dropbox. Each of the competitors has their own strengths that attract certain users. However, with the vision of a collaborative cloud storage designed for freelancers, they have shortfalls.

 
 
 
 

Google Drive

  • Unclear CTA buttons

  • Feature bloat

  • Overwhelming organization

Pinterest

  • Can’t share documents or files

  • Can’t create content

Dropbox

  • Little free storage

  • Limited organization

 
 
 

Google Drive is the most popular competitor but it may be too great for its own good in that it has more features than one can ever use. Pinterest is great for collecting visual ideas on a site but lacks in organization and collaboration features. Finally, Dropbox is great for collaboration but only has 2GB of free storage (versus Google Drive’s 15GB). After highlighting the competitors’ weaknesses, I refined the app’s goals to be: effective organization, ease of sharing, and clear feedback capability.

 

User Personas

Based on my research findings, I visualized who the potential customers are by creating two user personas. They reflect the goals and frustrations of real-world users and help guide my design choices.

 
 
 
persona-kenji.jpg

Kenji T.

Web Designer • 40 y/o • Long Beach, CA

Goals

  • Share design files with client remotely

  • Receive clear approvals or rejections of files from client

  • Not use all his HD space

Frustrations

  • Can’t tell if his client viewed the file or not

  • File organization is not customizable to his liking

  • Some clients not tech-savvy and have trouble viewing files

 

 
persona-bella.jpg

Bella D.

UX Writer • 26 y/o • Chicago, IL

Goals

  • To always have access to her files regardless of platform

  • Quickly share draft iterations with her team members

  • Easily find any documents (by date, status, topic, etc.)

Frustrations

  • Can’t see who has viewed or shared a file

  • Hard to find old documents

  • Have to copy and paste content link into an email

 
 
 

At the time of creation, I crafted the personas to reflect the different use cases of a “freelancer.” However, looking back now, I would have added another user persona to represent the “client.” This addition would have better represented the full array of potential customers.

 

Define

So far, we’ve done a lot of discovery: analyzing the competition, identify users’ pain points with current products, and determining their needs. Now comes the time to outline how the solutions to those needs will be implemented in the final product.

 

User Stories

With the user personas’ needs as a guideline, I outlined how users will interact with the app in the form of user stories. However, all user stories are not equal - each are unique according to who will do them (role) and how critical they are (importance).

High Importance User Stories

  • All users want to sign up for an account

  • All users want to comment on a file

  • All users want to log into my account

  • All users want to view a file

  • All users want to see who has viewed a file

  • All users want to see who the file is shared with

  • Clients want to mark file as approved or disapproved

  • Freelancers want to create a folder

  • Freelancers want to share a folder

  • Freelancers want to upload a file (graphics, texts, design files)

  • Freelancers want to share a file

  • Freelancers want to sort files/folders ("date created", "date

  • modified", "alphabetically")

Organizing user stories by importance help to define the minimum viable product through dictating hierarchy, information architecture, user flows, and visual design. Stories that are less important would become nice-to-have features that can be added in later deployments.

 

User Flows

Going through each user story, I created user flows to visualize every interaction the user would need to take to complete the task. The focus was to keep steps to a minimum to reduce friction and prevent user drop off. I first sketched them on an iPad and then digitally refined them using Figma.

 
 
 
 

Mapping out the entire process for each user story allowed me to visualize each step and create the app’s foundation. User flows help to ensure a user’s journey to task completion is intuitive and pain free.

 

Design

Wireframes

With the project scope well defined, I started on the visual design phase of the process.  Before jumping into colors and fonts, I sketched rough wireframes of key screens identified in the user flows and sitemap. During the sketching phase, multiple versions of each screen were drafted to compare layouts. 

The rough and dirty iPad sketches were then made easier to understand and a little more presentable on myBalsamiq.

Key features:

  • Distinct portals for freelancers and clients

  • Ability for freelancers to submit a file for final feedback and for clients to either approve or reject it

  • Details pane shows complete history of file: date of creation, viewers, etc.

  • Users can share and comment directly in-app

 

User Testing: Round 1

Wireframes can be used to test the website’s structural skeleton and weed out any UI usability issues at an early phase. I initially decided the app UI based on what I felt had the most accessibility, intuitive organization, and easy sharing processes. The chosen screens were refined into a low fidelity prototype with Sketch and InVision. The first round of user testing helped to determine whether my hypotheses were true and which elements needed revision.

 
 
 

I asked users to complete the following tasks:

  1. Sign up for an account

  2. Upload a folder

  3. Create a folder

  4. Upload a file

  5. Sort your files by date

What worked

  • Users had no issues with the uploading or creating content.

What didn’t work

  • Some users were confused as to what the app was for. The copy on the landing page did not make the app’s purpose clear.

  • Many attempted clicking the social media sign up buttons first before entering their own information.

  • Sorting was not as intuitive since the content could only be sorted by using the dropdown, instead of just clicking on the category (e.g. Last modified).

  • I also received feedback that the tab groups in the details popup did not match the overall UI of the app.

 
 
 

Visual Design

Before we move any further into testing, it was high time to establish a brand identity, complete with a logo, typography, color palette, and style guide.

 

Logo

I wanted the brand identity to embody the heart of the app: collaboration and defying distance. Reaching into my Japanese heritage for inspiration, I decided on the name Kyodo — derived from the Japanese word 共同 (kyōdō) meaning cooperation, collaboration, and partnership.

Continuing with the Japanese theme, I had the idea of creating a logo that was similar to a traditional Japanese hanko, a stamp with an individual’s last name used to sign off on documents. Since a hanko is required to approve any process or document, I felt it played an homage to Kyodo’s feedback feature with the hopes that freelancers will receive many positive approvals in the future!

 
 
 
 

I ultimately settled on the design below for best scalability, bold yet unique design, and execution of “connectedness.”

 
 
 
Kyodo_color_large.png
 
 
 

Typography

I chose Calafia as the brand typeface, a casual script font designed and provided for free by Neil Secretario and Riley Cran. The sign painting style was a great display font that would serve as a unique identifier for Kyodo. The cursive also helped enforce the “connectedness” theme.

 
 
 

Moodboard & Style Guide

With the logo finalized, I began to work on color and style. To guide this process, I first created a moodboard. I drew the color palette from pictures of Kyoto - the cultural epicenter of Japan. When searching for iconography, I selected a simple set that reflected Japan’s minimalist designs and would embody Kyodo’s simple, intuitive UI.

 

Using the moodboard as a map, I created a style guide for Kyodo. The selected colors and typography choices would ensure that the final product’s UI would be consistent and on brand.

For the complementary body font, I chose Raleway, an elegant san serif Google Font designed by Matt McInerney, Pablo Impallari and Rodrigo Fuenzalida. It was the perfect, simple complement to the display font.

 
 
 
 
 
 

Hi-Fi Mockup

With the app’s branding established, I created the high-fidelity prototype. When designing this iteration, I made sure to implement my learnings from the first round of user testing.

 
 
 

Introduction Copy

  • Edited copy to explain better the app’s purpose

Input Order

  • Switched spots for sign-up form and social media options

 
 
 

Sorting

  • Changed sorting hotspot to be category names with minimal arrow for direction

Button Rearrangement

  • Added storage capacity to bottom of sidebar and app menu to top right corner

 
 
 

UI Style

  • Changed popup tab UI to better match overall app branding style

 
 
 

When flushing out the design details of the UI, I ran into some intense heated debates (with myself) about style. Instead of continuing my one woman showdown, I turned to preference tests to hear user input. I utilized UsabilityHub to give me concrete, data-driven results.

 
 
 

Sidebar Color

Users actually preferred the pink sidebar (59%) to the off-white (49%). However, many of the comments showed that they preferred the pink sidebar because it helped attract their attention to it. I ultimately chose the off-white sidebar to keep the user’s attention to the main priority of the page: the file contents.

 
 
 

Popup or Dropdown

Although I was more confident in the popup design, users overwhelmingly preferred the dropdown tray (67%) to the popup (33%). One user commented that it allowed for more space for the details layout. Another wrote that the popup disrupted their view and so they preferred a smoother transition.

 
 
 

Iconography

Users largely preferred the third design (71%) with the texts coming in second (29%) and the first at dead last (0%). The preference was unanimous and so it easily guided my decision for an iconography style.

 
 
 

User Testing: Round 2

After completing the high-fidelity prototype, I deployed a second round of user testing. This time, I focused the tasks to test usability of fundamental features that distinguish this app from competitors:

  1. Sign up for a “Freelancer” account

  2. Upload a folder, upload a file, create a folder

  3. Sort the contents of the folder “Performance Gym Designs” by ascending date

  4. Submit the folder “Performance Gym Designs” for feedback to your client

  5. Sign in with a “Client” account

  6. Submit approval to the folder “Performance Gym Designs”


What worked

  • Users had no issues with signing up/in or logging out

  • Users were not confused about whether they were in the freelancer or client portals

  • No issues with uploading or creating content

  • No users were confused about how to sort files and changing directions


What didn’t work

  • Users were confused about how to submit files for feedback

    • The task required too many touch points and buried too deeply into the UI

    • Especially since the feature is not as well known as sharing, it required some explanation

  • Even after submitting files for feedback in the freelancer portal, some users had trouble tracing those same steps to submit approval in the client portal

    • Again, too many touch points to complete the task

 
 
 

Reduce Friction

  • Insert a shortcut link for “Feedback” directly on the hover to reduce touchpoints

 
 
 

Provide Guides

  • Add a short tutorial upon signing up to introduce unfamiliar features to the user

 
 
 

Streamline Flow

  • Change interaction so that when user clicks “Pending feedback,” they are taken directly to the feedback tab instead of just the closed folder

 
 
 

Conclusion

Given the crowded cloud storage market space, it was crucial to reach a new target audience. To start my journey, I sought to design a product specifically for freelancers and their clients.

Kyodo solves their needs by maintaining the features users love most about their current cloud storage apps - sharing, collaboration - and adding distinct features to improve the relationship between freelancers and their clients. On top of that, it improved upon weaknesses found in current products, such as lack of effective organization.


What did I learn?

  • Setting clear goals for user surveys saves you from future headaches. I created the survey unclear of the direction I wanted to take with the app. This uncertainty is reflected in the results in that they don’t clearly answer my later questions regarding the freelancer target group.

  • User feedback is the highway to success. The best way to test assumptions is through user testing and preference tests. I often spent too much time pacing around, pushing pixels back and forth, unsure of what to decide. However, by getting direct user feedback, the answers quickly became clear.

  • Unfamiliar features may require some explaining. Because Kyodo’s feedback feature was brand new, many users had a hard time understanding how to complete that task. Although I was initially wary of including a tutorial (to minimize road-blockers) but after the user testing sessions, I realized they can be helpful in these situations.


What would I do differently?

  • Focus on more distinctive features for freelancers. I wanted Kyodo to stand out from the competitors, but with only one distinct feature, I feel it was not enough. I would have added one or two more to demonstrate how Kyodo is specifically designed for freelancers. One idea is payment submission, where clients must pay freelancers upon approval in order to receive their final deliverables. This would alleviate the common pain of not receiving timely payments from clients though, of course, this would require more testing to validate.

  • Conduct more follow-up user research targeted to freelancers. I defined my project scope for Kyodo as a cloud storage app for freelancers after conducting my user survey. I would have liked to create another user survey that asked more specific questions for the freelancing community to better understand the target audience’s needs.

Final Thoughts

Despite my shortfalls, this journey of creating a product from the ideation to execution was a valuable experience for me as a designer. Due to the competitive nature of the cloud storage market, it was a challenge designing an app to satisfy user needs as well as establishing a defining new feature. I believe this first MVP for Kyodo was a valiant effort that could be improved in future iterations.