a case study

View Desktop Prototype | View Mobile Protoype

Role: UX Design, UX Research, Visual Design, Brand Identity

Deliverables: Competitive Analysis, User Survey, User Personas, Wireframes, Usability Testing, High Fidelity Mockups, Clickable Protoype

Tools: Figma, Sketch, Adobe Photoshop, InVision, Adobe Illustrator, UsabilityHub

your go-to cloud storage space to
create, inspire & share

Chapter 1: The Challenge Overview

The Problems Revealed

I was challenged to rethink what cloud storage could be. As a user of many different types of cloud storage applications, I started paying close attention to my experience as a user. I began noticing many patterns of inefficiencies that directed my focus on three problems that I simply could not ignore. These problems were later reinforced by my user research.

  1. Cloud storage services are an overload for users. The average user has multiple storage spaces, each serving a similar, but-ever-so-slightly-different, function. This may involve many passwords to remember, multiple sessions of uploading items, different organizing systems, and new accounts to maintain.
  2. Organizing and gathering content is not as all-encompassing as it should be. It’s your storage space, you should be able to organize your interface and files in the way that best suits your needs. All file types should be compatible.
  3. The hassle of collaborating and sharing files is real. In 2019, collaborating and sharing files should be instant and in real-time like everything else we do online. Our social networks should be connected and our files should be shared and unshared, edited and perfected, easily and seamlessly.

Taking a Closer Look

  • When taking a closer look at some of the realities facing today’s cloud storage service users, the following frustrations continuously reappeared:
  • Remaining organized and in-control of your files (and schedule and life!) is more confusing when there are too many platforms to keep track of.
  • Finding and keeping content sorted in a way that makes your life easier is frustrating when you are unable to customize your organizational structure in a way that works best for you.
  • Brainstorming and creating content amidst an overload of UI elements is chaotic and cumbersome when inspiration hits.
  • Finding the right team is hard enough, but sharing and collaborating is more of a hassle when you can’t easily connect with them.

a space to save and collect,
a secure place for memories,
and a connection to a community for sharing

Developing a Solution

In order to solve the problems, the design process needed to be carefully planned. Even with the most thorough preparation, the process still involved continous reiterations. To address the problem of a cluttered interface and maximize user efficiency, I made the following four design decisions - which were greatly influenced from user testing feedback.

  • Design a user interface that is simple and intuitive, focusing one main button per page to accomplish intended tasks.
  • Create a simple user interface by having minimal UI elements and using ‘whitespace’ to create a calm, controlled, and elegant space.
  • Establish an organizing system that acts as a chronological file and a categorical file - always with the flexibility to organize and adjust to user preferences.
  • Connect a social network feature to the cloud storage system, so user easily create teams, share and unshare, and collaborate in real-time

This is just the beginning of what I discovered my users wanted in a cloud storage space. They wanted a space to save and collect photos, links or files that inspired them. They wanted this to be the same place that they stored their own creations: photos, memories, documents. They wanted to be connected to a network of friends, family and coworkers who they could easily share things with and collaborate on new ideas. Mostly users wanted a community - a central space to make all of these things happen. And this is where Hive comes in.

Chapter 2: The Discovery Phase

Understanding the Needs of Users

In order to understand how Hive became my cloud storage solution, let’s go back to the beginning - user research. What did my user’s want in a cloud storage system? What were they missing in their current situation? I had my own ideas of the solution, but it wasn’t until I did my user research that I began to see the full picture. I reached out to my family, friends, social media, and Slack platforms to get a better idea of what my target market wanted.

These were the things that I was trying to discover:

  • Which cloud storage services are most used;
  • How often users uses their cloud storage service;
  • What are the main motivations to use a cloud storage service;
  • What types of content users typically work on or with in their cloud;
  • How happy users are with their cloud’s organizing structure;
  • Users organizing preferences in a cloud storage;
  • What are the main frustrations of the user with current cloud storages;

View User Survey

Finding Design Direction through Research Results

Below are some highlights gathered from the user survey:

Looking Closer at the Competitors

The user survey results surprised. me. I thought I would have more clear-cut answers. But according to the survey results - they want it all! All users use their cloud storage system for both personal and business purposes. They want the capabilities for storage, sharing, and backing-up old files. Users want to be able to include documents, photos, old files, web pages and media. Cloud storage service usage is split almost equally between daily, weekly, and monthly users. Half are happy with their organizing system and half are not. Yet at the same time, 61% want to customize it. The key takeaway from these survey results confirmed my hunch. Users want the best of all the cloud storage services combined in one place.

In order to figure out how to proceed with Hive, I needed to figure out where to position it in the market and how to differentiate it from competitors. I did a competitive analysis in order to identify the weaknesses, strengths, threats, and opportunities. Based on my user survey results: Google Drive, Dropbox, and Pinterest were popular cloud storage service choices.

