Clutter Design Challenge

Client: Clutter
Role: UI/UX Designer
Duration: 1 week
:

I also delivered a design briefinteraction design concept, key learnings from surveys I conducted (in write-up below), a usability analysis, a mini style guide, and an information architecture diagram.

The Problem

Clutter is a startup that offers full-service moving and storage services with unprecedented efficiency and unit economics due to its built-in-house technology. Today, its website is viewable at www.clutter.com.

In a design challenge, I was asked simply to “share wireframes or anything else that would help improve Clutter’s branding”. In response, I put together a design brief and gave a timeline of 7 days. In the design brief, I stated that I would deliver a hifi mockup redesign of Clutter’s homepage, a simplified information architecture diagram/site map, a usability evaluation of the website today, a small subset of styled UI components and interaction patterns that could be re-used throughout Clutter’s website, and a mini style/brand guide.

Final Deliverables

  1. Design brief to articulate what I would deliver and why.
  2. Hifi mockup redesign of Clutter’s homepage to show improved branding and visual design
  3. Interaction design concept for the homepage
  4. Key learnings from survey feedback regarding the hifi mockup redesign
  5. Usability analysis of Clutter’s current homepage
  6. Mini-reference for visual design, branding, and reusable components
  7. Information Architecture (IA) beginnings with select thumbnail sketches

Discovery

Competitive Brand Analysis

To begin, I conducted a competitive brand analysis on competitors to Clutter, viewable in this rough Google doc.

Based upon the analysis, I noticed that regardless of the level of visual design and branding and execution, Clutter’s competitors still communicate that they are moving and/or storage companies. To differentiate itself as an innovative leader, I believe that Clutter should position itself as more than a moving and storage company and instead as a technology and service solution that deals with your belongings – moving them, storing them, returning them to you, keeping track of them, and more. This direction also leaves the path open for Clutter to expand its services endlessly to include the handling of all areas related to people’s possessions rather than keeping the brand story limited to moving and storing.

When it comes to a rebrand for Clutter, I was inspired by Rent the Runway. Rent the Runway, a clothing-as-a-service company, positions itself as more than a clothing company and, rather than as a disruptor of an old industry, as the creator of a new one. Rent the Runway positions itself as an unlimited closet and as a solution that lives at the intersection of tech, fashion, and quick access via speedy delivery. I think that Clutter should take a similar approach.

I also noticed that Makespace, the branding leader of the competitors I discovered, puts forth an artistic, feminine energy in its website akin to that of a stylish, competent mom with a flair for interior design. I want to differentiate Clutter from this and instead modeled Clutter’s brand off of a straightforward, can-do, helpful dad personality. I capture this energy in my moodboard included in the mini-reference.

Here is the mini-reference I created that articulates foundational aspects of my proposed branding and two types of reusable components. I recommended that if Clutter wanted to make incorporating brand into UI a priority, there would be much more to document, flesh out, and validate than what I shared in the mini-reference.

As a note, before any of the components I outlined are lifted into production, I would need to have a more thorough understanding of Clutter’s product and customer-facing touchpoints beyond just clutter.com. For this design challenge, I only had visibility into Clutter’s website while thinking of these components. I need to analyze how components and interaction patterns fit throughout Clutter’s online presences and product. Components designed for the website and marketing materials do not need to be consistent with internally used tools.

Survey

On the first day I started work on the design challenge, I sent out a survey to friends and family to baseline Clutter’s current homepage. I designed the survey to gage perception of Clutter’s brand. After I finished my redesign, I sent out another survey to gage perception of my redesign’s brand and to compare my redesign to Clutter’s current homepage. Unfortunately, Google Forms does not currently have a good way to share the results of a survey. I am happy to share all the results via video call and/or in person.

Click here to see the baseline survey.

Click here to see the redesign survey.

Key Survey Learnings

Overall, people prefer to use my redesigned homepage. Of the 11 people who answered the question about preference for Clutter’s current homepage versus the redesign, 9/11 prefer the redesign, and 2/11 prefer the current homepage. Here are some illustrative quotes:

  1. “The new page seems a lot more on-brand because it is, well, less cluttered. It’s less overwhelming and looks easier to navigate.”
  2. “The second page is easier to navigate and understand. I like how the business’s mission and purpose is the first thing you notice, and it stays with you while you navigate the rest of the website. I also like the storage on demand, in your control, and full service moving which helps me better understand why I should trust this company. Overall, this website is way less cluttered (haha) than the original clutter.com page.”
  3. “[I prefer the original homepage because it] gets right to pricing and getting me what I need.”

My intended brand values come across in my redesign. When asked to name three words they would attribute to Clutter after looking at the redesigned homepage, words folks said included: happy, helpful, clean, and straightforward.

My redesign could improve in messaging and tone. Survey respondents repeatedly brought up that in the second design, they think that Clutter is a moving/storage company. This fits Clutter’s current messaging and the status quo in the industry, but I am trying to convey that Clutter is more than just that and is a tech-enabled “as a service” company. To achieve this goal, I would iterate upon the content copy and image choices, especially in the hero section. I also need to improve the tone of the copy to help communicate that Clutter is caring.

Aspects of my approach that could have biased the survey results include: a non-random sample, I don’t know if the people who answered the survey (my friends and family) necessarily match Clutter’s target customer segments, I did not necessarily ask the survey of the same people, and there was a leading question in the first survey. In an ideal situation, I would have completed the redesign before conducting an A/B test of the redesign against Clutter’s current homepage. I would have presented both as static pages on Invision. Additionally, I would have randomized the order to which people were exposed so that they are not biased by knowing which one is the redesign.

Usability analysis

Click here for my heuristic analysis. The analysis shows that from a usability perspective, the biggest ways Clutter’s homepage can improve are making sure website components and interaction follow standards and in error prevention.

Information Architecture (IA) with Thumbnails

Click here to see my proposed IA. The major difference in my proposed IA vs clutter.com’s current IA is that my proposal articulates distinct website sections to spell out the different services offered by Clutter and mapping this to different sections on Clutter’s website. This way, users know exactly where to go to learn about Clutter’s current services. This approach is scalable because if Clutter adds any other services, there can be sections built out on the website for them.

I am also including thumbnail sketches of some key pages at the bottom of the IA diagram. This shows that I thought about a 3-column grid layout approach that can be scalable throughout Clutter’s website regardless of content on the page.

Future directions

Below, I list future directions I could take the deliverables here if I was a Product Designer at Clutter:

  • Understand more about Clutter’s customers by talking to PM, marketing, sales, and via user research → visual design and branding that resonates with them
  • Continue iterating on the homepage and wireframing/building hifi mocks of the rest of the pages on the website
  • Continue to create quick thumbnail sketches to ensure that the grid pattern fits throughout the website and is scalable
  • Establish mobile breakpoints and reflow patterns for the grid
  • Work with marketing and sales to understand what actions we want folks to take on the website and to adjust designs accordingly
  • Further understand of any branding directions Clutter is currently pursuing and why
  • Analyze Clutter’s product and customer-facing media to continue building out brand and consistent, reusable components