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
User research, UX design, User testing, Branding, UI design
User stories, User flows, Wireframes, Lo-fi prototype, Hi-fi mockups, Logo, Style guide
iPad Pro and Apple Pencil, Balsamiq, Draw.io, Sketch, InVision, UsabilityHub, Adobe Illustrator
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?
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.
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
- 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
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.
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.
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.
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.
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.
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
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!
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
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
- 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!
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.
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!
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.
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.
Edited copy to explain better the app’s purpose
Switched spots for sign-up form and social media options
Changed sorting hotspot to be category names with minimal arrow for direction
Added storage capacity to bottom of sidebar and app menu to top right corner
Changed popup tab UI to better match overall app branding style
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.
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.
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.
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
- 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
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.
Insert a shortcut link for “Feedback” directly on the hover to reduce touchpoints
Add a short tutorial upon signing up to introduce unfamiliar features to the user
Change interaction so that when user clicks “Pending feedback,” they are taken directly to the feedback tab instead of just the closed folder
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.