Since Hive was to become a combination of all of the most useful and stand-out qualities of it’s competitors - I focused on identifying the main strengths that are specific to each of the most popular cloud storage service companies. Some of the key takeaways included: having accessible platforms on many devices, ease of collaboration, ability to share/unshare, document workspaces, visually appealing platforms, catchy company lingo, customizable boards, flexible storage options, easy transferring and sharing, and a simple/user-friendly interface.

With this list, I had the main essentials of what Hive would provide for its users. It felt like a solid place to begin, in the pursuit of making Hive - ‘Your Go-To Cloud Storage.’

Bringing Hive Users to Life

Now that I figured out who my users are, I needed to create their unique personalities, motivations, and stories in a realistic way. This way, I could refer back to them, to validate decisions as I continued through the design process.

Meet Verenice, Boris and Olivia. Our first Hivers! They represent a diverse set of needs and motivations that can be met through the use of Hive cloud storage.

View User Personas:

View Verenice

Verenice, 37

Occupation: Business Director
Archetype: Leader

Life is long enough if you time manage it properly.

Motivations: Results, Communication, Central Organization, Security, Collaboration

Goals: To be able to keep all colleagues on the same page with projects and information sharing. To keep the company system organized and working as efficient and effective as possible. For quick file sharing and easy access to old data files

Frustrations: Not being able to access up to date information. An company system that is disorganized and not intuitive. Inability to communicate instantly with colleagues about projects and data

View Boris

Boris, 49

Occupation: Art Director, part-time model
Archetype: Visionary

Life is beautiful chaos. However in a storage system, I want beauty, not chaos.

Motivations: Quality, Beauty, Artistic Freedom, Security, Convenience

Goals: To have a customizable cloud storage organizing system that is also visually pleasing to look at. To be secure in the fact that cloud storage service will guarantee back-ups and file retrieval. To be able to edit images and work entirely inside the cloud storage system

Frustrations: Not having the freedom to visually customize my own organizing system. Have lost work due to inadequate file retrival features in cloud storage systems. Limited software application capabilities for working inside cloud storage systems.

View Olivia

Olivia, 19

Occupation: Student
Archetype: Collaborator

The sky should be the limit in technology and I have high expectations to be able to do anything and everything

Motivations: Collaboration, Communication, Getting things done, Efficiency, Innovative

Goals: To work as a group efficiently on class projects, communicating with colleagues easily. To keep backup files of academic and personal work. To be able to access all material from any device at any time

Frustrations: Needing to use multiple cloud storage services to get things done. Wishes layouts were more update to date and visually attractive. Not the easiest to find colleagues or students contact info to collaborate.

the best of all cloud storage services combined in one place

Chapter 3: Go Home to Your Hive

In order to begin creating the layout and interface of Hive, I had to develop the brand of Hive. The brand will define the aesthetic decisions in the design process.

balance between being industrious
and remaining connected

Designing a logo that reflects hive

After deciding on the direction and personality behind the brand name, the logo was next. It went through quite a few sketch iterations and color schemes before deciding on the final design. It is the honeycomb, a crucial piece of the hive, geometrically divided into pieces that were shaded in to look like stacked boxes. These subtly represent the building blocks of storage and also of success. The colors are modern and elegant, meant to soothe and inspire and allude to the simple beauty of nature.

Evoking the Hive emotions

Because the audience is mature, professional and creatively inclined - I chose a combination of a soothing light pink-peach and various shades of yellows to motivate and inspire and grays to create a subdued balance. The colors of my logo were inspired directly from one of my moodboard images of a modern and and lively room: using a similar color palette. The image represented the clean, modern and elegant space that I wanted Hive to feel like on your desktop.

It is meant to inspire the composure of modernity with the vivacity of nature.

I chose Italiana as the exclusive typeface for the hive logo, and Roboto for the primary typeface. I chose both of these fonts because of their elegance and simplicity. They fit the emotions and personality that I wanted Hive to embody.

View the Hive Style Guide Here

Chapter 4: Information Architecture

Identifying and Mapping the Primary Goals of the Users

Now that the personality and branding of Hive was in motion, it was time to create the user stories and flows. With my previously created user personas in mind, I identified the high, medium and low priority tasks to reach the minimum viable product.

View User Stories

Once the priority tasks were clear, I then converted the user stories into user flows to show the series of steps that the user can take to accomplish these tasks.

  • Sign-up for a New Account or Sign-in
  • Create a new file or upload an existing one
  • Organize a file: Create a new document or folder

After creating the User Stories and User Flows, I was beginning to have a much better idea of the navigation structure of Hive’s interface. To further plan for the next steps, I created a Content Strategy to fill in more of the blanks in my content hierarchy and navigation structure.

Hive begins to take shape through Wireframing

Now that the content strategy was mapped out, the priorities of the user stories were clear, and the user flows were mapped out - it was time to build the skeletal structure of the site through wireframing. This started with simple sketches that evolved into low fidelity wireframes.

