Tough Titties

Empowering those affected by breast cancer
UX Design Case Study - 5 Minute Read
Timeline

April 16-24 (One Week)

Project Type

Hackathon & Client

Team

4 Members

Role

Project Lead, UX Designer

Tough Titties is an empowering feminist brand that raises breast cancer awareness and celebrates strength and inclusivity with a touch of humour

Jump to Solution

Project Summary

Collaborate, Learn, and Create

Eunoia UX Design Hackathon was an event hosted by SFU SIAT students. The event focused on teaching UX industry standard practices, providing mentorship from industry experts, and bringing diverse and passionate participants to work and collaborate with real clients to create innovative and engaging user experience solutions.

👉 View Hackathon Brief

Design Challenge

Help One, Help All

The theme of the Hackathon challenge was "Help One, Help All." Inspired and driven to deliver a user-centered approach, our task was to design an engaging and effective solution for a client. I was assigned to work on redesigning the website for Tough Titties, a product line by local artist Emma Hands in the Vancouver lower mainland area.

👉 View Client Brief
Tough Titties Website

Design Process

Exploring the Problem Space

Prior to the hackathon, participants had the opportunity to interview their clients to further understand their goals and constraints.

As the primary interviewer on my team, these were the metrics and insights discovered during the interview.

Gaining insights: My interview with Emma
Interview Questions
•  Can you tell us a little bit of any other information about Tough Titties that wasn’t in the brochure?
 What is the main purpose/goal of your brand that you want to convey to your customers?
•  Can you tell me about your current website and its features? What do you like/dislike about it?
•  What’s your number 1 priority when it comes to rebranding and what do you want to achieve or expect?

Top devices by usage

Top sources by revenue

Based on these data provided, I learned about the users' top-preferred devices for accessing the website, as well as the most popular channel and platform contributing to the highest revenue.

Identified Pain Points
Time and resources constraint

As a busy mother of two and managing a business, it’s difficult to juggle two full-time jobs! The challenges of refining a brand strategy, developing products, and improving sales growth all while taking care of her children proves to be quite challenging.

Building an authentic brand identity

Our client emphasized the importance of improving Tough Titties online visibility by building upon the brand. She aspires to build personal and genuine connections with her customers, and to cultivate an empowering and people-centric brand.

Differentiating Tough Titties from Emma

Our client wanted to distinctly separate Tough Titties and her name to exclusively showcase the brand and its products on a standalone e-commerce platform. Currently, Tough Titties products are sold on a website hosted under the client's freelance website.

Problem Identification

How might we enhance the client's brand identity by seamlessly integrating inclusivity and cultivating a sense of community, all while optimizing the user interface to elevate both online sales and user engagement?

Research

Exploring and Understanding the Brand and its Target Users
Key questions pondered:
🌟 How can we effectively build a stronger brand identity for the client while prioritizing inclusivity and diversity?
🌟 How can we ensure that the underrepresented groups at risk for breast cancer are recognized and addressed?
🌟 How can we build a meaningful connection with the target audience of our clients' brands?
👉 View Primary Research
Gaining insights from users
We conducted a brand perception survey to understand users' experiences when exploring a brand. Our aim was to understand how well they connect with the branding and identify specific factors and interests that drive them to make a purchase. We received feedback from 20 individuals.

Based on the survey, it was discovered..
75%
of users value authenticity
from the brand, especially
through its style and design.
50%
of users desire for consistent
content to stay connected with brands.
30%
of users seek validated
information about products
before purchasing items.
Heuristic Evaluation
In addition to the survey, a heuristic evaluation was conducted to identify opportunities for improving the current interface. The goal was to minimize users' mental cognitive load and eliminate inconsistencies across the interface.
Competitive Analysis
A competitive analysis was conducted to examine solutions currently in the market, and identify any potential opportunities for improvement. Here are some of the findings. 
Understanding our users through a journey flow
To better understand how might a user interact with our proposed solution, a user journey map was created. The team focused on understanding the diverse interactions and experiences a user could encounter during a shopping experience. 

Goals

Position Tough Titties as a Standalone Brand that Resonates with the Breast Cancer Community
Based on the research and interview session with Emma, an ideation session was facilitated to determine our goals. These goals include:
01. Redesign the user interface
Create a user-friendly and visually appealing interface that enhances user experience and engagement.
02. Enhance brand visibility
Implement strategies to increase brand awareness and authenticity to with the target audience.
03. Drive traffic to increase sales
Attract more visitors to the brand, ultimately leading to higher sales and conversions.
We want the new branding to resonate and foster a community that truly cares about promoting breast cancer awareness.

