a case study
Role: UX Design, UX Research, Visual Design, Brand Identity
Deliverables: Competitive Analysis, User Survey, User Personas, Wireframes, Usability Testing, High Fidelity Mockups, Clickable Prototype
Tools: Figma, Sketch, Adobe Photoshop, InVision, Adobe Illustrator, UsabilityHub
your go-to cloud storage space to
create, inspire & share
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.
a space to save and collect,
a secure place for memories,
and a connection to a community for sharing
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.
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.
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:
Below are some highlights gathered from the user survey:
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.’
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.
Occupation: Business Director
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
Occupation: Art Director, part-time model
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.
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
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.
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.
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.
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.
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.
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.
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:
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.
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:
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:
KEY TAKEAWAYS FROM USER TESTING PROTOTYPES
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.
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.
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.