Starstuff logo

A Place To Bring Ideas To Life

Starstuff is a cloud storage application that streamlines the creative process by making it easy for users to brainstorm, find inspirations, and collaborate on projects.

Starstuff header image Starstuff header image mobile

Summary

Why Starstuff?

Ideas come in many forms. A shared link, an exchange of words, an eye-catching image on the subway — these are just some 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 always seek to validate our ideas, to know if we’re headed in the right direction. But how?

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.

design role icon

Design Role

  • UX Design
  • Visual Design
  • Branding
design deliverable icon

Design Deliverables

  • Competitive Analysis
  • User Survey
  • User Personas
  • User Stories & Flows
  • Wireframes
  • Logo Design
  • Brand Style Guide
  • Usability Testing
  • Hi-Fi Mockups
  • Paper Prototype
  • Final Clickable Prototype
tools icon

Design Tools

  • Figma
  • Sketch
  • Photoshop
  • Invision
  • Maze
  • Illustrator
  • UsabilityHub
abstract flower

CHAPTER 1 | OVERVIEW AT A GLANCE

The challenge

The problems 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.


  1. 1) Low interface discoverability.

    The inability to find new content due to a cluttered user interface increased users’ cognitive overload so much that many felt forced to learn platforms through unnecessary trial and error.

  2. 2) Untapped community features.

    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 and iterative processes.
chapter 1 header image
chapter 1 header image mobile image

The solution

A seamless experience & a community-oriented environment

Solving for two completely different problems didn’t come easy as it was a process of continuous reiteration. To solve for the problem of low discoverability, I made the following design decisions:

  • Design a simple, “invisible” interface focusing on one chief button per page
  • Use top-level navigation and organize items into "Categories"
  • Integrate an on-boarding tour to educate new users on 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 a community-oriented environment to interact with like-minded people. Starstuff fills the gap in this space by introducing the “Links” and “Groups” sections, allowing users to save links, publish work to a group for feedback, and browse inspirational feeds.

abstract flower

CHAPTER 2 | DISCOVERY PHASE

User survey

Getting to know the users

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 did my users want the most from cloud storage? I had a nagging hunch, but to really know the answer I had to turn to research. I began with a user survey and sent them out to my friends, social media, and subreddit in order to understand the goals of my target audience. The results from the survey would inform the following:

  • How often users use cloud storage;
  • What are the most important features;
  • What are their top frustrations;
  • What cloud storage platforms were most favored;
  • How often are users using collaboration features;
  • Would users like to save their web links and inspiration to their dashboard;
  • Would they want a solution to assist with brainstorming and collaboration;


The survey questions were completed by over 40 respondents.

Survey results

Debunking assumptions with research

Key discoveries and highlights gathered from user research.

User Research Highlights

1
first part of chart mobile
82% of respondents use cloud storage on a daily basis.
2
second part of chart mobile
56% use Google Drive, 31% prefer Dropbox, and 13% use Pinterest as their preferred cloud storage platform.
3
When asked to select top collaboration features, 89% chose publishing work for community feedback, 70% selected browsing content for inspiration, 59% chose saving knowledge & inspirations, & 18% chose social media sharing.
third part of chart mobile

86%

said sharing was critical but had difficulty in knowing which files had been shared with others

69%

want to save web links to their dashboard

71%

want to create and customize text documents by inserting multiple types of content (charts, media, etc.)

80%

expressed an interest in password protecting individual files when sharing files with many people

And it’s a very good thing I didn’t act on that hunch. 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.

Key problem insights

Magnifying frustrations

To recap the results from the user survey, here were the most prevalent frustrations that continued to resurface when it came to cloud storage platforms:

  • 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
Types of user frustrations graphic

Target audience

Who are the users?

Based on the screened survey, I found that the users that best aligned with my primary audience were the big curious-minded thinkers and doers. They were the designers, freelancers, illustrators, entrepeneurs, etc. between the ages of 20 and 35 in the creative tech industries who were constantly brainstorming and seeking perspective from professionals.

types of users

Competitive analysis

Converting weaknesses into strengths

While undergoing my competitive analysis, I noticed that low discoverability due to cluttered content organization and an overflow of accented links were common weaknesses shared by the competition. I sought to turn this weakness into Starstuff’s strength by making discoverability a high priority. I also noticed that many users turned to Pinterest for cloud storage because of its easy ability to save ideas and browse inspiration boards. What if Starstuff also offered users the capabilities to save interesting web links to their dashboard and browse inspiration posted by other Starstuff members? Would these features add or subtract from the overall content creation and ideation experience? Again I had a hunch, but I already learned that lesson.