Ideation

Jumping through Hoops to find a Solution
Various iterations was done to find a solution that was most suitable for our client. Based on our research findings, we wanted a gender neutral logo to symbolize inclusivity. We started off with sketches
to finalizing various logos to present to our client.
Original Logo
Ideated Logos
Creating wireframes
Considering that a significant number of Tough Titties users accessed the interface on their mobile phones, my team adopted a mobile-first approach in designing the brand's new look.

I sketched rough drafts for both the mobile and desktop website designs to kickstart the wireframing process. New additions to the design include a search bar, shopping cart, and buttons to guide users.

Testing and refining

Check-in Meeting with Client
During the hackathon, we had the opportunity to meet with our client for a mid check-in about our solution and progress. We pitched in our findings, opportunities and directions for the new branding. During this check-in, we received a lot of great feedback from our client. She was pleased with the amount of effort and thoughtful research we had put into finding a solution for Tough Titties.
However, my team and I faced a constraint..
Our client wasn't exactly fond of the suggested direction of the new brand name and logo because..

❌  A considerable amount of time and effort had already been spent establishing the current brand


❌  A new name and logo wasn't practical, given that the majority of our existing customers already identify and recognize the current brand.
It was back to the drawing board
Mentor Feedback Session
We had a Product Designer mentor who guided us throughout the duration of the hackathon. We took this opportunity to provide the feedback given from our client, present our pitch, and medium high fidelity prototype. Here are the main takeaways during our feedback session.
Optimizing the user flow and UI 🔎
Our mentor suggested focusing on improving the clarity of the UI and refining the navigation process. Further suggestions include:

💡 Removing non-essential features

💡 Incorporating established e-commerce design patterns
Finding balance in both client and user needs ⚖️
We shared that the client wasn't particularly enthusiastic about the direction of the new naming and logo. Our mentor provided valuable insights that offered us a clearer perspective. My team decided to scrap all our logo ideations and opt to use Tough Titties original logo in our final design.

Visual Design

Style Guide
In a collaborative team of four, we developed a style guide to maintain consistency in our work and design flow. We took the colours in the client's existing brand guide for our style guide, and opted for a versatile and accessible sans-serif typefaces for readability.

Solution Highlights

A User-friendly Design with a Clear Brand Identity, and Intuitive Shopping Experience for Users

My team amplified and redesigned Tough Titties. The proposed design is a user-friendly, inclusive, and adaptive interface on all devices that shows the brand and its products concisely.

Prototype of Tough Titties Homepage
Optimizing the user journey
With a more user-friendly interface and optimized user flow, this will reduce cognitive load and improve the overall user experience.
Streamlined experience
With a more seamless checkout process, users can effortlessly start and complete their purchases. Elements include buttons and icons optimized for assistive technologies.
Prototype of Tough Titties Homepage
Building community and trust
With more inclusive-focused catch copies, clear brand story, and user feedback, these significant changes will foster a sense of community and trust.

Results

High Fidelity Prototype
Our finalized design based on numerous iterations and feedback.

Impact

Impacts Made for the Business
Improved user interface & experience 🚀
Inclusive branding approach 🤝
A new and improved UI design that is cohesive, clean, allowing users to seamlessly navigate the website.
This improvement aims to elevate the overall user
experience and increase in online sales.
An all-inclusive branding approach that will form a meaningful connection with all individuals affected by breast cancer, regardless of gender or sexual orientation.

Reflections

Personal Key Learnings
You are not the user and you are also not the client
Learning to maintain a balance between the client and user needs was an eye-opening experience for me. I had the best intentions but my biases and assumptions from the research took over as I assumed the client would like the branding. I was wrong. This led to retracing back to understanding the client’s brand identity, values, and goals from beginning, and maintaining those values throughout the process. This served as an important reminder of respecting and preserving a client’s brand identity.
Mentorship and mentee relationship
Seeking out for help and feedback is crucial. It can be overwhelming when developing solutions, especially as junior UX designers working together. The endless ideation and solutions led my team in a rut as we were all expressing different opinions and suggestions for our project. However, having a senior UX designer guiding us throughout the hackathon kept my team in check, and helped narrow down our scope of work, and allowed us to pinpoint the direction we wanted to go with in our project. This widened my perspective and kept me from over-focusing on unnecessary details, and gave me the confidence to seek out feedback to any future mentors for any guidance I needed.