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.
iPad Pro and Apple Pencil
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?
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.
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
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
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.
Unclear CTA buttons
Can’t share documents or files
Can’t create content
Little free storage
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.
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
Share design files with client remotely
Receive clear approvals or rejections of files from client
Not use all his HD space
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
UX Writer • 26 y/o • Chicago, IL
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.)
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.
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.
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
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.
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.
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.
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:
Sign up for an account
Upload a folder
Create a folder
Upload a file
Sort your files by date
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.
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.
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.”
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.
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
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.
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:
Sign up for a “Freelancer” account
Upload a folder, upload a file, create a folder
Sort the contents of the folder “Performance Gym Designs” by ascending date
Submit the folder “Performance Gym Designs” for feedback to your client
Sign in with a “Client” account
Submit approval to the folder “Performance Gym Designs”
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
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
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.
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.