Cricut Website Redesign 2021

Cricut website example
Cricut front page example (mock by Free-PSD-Templates.com)

The Brief

Scope ~ 1 month – Budget ~ NA – Role ~ UI/UX

Cricut is a cutting machine company that specializes in machines that cut paper, cardstock, leather, wood and more. Users often visit the site but new users will get lost due to how the site is laid out and presented.

Problem Statement

The large scale of the website has led to many usability issues, navigation is hard to use, and it can be a struggle to find information.

Solution

The final solution was a website redesign that addressed usability issues such as navigation issues, global search, missing headers and a soft branding change. The top pain points were also addressed – inspiration, learning, and troubleshooting.

The Process

Double diamond design process image
Double Diamond Design Process

Whenever tackling a new problem, the first thing is to work towards understanding it and exploring the problem. Research helps you to understand what you should focus on, and from there you can define and further explore ideas as need be.

Usability Heuristic Report

I started my research with a Usability Heuristic Report, this report points out common issues on most websites and a variety of templates are available. My finding’s pointed out many places the user could get lost.

Picture showing a variety of headers on the site.
Here you will see a noticeable UX issue, too many kinds of headers.
Some UX issues like - no global search - no page headers etc
4 Heuristic issues I would address from my report

Surveys

I continued to do research by running Surveys. To understand my audience and what things they would like to do on the website. Here were some of my main findings.

Survey pain points - Users could not browse projects easily, users were unsure how to use materials and machines, troubleshooting help was a high request
Some insights from the survey
Graphic showing 46.6% of users don't find the site useful. 87% of users want to browse projects.

I continued to interview users to understand more of what they were looking for and where they had concerns.

“There’s too much like, I don’t know, uncertainty [with the website] that it’s like I already just don’t feel like I trust the website, which kind of sucks because I actually really like the idea of having a Cricut, but I feel like I would have to just never use their website. I probably [would] just YouTube.” 

“I just do vinyl and cardstock but I want to try other materials, but have no idea what to make.”

User Personas

These were created to think about the user while designing. These personas were based on off interviews and survey’s.

Anna Persona
Zack Persona
Terry Persona

Top User Pain Points from my personas

  1. Currently the website lacks project organization & limited inspiration
  2. Currently the support and troubleshooting is a bit confusing to navigate
  3. Currently understanding the products and materials is challenging

SWOT

I created a very simple Strength Weakness Opportunity Threats chart to look at the competition and some of what they were doing. There was not really a lot of similar competition in this field, the next competitor would be Brother but they did not have anything very close machine or software wise. If you wanted to view more on the competition there is a more in-depth study here.

Cricut Strength Weakness Opportunity Chart
Cricut SWOT
Silhouette SWOT Chart
Silhouette SWOT Chart

User Stories & User Flows

User stories were developed to help understand important tasks and prioritize what should be focused on. This was combined with user flows to understand the direction and what would be necessary for the redesign.

User Stories detailed spreadsheet
Detailed user stories
User flow for finding compatible products
User flow for finding compatible products
User flow for getting started
User flow for getting started
User flow for finding design projects
User flow for finding design projects

Sketches

Following this I worked out some different sketches and covered more of what page layout might look like, I often would use Crazy-8‘s to get ideas.

Here are some example sketches

Wireframing & Prototyping

I was able to wireframe and prototype different page layouts and test them as I went to see how users liked them. I went through many different variations, below are some examples of how pages changed.

Project page example
Learn page example
Support page example
A high level view of the various pages created for the prototype

Accessibility

I looked at different aspects of accessibility to see what I could improve on while working on the wireframing and thinking about branding. I used Wave to look for accessibility issues and found small text and contrast issues in the store. Even I was having trouble with some of the text. I also ran Google Page Insights and Cricut’s website is almost unusable on mobile devices scoring a 6/100.

Screenshots showing contrast and page speed issues using WAVE Accessibility tool and Google Page Insights.
The contrast issues and slow page speed was noticeable.

Branding and User Interface

After looking at ways I could improve accessibility I thought about ways to rebrand Cricut and work on improving accessibility while also giving Cricut a more modern look. I started first with a moodboard of images I find fresh and related to crafting.

Moodboard of inspiring crafts and colors I thought about adding to Cricut’s branding.
Style guide 1
A sample page of my style guide.
Another sample style page

Usability Testing

With all of this in place I started to run some usability tests to see what worked and where I could improve my design work. I found some tasks were not phrased well but overall my results were very successful but I found some areas I could improve such as the project browsing.

Some results of testing
Heatmap for project inspiration task

What if the Design page was renamed to Inspiration?

– one of the users suggestions I INCORPORATED following useability tests

I worked in different types of feedback and ran both moderated and unmoderated tests to improve the product as best I could in my timeframe. The users often made good suggestions and I would ask them a variety of questions and tasks as they viewed the product but I also wanted to watch them explore and play with it to see where their main interest would line. I studied where users would click and looked for different patterns and types of users, some users did not notice icons or particular patterns I expected them to and I decided to rework some bits of the design to improve that.

Retrospective

In conclusion I was able to address all my user pain points by improving the navigation, reorganizing pages and content, making pages more accessible with branding and reorganization, adding pages users requested such as project browsing and search. I added additional purchase funnels and made it easier to find out what products were compatible. I learned a lot tackling this project and enjoyed working on updating pages, there is a lot left to do, but I think with this design system in place it’s much easier to rework pages into a pattern users expect. Below are some pages that changed through this rework.

Some examples of what I achieved below.
Reworked Getting Started Page to be easier to use
Reworked Getting Started page to include videos and more user friendly sections
Reworked Design page to describe the page better
Reworked the design page to talk about software features, devices compatibility and how the subscription impacts the software
Reworked this page to clarify the page and make it more accessible.
Reformatted the page to be more accessible and easier to use

Ashley Hooper