Starstuff — A UX Design Case Study
Rethinking modern-day cloud storage products with a new kind of workspace
A Place To Bring Ideas to Life
Ideas comes in many forms. A shared article, an exchange of words among strangers, an eye-catching image on the subway — these are just some of the many types of mediums that have the ability to ignite a story, breathing life into something that was once just a passing thought. As natural-born creators, we are always looking to validate our ideas, to know if we’re headed in the right direction. But how?
For my first project as a UX Design Apprentice at Bloc, I was tasked to design a cloud storage application and brand that would rethink the cloud storage market by targeting the problems people face today. Cloud storage web applications haven’t necessarily positioned themselves as a “place to bring ideas to life,” but this project has led me to believe that this is exactly what people want. I designed Starstuff specifically for this reason, to serve as a new kind of workspace that helps users animate their ideas seamlessly and share them with a robust community.
View Desktop Prototype | View Mobile Prototype
Role: UX Design, Visual Design, Brand Identity
Deliverables: User Surveys, Competitive Analysis, User Personas, User Stories & Flows, Wireframes, Usability Testing, High Fidelity Mockups, Prototype
Tools: Figma, Sketch, Photoshop, InVision, Maze, Illustrator, UsabilityHub
CHAPTER #1 — THE CHALLENGE IN A NUTSHELL
For this project, I was challenged to rethink cloud storage by targeting real-world problems that the competition hadn’t yet addressed. At first I thought that users wanted a more intuitive, easily navigable dashboard, but my research proved that they wanted much more than that.
The problem demystified
After getting over the fact that I couldn’t tackle every problem that came my way, I began noticing patterns that dictated my focus on the two problems I simply couldn’t ignore.
- Low interface discoverability, or the inability to find new content specifically due to an overcrowding of unrecognizable buttons, has increased users’ cognitive overload so much that many feel forced to learn platforms through unnecessary trial and error.
- Cloud storage solutions fall short, failing to reach their full potential by overlooking untapped features. While I had initially set out re-examine the usability of current cloud storage products, what I found — in addition to a streamlined user experience — was the need for community project sharing and saving features that would optimize the creative process.
Magnifying the problem insights
When it came to cloud storage platforms, the following frustrations continuously resurfaced:
- Creating content amidst an overload of UI elements is frustrating when ideas are fleeting
- Saving knowledge and inspiration is cumbersome when jumping between multiple platforms
- Finding and keeping content organized is a hurdle when there are too many files
- Identifying the right people to bounce ideas off of or provide critique can be challenging
Crafting the solution
Solving for two completely different problems didn’t come easy as it was a process of continuous reiteration. To address the problem of low discoverability, I made the following three design decisions which unfolded entirely from user testing feedback:
- Design a simple, “invisible” user interface focusing one chief button per page to accomplish primary tasks
- Establish top-level navigation and organize all items into “Categories”
- Integrate an on boarding tour to educate new users on the location and purpose of the primary navigation
But that wasn’t all. Through my research, I realized that users wanted more than a seamless user experience. They were looking for community sharing and saving features that would enable them to interact with and review work by like-minded people for inspiration, discussion and feedback. Starstuff fills the gap in this space by introducing the “Links” and “Groups” sections, enabling users to save links, publish work to a group for community feedback, and browse community feeds for inspiration.
CHAPTER # 2 — THE POWER OF RESEARCH
Debunking assumptions
In order to understand how I arrived at the solutions to the problems at hand, I had to go back to the beginning — starting with user research. What were my users’ top frustrations and what did they want the most from cloud storage? I’d had a hunch, but to really know the answers to these questions, I had to turn to the responses gathered from my user research survey targeting existing cloud storage users creating and sharing work on a frequent basis.
Boy was my hunch wrong! My initial assumptions were that users wanted an overhaul to the user experience. But what I’d found to be most informative from this survey was the desire for additional community, collaboration and saving features that would enhance user creativity. So I’d gathered some key insights regarding behavior, but what could I confidently say about my users?
Understanding the users
According to my survey, there were two types of people using cloud storage apps:
- People who want to create and store information in a well-organized manner
- People who want to ideate, create content, get feedback, and/or save content for new ideas and inspiration
I’d found that these survey respondents best aligned with my primary audience as they were the big curious-minded thinkers and doers. They were the designers, freelancers, illustrators, etc. between the ages of 20–35 in the creative tech industries who were constantly brainstorming and seeking perspective from industry professionals.
Where the competition falls short
To best position Starstuff among the crowded cloud storage space, I needed to identify the competition’s differentiators and weaknesses.
Google Drive’s use of breadcrumbs effectively maps the user’s location, but its cluttered content organization makes it difficult to manually retrieve files, forcing the user to resort to its powerful search. Dropbox, on the other hand, uses clear content organization but overflows the interface with color-accented links. Pinterest’s differentiates through its simple browsing, but its value is reduced by its low navigability — making it easy to get lost within search results. Because low discoverability was a common weakness shared among all three competitors, I sought to make its refinement a key priority within Starstuff to better streamline my users’ experience.
Breathing life to the users
Now that I knew who my users were, how could I bring them to life in a realistic manner? What could I constantly refer back to when I needed to validate my product decisions?
Enter Maya and Sheila, two vastly different personas to embody the full range of Starstuff’s target audience.
Persona # 1: Maya Mathers — Writer & Graphic Design Freelancer
“Giving and receiving feedback is key to learning how to strengthen my skills.”
Motivations —
As a freelancer, I am always searching for a place that can accomplish my primary tasks — but often times, this doesn’t exist. I want to be able to save my inspirations to stay on top of design trends, write blog posts, and share my ideas with other creatives.
Frustrations —
I spend the majority of my day using multiple platforms to organize my files, save links, reach out to online communities, and edit my work. I also struggle with finding the right kind of community to bounce my ideas off. Being able to browse design work from other creatives inspires me to question how I can continue improving on my projects and skills.
Persona # 2: Sheila Tan, 27 — Product Manager
“On a given day, I am buried in text documents — assigning tasks, collaborating and sharing them with my team frequently.
Motivations —
Because I am constantly collaborating with my team in spreadsheets and docs, I need to be able to assign tasks that send notifications as well as copy links to share documents via Slack.
Frustrations —
It’s hard to know who has access to my shared files, especially when I need to notify people of changes I’ve made to a shared document. I’ve found that there are limitations to customizing content within docs when you can’t insert multiple file types or notify my team of quickly approaching task due dates.
Mapping the MVP with user stories & flows
Keeping these personas in mind, I compiled a list of user stories focusing on the highest and medium priority tasks to reach the minimum viable product. I then converted the user stories into user flows to show how the user can accomplish the primary tasks.
Check out all my user flows here.
CHAPTER # 3 — A BRAND IS BORN
In order to begin designing the layout of the Starstuff product, I had to establish the brand which would inform the aesthetics of the solution.
The story behind Starstuff
“Starstuff” was chosen as the brand name because it holds its own propositional density, and can be interpreted both literally and metaphorically. Starstuff can literally represent the product’s key feature of “starring” or saving stuff to the dashboard. But it also holds a metaphorical interpretation, which is based on Carl Sagan’s theory that humans originate from, or are a product of, the stars. Just as humans are made of the same chemical elements as stars, groundbreaking work is made from a series of evolved ideas brought together by many people. Starstuff’s underlying concept is based on the notion that we can’t produce brilliant pieces of work unless we come together to stitch many ideas together.
“The nitrogen in our DNA, the calcium in our teeth, the iron in our blood, the carbon in our apple pies were made in the interiors of collapsing stars. We are made of starstuff. ”
Designing the logo
After selecting the brand name, the logo underwent a plethora of sketch iterations before arriving to its final design. I began the brainstorm by using a mind-mapping exercise to curate a concept that communicated the formation of an idea when many people come together.
To maintain consistency with the solar system theme, I focused on using star and rounded planetary shapes. This decision led to the idea of bringing two semi-circles together to produce one bright star, alluding to the process of bringing people together to conjure an idea. Not only did this concept pair nicely with the brand, but it also created an “S” shape referring back to the brand name. In the end, this logo was chosen for its simplistic, playful and versatile design.
Setting the tone
So I’d created the brand idea and logo, but what kind of emotions did I want to convey to my users when maneuvering throughout the product?
Because they are primarily a younger audience, I chose a combination of bright, contrasting colors and muted slate blue tones to strike a harmonious balance between an engaging, yet relaxing space-themed environment. I chose the contrasted electric violet as the primary accented color because it evokes a sense of creativity that compliments the muted blues and grays reflecting calmness and dependability. The bright pastel pink and teal colors were used sparingly, sprinkled throughout to supply tiny bursts of energy.
I chose to use Futura as the primary typeface mainly because of its legibility, but also because its rounded appearance was reminiscent of the shapes displayed within the brand’s logo design.
CHAPTER # 4 — TO THE DRAWING BOARD
Revisiting the problem to build the skeletal structure
After having created my user stories and flows, I could move onto building the skeletal structure of the site through wireframes — starting from simple sketches to low fidelity wireframes.
Using my sitemap, user flows, and project requirements as a reference, I built my wireframes using Figma.
Referring back to the problem objectives, I knew I had to address the issue of low discoverability in cloud storage interfaces. Because of this, I chose to display a top-level navigation to promote exploration and allows users to easily access the broad categories within the primary navigation before drilling down more specific pages. This top-level approach eliminated unnecessary clicking and the reliance on the search box to find files.
Round 1: Testing the wireframe prototype
If I had moved onto wireframe testing at this point in the process I would have overlooked some of the most glaring issues living within my wireframes. Before moving onto high fidelity mockups, I needed to validate my design decisions through testing.
To do this, I used Maze to test mission-based tasks and InVision to conduct in-person usability tests using a wireframe clickable prototype and a test script. Both served as key tools to gather feedback that informed revisions to key action items.
Wireframe iterations to the rescue
Based on the commentary from these tests, I was armed with the knowledge needed to make the following revisions:
- Remove unnecessary margin space. By spreading the content across the dashboard, I could utilize more real estate space and make the copy and content larger.
- Redesign the “Create” button. While the small “Create” icon on its own is widely used in similar platforms, many testers did not recognize it as a way of creating new content. To maintain high discoverability, I placed it within a larger accented button with the label “Create” displayed.
- Rename content labels in the navigation. To better communicate the ability to follow groups and be a part of the community, I renamed the “Tribes” navigation — the community publishing board — to the term “Groups” to adhere to common naming conventions.
- Convert the collapsed insert menu list. To clearly communicate the purpose of each item that can be inserted into a document, I converted the collapsed insert menu into a full-sized menu list displaying both icons and copy for that extra touch of information.
Layering on the skin
Keeping the branding and user flows in mind, I transformed my wireframes into high fidelity mockups by weaving in the branding to build the final prototype.
Round 2: Testing the high-fidelity prototype
Turning to user preferences
Using UsabilityHub, I put my iterations to test by creating several A/B tests including a task-based navigation test to assess dashboard navigability, a button placement preference test, and an information hierarchy preference test to identify which organizational display of elements within the category page was most favored.
Viewing the prototype in action
I conducted four in-person scenario-based usability tests to assess the product’s usability and understand the user’s opinions towards specific pages.
From the three user tests, I chose to display John’s user test as his responses within the user testing recruiting survey best represented the target audience.
Iterations on the iterations
After analyzing the data and commentary from both the usability and A/B tests, I noticed a few consistent patterns that needed revising. These changes included the following:
- Repositioning the “Create” button. I tested the general preference for the placement of the “Create” button because it appeared awkward hovering above the navigation tab bar.
- Replacing the insert icon. Some users completely missed the star tools icon for inserting items in a doc, stating that it was a design aesthetic rather than an actionable button. To resolve this, I replaced it with a “plus” icon and added a tooltip to note its purpose when scrolled over.
- Inserting keyboard shortcuts. The shortcuts were added to the “Insert Items” list to give users another quick method of adding items to their doc.
- Creating an on boarding tour. Several users didn’t understand the purpose of “Groups” when knee deep in the user tests. To provide an easy introduction before diving into the dashboard, I designed a four-step on boarding tour to explain the purpose and location of the main navigation.
Falling short
After making these final changes, I still felt like something was missing from the prototype as users were still overthinking the best way to accomplish minor tasks, thereby increasing delays and cognitive overload. What had I overlooked? In reviewing my user testing videos, I’d found my answer.
Small changes, big results
To make the next steps more obvious, I laid on subtle interactions and visual cues within the user interface to provide that extra touch of user feedback and a more natural user experience.
- Selected States & Tooltips. Rather than just adding a dark overlay to selected items, I offered anticipatory feedback by adding a green checkmark and border around the selected item when transitioning to a selected state. I also noticed that some users were unfamiliar with the icons displayed within the file editing toolbar, leading to a wild tangent of unnecessary clicking. To reduce confusion, I highlighted the transition to a file editing toolbar by adding the accented purple color to the file editing icons and tooltips to provide them with supplemental information.
- Published Work Card Hover Interaction. Because the published work cards displayed different information than the items within “My Stuff” pages, I removed all icons and content within the cards for a less cluttered dashboard view. Users have the ability to view the work’s number of likes, title, published group, and media type simply by hovering over the card.
The final Starstuff prototype after both rounds of user testing and iterations can be viewed here.
CHAPTER # 5— THE GRAND FINALE
Conclusion: Looking back and beyond
Creating this application challenged me to learn the importance of understanding user objectives. Instead of amplifying existing features and enhancing dashboard navigability within cloud storage, I had to restructure my approach to identify 1) the goals of my target audience, 2) the steps users were undergoing to meet those goals, 3) a solution that would optimize their current process. My problem objective of solely enhancing the discoverability of existing cloud storage products had immediately shifted when I found that users also wanted to improve their creative processes by exposing their work to a community of creative people. This realization was the key turning point that I wasn’t expecting.
In addition to this, I also learned the importance of user testing as early and as often as possible. If I could give my former self one piece of advice, it would be to design less user flows early on in the design process so that I could spend that time focusing on testing just a few primary flows. You can design a solution as meticulously as possible, but there’s nothing quite like experiencing your users frustratingly fail at accomplishing tasks or insightfully delight at a key interaction to reiterate the importance and inevitability of testing.
If I had more time, I would integrate three key features — notes, chat and advanced search capabilities to allow users to create more types of content quickly, engage even further with their community, and find information through visual and suggested search terms.
Finally, designing this solution taught me so much about people, their expectations, and how small changes to even smaller interactions matter. I learned how to empathize and understand the impact that a product can have on a person’s mood when you focus on solving their problems. And in return, it’s amazing how helping my users gleaned a new, humbling perspective on my own goal — designing products that positively impact and serve the greater good. I came to the conclusion that if I can set out to help a person come up with an idea that has the potential to make a tiny fragment of our world a better place, then I have set out to help accomplish something magical and momentous indeed.
If you read up to this point, 1) thank you, you’re awesome!! 2) a clap or two would be very much appreciated. Feel free to reach me in the comments section, my LinkedIn, or follow me on my Twitter page. :)