Starstuff competitor images Starstuff competitor images horizontal
VIEW COMPETITIVE ANALYSIS

User personas

Bringing the users to life

Now that I knew who my users were, how could I breathe life into them in a realistic manner? What could I constantly refer back to when I needed to validate my decisions?

Enter Maya and Sheila, two vastly different user personas to embody the full range of Starstuff’s target audience.

first persona image

Maya Mathers

Writer & Design Freelancer, 26 years old

"

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 design inspirations to stay on top of 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.

second persona image

Sheila Tan

Product Manager, 27 years old

"

On a given day I am buried in text documents, assigning tasks and collaborating with my team."

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.

VIEW USER PERSONAS
abstract flower

CHAPTER 3 | INFORMATION ARCHITECTURE

User stories & user flows

Mapping the MVP by defining user goals

Keeping the personas in mind, I compiled a list of high priority user stories and converted them into user flows to show how the user can accomplish primary tasks, like the two below.

"As a return user, I want to publish a file to a group to receive feedback on my work."

publish a file user flow

"As a return user, I want to share an item by copying and sending a link."

share an item with another person user flow share item flow mobile
VIEW USER FLOWS

Wireframe sketches

Beginning with pen and paper

After having created my sitemap, user stories, and user flows, I could move onto building the skeletal structure of the site through wireframes — starting from simple wireframe sketches to low fidelity wireframes.

hand-drawn wireframe sketches

Low-fidelity wireframes

Revisiting the problem to build the skeletal structure

To address the issue of low discoverability within cloud storage interfaces, I chose to display a top-level navigation to promote exploration and allow easy access to the broad categories within the primary navigation before drilling down into specific pages. This top-level approach eliminated unnecessary clicking and the reliance on the search box to find files. Using my sitemap and user flows, I built my wireframes using Figma.

wireframe screen wireframe screen wireframe screen wireframe group mobile

Low-fidelity wireframe prototype

Testing the foundation before moving forward

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.Thankfully, I didn’t. Before moving onto high fidelity mockups, I made sure to validate my design decisions by conducting a little bit of testing.


To do this, I used Maze to test mission-based tasks and InVision to conduct guided in-person usability tests using the low-fidelity wireframe clickable prototype and a test script. Both served as key tools to gather feedback that informed the revisions to key action items.

VIEW LOW-FIDELITY PROTOTYPE

A key insight revealed during testing showed that many users were unfamiliar with the content labeling established within various areas of the dashboard, prompting them to overlook actionable cues to accomplish primary tasks.

Iterations based on testing

Reducing visual confusion

With the accumulation of golden nugget knowledge gained from testing my wireframes, I was armed with the knowledge needed to make the following revisions.

1

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.

create graphic
2

Rename content navigation labels

To better communicate the ability to follow groups and be a part of the community, I renamed the "Tribes" navigation to the term "Groups" to adhere to common naming conventions.

image displaying groups iteration change
3

Make insert items easily readable.

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.

image displaying insert menu list iteration change
abstract flower

CHAPTER 4 | A BRAND IS BORN

image of landing page branding

Brand concept

The story behind Starstuff

“Starstuff” was chosen as the brand name because it holds its own propositional density, having both a functional, or literal meaning as well as an emotional one. Starstuff can literally represent the product’s key feature of “starring” or saving stuff within 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 and imaginations brought together by many people. Starstuff’s underlying concept is based on the notion that we can’t produce brilliant work unless humans unite to stitch many ideas together.

quote image

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."

– Carl Sagan, Cosmos

moodboard collage

Logo design

Creating a logo that sparks imagination

After selecting the brand name, the logo underwent a plethora of sketch iterations before arriving to its final design. I began the brainstorm with a mindmapping exercise to curate a concept that activated creativity and communicated the formation of a momentous idea.

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. In the end, this logo was chosen for its simple, playful and versatile design.

logo design image

Color palette

Evoking the right emotions

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 my users are 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 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.

color palette

Typography

Prioritizing legibility and branding

Because of its similarity to the logo’s rounded semi-circle shapes, I chose to use Futura as the primary typeface because of its ease of legibility, elegant appearance, and minimalist aesthetic approach.

typeface usage
style guide first image style guide second image style guide third image style guide fourth image
VIEW THE STYLE GUIDE
abstract flower

CHAPTER 5 | VISUAL DESIGN & TESTING

High-fidelity prototype

Layering on the skin

Keeping the branding, project requirements, and user flows in mind, I transformed my wireframes into high fidelity mockups by weaving in the branding to build the final prototype.

screens of Starstuff

A/B testing

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.