Building the skeletal structure of the site, forced me to reconsider the problem objectives. I knew that I had a lot of features to fit neatly and minimally into a one place. I also knew that I needed to create a program standard organizing system that was neat and user friendly - but one that remained customizable should users want to adjust it to their needs. Remembering to include a social media aspect to better facilitate sharing and collaborating was key as well. So I started out creating a site homepage, that had files central - and a dropdown bar that always existing to facilitate navigation and structure. I used my sitemap, user flows, and project requirements as a reference and I built my wireframe in Figma.

User Testing the Wireframe Prototypes

While I created the wireframe prototypes, I designed it in a way that made the sense to me. But good thing that I did user testing at this point! There were a few major things that I overlooked in the design of my wireframes.

To do this I used Figma to conduct virtually guided usability tests using a wireframe clickable prototype and a test script. Validating my design with user testing was a crucial point. The results gave me that feedback that I needed to revise an optimal user friendly website.

View User Survey Script

Create an intuitive navigation structure through reiterations

Watching real users navigate through my wireframe prototypes, was so useful to see how their thought process worked as they moved through the website. Based on the commentary, I focused in on the following revisions and implemented them into the creation of my high fidelity prototype:

  • Make better use of UI Elements for clarity in navigation.
  • Close buttons and back buttons were overlooked and are crucial for efficient navigation.
  • Narrow down the UI icons for minimized clarity.
  • Use action buttons when a form is complete, to show user it is ready for the next step.

Chapter 5: Creating the Visual Design

Pulling it all Together

Keeping in mind the branding, user flows and the main problem to solve - I turned my wireframes into high fidelity mockups by incorporating the branding into the final prototype.

User Preference Tests

If there was one thing that transformed this whole design process, it was the invaluable feedback from user testing. So I went back to the surveys and created more A/B testings to get a feel of what was preferred in some of the designs that I was unsure of.

My questions mostly revolved around maintaining the refined, minimal personality that I wanted Hive to embody. I was unsure of how much color I should introduce or how empty the layout should remain.

View Usability Tests:

Based on some feedback that I received from some senior designers, I realized that I had taken the honeycomb pattern on the homepage too far. I needed to tone it down and make it more cloud storage service appropriate and less “artsy.”

Below is transformation:

Putting the High-Fidelity Prototype to the Test

I conducted 3 virtual usability tests to assess Hive’s usability and to get more feedback on general opinions of specific things. I had users perform a variety of specific tasks. These included:

  • Create a new account
  • Enter a new folder and add a new file
  • Share a file
  • Create a new document
  • Save new document
  • Locate your social network

View High-Fidelity Test Script

KEY TAKEAWAYS FROM USER TESTING PROTOTYPES

  • Double-check all action buttons for deactivated versions, then activated versions once the information is filled in. This helps users understand that the information is complete and they can intuitively move forward seamlessly in the process.
  • Change sign-up and sign-in buttons
  • Make a list for My Hive for inside album
  • Add file: disable grey button at first - same for saving file
  • Buttons not consistently aligned in the choosing plan portion of the site
  • Create more space to select in the dropbox list. Since this was the mobile prototype example, I needed to keep in mind the sizing in order to best design for a touch screen.

Improved reiterations:

Chapter 6: The Hive Debut

View Desktop Prototype | View Mobile Protoype

Conclusion:
What I Learned Through the Design Process

Functionality

If I could go back in time to give myself some advice, I would have advised myself to create with more of a focus on functionality. The fact is, in this project, I got lost in trying to develop the aesthetic beauty of the site and function and practicalities were cast to the side. For example, in terms of function: the font is not ideal in terms of weight or readability. Although, aesthetically the delicacy and lightness fits the personality that I wanted to create. But without functionality, a beautiful aesthetic is useless.

Projects are always a work in progress

There were a few times, when the reiterations felt never-ending and I couldn’t figure out why it hadn’t gotten to perfection yet. I realized some designers were giving me conflicting feedback and I felt like I was designing reiterations in circles. That’s when I realized - that is part of it! Projects never finish! They are in a constant state of evolution and evaluation and improving. Once I realized this, I got Hive to where I could, given my time constraints - and moved forward! I accepted the “could be’s” and have them in mind for the next round.

Final Thoughts on the Experience of the Design Process

Designing this solution taught me so much about what goes behind most of the sites and applications that I use. We have predetermined expectations for how things should function. When something isn’t right when navigating and using a site, you instinctively realize it. I started to pay more attention to the applications that I use and consider their strengths and possible things that could be done better. I know that Hive is not perfect. But learning what functionality is in practice and identifying successful user interfaces will help in creating better solutions for the future. After all, this is a fast-paced moving industry!

The whole process, beginning with the problem and culminating in an actual solution - felt invigorating. Knowing that are a part of creating real solutions to problems that you see in the world around you - whether it is helping people connect, learn something, kept track of something, or create awareness for a cause - being apart of creating solutions for the future is a great place to be.