Kyodo_color_large.png
 
 

I was tasked with creating a new cloud storage app that solves a unique problem to successfully enter the saturated market. Kyodo is a cloud storage and file sharing app designed for freelancers and their clients. With communication, organization, and feedback features, Kyodo strengthens professional relationships no matter the distance.

Note: This project was created for my UX Design Apprenticeship at Bloc and has not been shipped

 
Kyodo_final.png
 
 

Roles

User research, UX design, User testing, Branding, UI design

Deliverables

User stories, User flows, Wireframes, Lo-fi prototype, Hi-fi mockups, Logo, Style guide

Tools

iPad Pro and Apple Pencil, Balsamiq, Draw.io, Sketch, InVision, UsabilityHub, Adobe Illustrator

 
 

 
 

PROBLEM

Freelancers want clear approvals

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

Cloud storage app with approval feature

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.

 
 
 
 

USER SURVEY

Understanding users and their current habits

I created a survey to understand if and how people are using current products on the market. Questions revolved around which apps are being used, most used features, and any pain points or frustrations.

 

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

Finding opportunities in the competitions’ weaknesses

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. After highlighting the competitors’ weaknesses, I refined the app’s goals to be: effective organization, ease of sharing, and clear feedback capability.

 
 
 

USER PERSONAS

Personifying the survey results

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

The Designer

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

Ken, a seasoned web designer, likes to be transparent about his process and receive feedback at each key step. However, since going into freelance full-time this year, he is still figuring out his work flow and how to best communicate with his clients near and far. Ken wants to make the client feel involved and ensure the handoff is as seamless as possible.

 
 
 
persona-bella.jpg

The Writer

UX Writer • 26 y/o • Chicago, IL

As a UX writer, Bella needs to be in constant communication with her client. From understanding the brief, asking the right questions, and providing QA, there’s a lot of touch points in her process. However, switching between her email, writing program, and cloud storage has been a huge pain. Ideally, Bella would like to work within the same program to write, communicate, and organize her files. Since she’s often working with multiple clients at once, she likes to keep her work organized by date and client.

 
 
 

Lessons learned:

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.

 
 

 
 

USER FLOWS

Identifying potential pain points early

After finalizing the user stories, I created user flows to visualize every interaction a user makes to complete a task. The focus was to reduce cognitive load wherever possible.

 

Create folder or upload file/folder

Kyodo_UserFlows.png
 

WIREFRAMES

Designing blueprints for functionality

Before jumping into colors and fonts, I sketched rough wireframes of screens identified in the user flows. Multiple versions of each screen were sketched to consider all angles of the problem. The screens with the most promise were rendered in Sketch for the clickable prototype!

 
 
Sketching out different variations of the dashboard...

Sketching out different variations of the dashboard...

…then recreating them in Balsamiq!

…then recreating them in Balsamiq!

 
 

USER TESTING LO-FI PROTOTYPE

Critical lesson learned in the importance of UX writing

To test the functionality of Kyodo, I asked three users to complete the following tasks:

- Sign up for an account

- Upload a folder

- Create a folder

- Upload a file

- Sort files by date

 
From left to right: Share modal, Folder details popup, Homescreen

From left to right: Share modal, Folder details popup, Homescreen

 

View lo-fi prototype

What worked:

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

- Tabs in the details popup did not match the overall UI of the app

Lessons learned:

- My first version of the prototype had a very linear path only specific components were clickable to get to the next screen. However, I learned that this cannot accurately test for usability if I’m intentionally guiding them. So I revised the prototype so a user can freely explore the prototype!

- I realized that I completely underestimated the power of copy. I hastily wrote the brand tagline in the prototype which confused users off the bat as to what Kyodo is for. In future prototypes, I’ll make clear UX writing a priority!

 
 

 
 

BRANDING

Creating a brand identity that embodies the heart of the app

The name Kyodo was derived from the Japanese word 共同 (kyōdō) meaning cooperation, collaboration, and partnership.

 
Sketching logo ideas, drawing inspiration from Japan

Sketching logo ideas, drawing inspiration from Japan

 
 

Continuing with the Japanese theme, I explored a logo resembling a hanko or stamp used to sign off on documents. In Japan, a hanko is required to approve any process or document, which connected to Kyodo’s feedback feature. Ultimately, I chose the logo design below for best scalability, boldness, and representation of the “connectedness” theme!

Final logo: best scalability, boldness, with the loop representing “connection”

Final logo: best scalability, boldness, with the loop representing “connection”

 
 
 

With the logo finalized, I began to work on color and style. The city of Kyoto, the cultural epicenter of Japan, heavily influenced the branding.

 
 
Kyodo’s color palette - inspired by the rich reds found in the city of Kyoto

Kyodo’s color palette - inspired by the rich reds found in the city of Kyoto

 

 
 

HI-FI MOCKUP

Final stretch: Combining style and user feedback

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.

 
 
 

UX Copy

  • Edited copy to explain better the app’s purpose

Sign-up 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

 
 
 

PREFERENCE TESTING

Turning to users for design input

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.

 
 

Lessons learned:

Although the preference test results were super helpful, I learned that you should not always take the responses as is. In the sidebar color test, I saw that the pink was preferred for the wrong reasons. A designer must always analyze the meaning behind the user’s input!

 
 
 
 

USER TESTING HI-FI PROTOTYPE

Brand new features may require some guidance

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.

View hi-fi prototype

What worked:

- No issues with signing up/in or logging out

-No confusion about whether they were in the freelancer or client portals

- No issues with uploading or creating content

- Sorting improved and was intuitive

What didn’t work:

- Users were confused about how to submit files for feedback. The task required too many touch points and was buried too deeply in the UI

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

Lessons learned:

UX patterns are your friend! It was apparent that my first solution for sorting was confusing. Google Drive, the most popular cloud storage app (according to my research) had already developed an intuitive way of organizing files by category. If it ain’t broke, don’t fix it.

 
 
 

HI-FI MOCKUP REVISIONS

Fine-tuning mockups before deployment

Based on the second round of user testing, I further revised the mockups.

 
 
 

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

Final Thoughts

Kyodo solves the unique needs of freelancers 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.

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.

Thanks for reading!