Cutibox
Fully bespoke ecommerce UX design for organic skincare subscription box.
The Challenge
Cutibox wanted to make an impact with their website. Through my work as Creative Director for web agency MadeBySphere, I was commissioned to take the lead on UX design and branding for the startup. A mobile-first approach was taken during the design process, as we identified that Cutibox would receive most of their traffic from mobile devices.
The approach
The Approach
Visual appeal
People make decisions based on emotion.
We used a striking colour palette combined with illustrations to create a friendly, premium look and feel.
Headlines
People only read about a quarter of a page – our attention spans have diminished.
We created an attention grabbing headline that sets out Cutibox’s USPs in one sentence. The rest of the copy was broken up into digestable chunks to demonstrate value in only a quarter of the page.
Volutpat lacus laoreet non curabitur gravida arcu. Urna duis convallis convallis tellus id interdum velit. Enim nunc faucibus a pellentesque. Pretium lectus quam id leo in vitae. Sed euismod nisi porta lorem mollis aliquam. Interdum varius sit amet mattis. Tincidunt augue interdum velit euismod in pellentesque massa placerat duis. Tristique sollicitudin nibh sit amet. Faucibus pulvinar elementum integer enim neque volutpat. Aliquam vestibulum morbi blandit cursus risus. Cras ornare arcu dui vivamus arcu. Elit sed vulputate mi sit amet. Ut sem viverra aliquet eget. Dolor sed viverra ipsum nunc aliquet bibendum enim. Pharetra massa massa ultricies mi quis hendrerit dolor. Bibendum ut tristique et egestas quis ipsum suspendisse. Metus vulputate eu scelerisque felis. Elementum pulvinar etiam non quam lacus suspendisse faucibus interdum posuere. Urna nec tincidunt praesent semper feugiat nibh sed pulvinar proin.
Habitant morbi tristique senectus et netus et. Turpis cursus in hac habitasse platea. Volutpat maecenas volutpat blandit aliquam etiam erat velit. Dolor sit amet consectetur adipiscing elit duis tristique. Lobortis scelerisque fermentum dui faucibus in ornare quam viverra. Nibh nisl condimentum id venenatis a condimentum vitae. Nascetur ridiculus mus mauris vitae ultricies. Id semper risus in hendrerit gravida. Pellentesque habitant morbi tristique senectus et netus et malesuada fames. Massa ultricies mi quis hendrerit dolor magna eget. Turpis egestas integer eget aliquet. Vitae auctor eu augue ut lectus arcu.
Mauris pharetra et ultrices neque. Lorem ipsum dolor sit amet consectetur adipiscing elit. Sed nisi lacus sed viverra. Metus vulputate eu scelerisque felis imperdiet proin fermentum. Sagittis nisl rhoncus mattis rhoncus urna neque viverra. Pharetra massa massa ultricies mi quis hendrerit dolor magna. Fames ac turpis egestas maecenas pharetra convallis posuere morbi. Tortor at risus viverra adipiscing at. Sit amet commodo nulla facilisi nullam. Morbi tempus iaculis urna id. Purus faucibus ornare suspendisse sed nisi. Rhoncus est pellentesque elit ullamcorper dignissim. Sem et tortor consequat id porta nibh venenatis cras. Tempus urna et pharetra pharetra massa massa ultricies mi quis. Faucibus in ornare quam viverra orci sagittis eu.
The Process
Visual appeal
People make decisions based on emotion.
I used a striking colour palette combined with illustrations to create a friendly, premium look and feel.
Headlines
People only read about a quarter of a page – our attention spans have diminished.
Myself and the MadeBySphere team created an attention grabbing headline that sets out Cutibox’s USPs in one sentence. The rest of the copy was broken up into digestible chunks to demonstrate value in only a quarter of the page.
Testing
Making sure the user flows in ecommerce websites are streamlined and easy to navigate is vital. A clunky flow with too much friction will considerably affect sales.
I conducted user testing sessions on Cutibox's website to ensure any unnecessary friction or errors were pinpointed and resolved.
Personalised interactive dashboard
I joined Mirza after their pre-seed funding round. They had a prototype product that had been built by an agency, and it was clear from the data that there was a problem with retention. This was also discovered in the analytics – our users logged in once, then never returned to the product again. A further pain point was the “one-size-fits-all” approach, with a lack of customisation according to a person’s stage in the journey to parenthood.
Our solution was to create to this was creating an personalised dashboard, which would act as the hub for financial planning for parenthood. Based on the information given during onboarding (what family stage a user was at), users were offered custom content specific to that user persona. The core features would remain the same for all user types.
Gamified plan creator
Our algorithm calculates the parenthood penalty and other costs associated with parenthood. As inputs the product team were required to collect a lot of information from our users. How do we do this without inducing cognitive load, and inevitably increasing drop-off? The outcome was a gamified process of entering in data in a step-by step wizard, while the bar graph updated live. The gamified approach improved completion rate, while the bar graph was proven to offer users positive feedback during data entry.
Educational content
The world of financial planning for parenthood can be overwhelming. Not everyone is already equipped with the knowledge of tax credits, parent-targeted investment vehicles, fertility treatment, and school selection. The answer to our users’ feelings of confusion were education cards. In each section of the flow, we implemented these cards to offer unbiased content. This helps users make informed choices that are right for their personal situation.
User personas at the heart of decision making
There were a vast number of different parent user types we identified during user interviews and research. As the core features of the product relied heavily on the product team to deeply understand each user’s motivations and needs, we spent a considerable amount of time running interviews and testing sessions, while constantly iterating on our core user personas.
Although it was important for us to consider these different user types, during the build of our beta product we identified early adopters as working women and men who are actively planning for parenthood. These were the target of the first version of our product, and from there we expanded our reach to wider subgroups.
Wireframe prototyping and testing
At all points in the product process, I ensured that my team championed fast prototyping to validate ideas and new concepts. We created pools of user testers who we frequently tested with, making sure that recurring issues or feedback were iterated on before handing over to build.
High fidelity design (and more testing!)
Once we had our wireframe prototypes validated through user testing, we then expanded on the designs to make them high fidelity in compliance with our design system. Once this process was complete, in some cases we then conducted further user testing. This was to ensure the core function of the feature was not lost when branding and colours were applied.
Creating a Mirza design system
As part of a wider project to improve efficiency in my team, I oversaw the creation of a full design system for Mirza. This went hand-in-hand with a full brand redesign including logo and colour palette. This design system was created ahead of the expansion of the product team began, which would require a source of truth for styling and re-useable components. The system ensured that the design would remain consistent as the company scaled.
Discovery process
When I first joined Hollabox, the current live app was underperforming. There was a serious lack of retention amongst the existing users, and many of the user journeys seemed to be unintuitive.
In order to identify the pain points with the current product, and to also get to know the Hollabox userbase, my UX team and I set out on a discovery phase. This discovery process included conducing user interviews, creating user personas, drafting/editing user stories, creating customer journey maps, and reimagining the sitemap and information architecture.
Wireframe prototyping and testing
Once my UX team and I had completed our discovery phase, we then started to prioritise what action to take first.
We used our new-and-improved personas and customer journey maps to draft up user stories for the new features.
Video player redesign
The previous Hollabox video player was a recurring point of friction during our user testing. The previous player design had no progress bar, so users had no concept of where they were in the flow of content. The videos were also cropped in order to fit in information, which meant many of the video content and captions were being missed.
To resolve these issues, we added a progress bar at the top of the screen, intentionally using a similar design to Instagram in order to ensure intuitive and familiar feeling amongst our users. We also increased the size of the video section, making sure that the filmed content was the focus of the interactions.
Swipe up to view venue information
To view venue information and access CTAs – get directions, book and share – users would previously have to click to open a model over the video content. This interrupted the natural flow of video, and produced friction to accessing the CTAs.
The reimagining of how to view venue information resulted in a swiping function to reveal venue details, in a similar way that users use Google Maps. This meant that users could access CTAs without stopping their stream of video, and made the experience of viewing venue information less clunky.
Save to collection feature
Another pain point we discovered during our testing was that users would find venues in our product, but then have no idea to access them again when they next logged in. To combat this, we prototyped then implemented a 'save to collection' feature, which allowed users to save venues within their own collections.
Venue tag system
In the world of user-generated content, it's common to get users to help you in organising and categorising the content before they post. This is something that didn't exist within the upload process, and the addition of tags was being implemented manually by a team member.
To address this, we automated tags by adding a step to the upload function that allowed users to search for and add new tags related to each venue. These tags were then reviewed periodically by a team member, which massively reduced their time spent on the task.
.jpg)