Category Content Layout Preference Test

Screen A

Image-based Category Page

preference screens of Starstuff

24%

preferred this screen’s hierarchical display of file types depicting visual folders rather than just images

Screen B

Hierarchical Category Page

preference screens of Starstuff

76%

of users preferred the visual display of folders because it separates folders from the other file types.

User testing

Testing prototype usability

I conducted four in-person scenario-based usability tests to assess the product’s usability and understand the user’s personal opinion 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. In the video below, I tested the following tasks:

  • Create an account
  • Upload and move files to a category and folder
  • Create and share a document, add a comment, and insert a checklist
  • Follow a new group
  • Unpublish and republish a file from and to a group

Falling short

Sweating the details

While the user testers had managed to complete the majority of tasks, I still noticed that something was missing from the prototype that would further reduce the amount of time spent accomplishing tasks for primary flows. But what had I overlooked?

It was clear that users were still deliberating between the next appropriate step when organizing their files and browsing published work. The key takeaway from the in-person testing sessions was to focus on improving visual communication and cues within the dashboard to reduce cognitive overload and increase productivity.

The icing on the cake

Small changes, big results

After replaying the user testing videos and analyzing the data and commentary from both the usability and A/B tests, I made the following revisions for added feedback and a more fluid user experience.

1

Reposition the "Create" button

I preference tested the placement of the “Create” button because users found it slightly hidden and awkward hovering above the navigation tab bar. Most users preferred its placement at the top right of the dashboard.

"Create" CTA Button Preference Test

Screen A

Pill-sized button in the primary navigation on the left

mobile test image screen a

Screen B

Pill-sized button above the secondary navigation on the right

mobile test screen b image

Screen C

Circular "plus" button above the secondary navigation on the right

mobile test screen c image
graphic verifying Create button placement

67% of users preferred Screen B for the placement of the “Create” button and a follow up navigation test showed that 96% of users could accurately show the steps to create a new document.

2

Replace 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.

changing insert icon for clarity graphic
3

Insert keyboard shortcuts

The shortcuts were added to the "Insert Items" menu list to give users another quick method of adding items to their doc.

image displaying insert menu list iteration change
4

Create an onboarding tour

Several users didn’t understand the purpose of “Groups” while testing the prototype. To provide an easy introduction before diving into the dashboard, I designed a four-step on boarding tour for an empty state to explain the purpose and location of the main navigation.

5

Add interactions for user confirmation

Rather than just adding a dark overlay to selected items, I included a green checkmark and border when transitioning to a selected state for that added touch of anticipatory feedback. Some users also failed to use the file editing toolbar because its icons were unnoticeable. To resolve this, I highlighted the transition to the file editing toolbar by changing the icons to the accented purple color and adding subtle tooltips for supplemental information.

6

Simplify content layout for added clarity

When users navigated to the “My feed” section within the “My Groups” navigation, many felt overwhelmed by the amount of information displayed. To reduce the visual clutter within the dashboard, I removed all content displayed above the image cards. Users now have the ability to view more information about each piece of work simply by hovering over the card.

All four in-person testers who experienced the full depth of the product stated that they would use it once shipped. 94% of users who tested the final product after all iterations stated that they did not experience confusion or frustration while navigating the dashboard. Based on these results I concluded that the implementation of these changes was key as it dramatically reduced the time it took for users to complete tasks, granting them more time to focus on what matters most – their work.

abstract flower

CHAPTER 6 | BRINGING IT ALL TOGETHER

The Final Product

After creating over 90 screens, eight preference tests, and three clickable prototypes for both desktop and mobile, I'd finally reached the final MVP.

Starstuff final screens mobile one Starstuff final screens mobile two
onboarding tour screen Starstuff empty state screen Create doc screen Aurora display screen Create doc Iceland screen Boat screen Links screen Files page screen
my stuff dashboard mobile new item mobile folder mobile my stuff category mobile
Starstuff mobile tour screen Create doc mobile Iceland screen Create doc mobile screen Links mobile screen Aurora display mobile screen Boat mobile screen

Conclusion

Looking back & beyond

What I learned –

Always test your assumptions

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. Throughout this project there were many instances where my anticipations were not the same as my users, forcing me to step back and analyze how I could craft a solution that best fit the needs of the user rather than one stemming from my own assumptions. Thus, the main 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.

Testing early & often

If I could give myself one piece of advice before starting, 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.

Additions beyond the MVP

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.

Final insights

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.

flower graphic

Let's create disruptive user experiences.

With my creative problem-solving and goal-oriented mindset, we can create amazing products (and business results) together.
If you like what you see let's connect and take this offline!