Exploring the world one design at a time ✨
© 2023 Carmen law
Exploring the world one design at a time ✨
© 2023 Carmen law
Jessica Li, Sarah Pang, Amiko Tong
UX Designer, UI Designer, Prototyping
2023, 1 week
Our submission to the Eunoia UX Hackathon competition centered on assisting the small business "Tough Titties" in fostering a stronger sense of community among individuals who resonate with the brand's core identity.
Our team was given an unclear and vague problem space when the competition started. We were offered the opportunity to interview Hands, Tough Titties’ owner, and uncover her primary concerns regarding her brand. From our conversations and observations, we identified 3 major pain points that were interesting to tackle as a group of UXers:
Vague distinction between Tough Titties itself and her own identity
Lack of bridging between physical and digital touchpoints
Weak connection and community with her target audience
With these 3 different issues in mind, we did more research to understand which option has the best opportunity for us to shine and complete within 1 week, which brings us to our first phase: user research.
After engaging in conversations with both previous and potential purchasers of Hands' products and conducting secondary research, we have uncovered evidence of a shared desire for a community among her customer base. Here are some key findings:
Around 50% of Hands’ customers send private thank you message to her after they received their products.
Over 20 Hands’ customers left reviews on Etsy about their female empowerment experiences and motivations.
Supporters of women empowerment find representation important for them; 3 out of 7 interviewees expressed that they felt relieved to know that different boob shapes are common when they saw Hands’ products.
Reviews from Hands' Etsy store EmmaHandsDesign
We classified Hands' major audiences into three main categories to expose some potential pain points.
With these insights in hand, we concentrated on designing a solution for "Issue 3: Weak connection and community" within her target audience.
How might we help customers who support women empowerment better connect with the business by building a sense of community in a space that has a desire of belonging and interactions?
In just one week, our team executed a comprehensive process, including user research interviews, wireframing, prototyping, rapid user testing, and iterative refinement. Once we solidified our scope, we swiftly moved to ideating possible solutions that are engaging, realistic, and budget friendly for small business owners like Hands.
Given the limited timeframe, we employed the S.C.A.M.P.E.R method, individually generating more than 20 ideas under time constraints. We then categorized these ideas into 11 thematic groups for a systematic review. We pruned out less viable concepts by assessing their feasibility and value, rating them based on user desirability, and their potential to address our "How Might We" challenge.
While some of the initial concepts, like mobile games, digital collaborative canvases, or puzzles, held great promise, they presented challenges related to budget and time constraints. Consequently, we decided to extract key elements from these ideas and integrate them into our final solution. Bearing these considerations in mind, we aimed for our solution to achieve the following:
a physical to digital bridge + a heart felt microsite that encourages female empowerment supporters to share their own and read other people’s stories
Building upon this selected direction, each team member engaged in individual ideation, giving us a range of concepts including online chatrooms, a message jar, a physical Tough Titties book, interactive stories, and titties personalization. Ultimately, we chose to focus our iterative efforts on titties personalization due to its strong feasibility and its potential to positively impact body image concerns.
Quick sketches of ideas such as Titty message jar, chat room with canvas, draw your own titty.
*If you want to see our refined final product after user testing, skip to Final Product!
Given our time limitations, we settled on our community-building solution centered around titties customization and story sharing. As a team, we reached a consensus regarding the key features and the general user flow to be incorporated into the prototype.
A quick wireframe sketch done by me to communicate with my teammates about my idea.
Being a developer myself, I made sure to consider the implementation complexity. Inspired by avatar maker Picrew, I proposed a "mix and match" concept that would be not only straightforward but also cost-effective for Hands to implement. Additionally, it would reduce the need for extensive moderation due to the inherent constraints it imposes on users. Our team was intrigued by this idea, so we moved on to refining the user flow and features for our product.
Taking inspiration from other strong ideas that we had during ideation phase, we combined the ideas and added features such as reacting with stickers to emphasize our goal: building a community.
As the Visual and Prototyping Lead, my responsibility was to ensure that the UI design aligned seamlessly with Hands' branding. Collaborating closely with my teammates, I crafted a linear prototype for the microsite. This prototype was then presented to a group of 9 participants for their feedback and insights.
The user testers were given the card (digitally) prompting them to visit the website.
This is the linear flow the interviewees were asked to perform. We had some minor bugs in the first prototype, but we recognized the importance of prioritizing user feedback over getting bogged down by small details.
We conducted a total of 9 user testing sessions, with each session spanning approximately 20 minutes in duration. Given the linear structure of the prototype, participants were provided with a predetermined set of tasks to complete, following a specific sequence within the Figma prototype. Following the successful completion of their assigned tasks, we conducted interviews that incorporated both survey and verbal questions.
With less than 2 days remaining, our team gathered and discussed the notes we've taken during the user testing session to form a to-do list. We grouped similar issues by pages of concerns and came up with the corresponding improvement.
Here are the three main issues that we overlooked and our corresponding solutions that led us to our final product:
Lack of call to action on the physical card
Rework the content, hierarchy, and body copy
Misleading, unclear icons and copywriting
Replace them with more intuitive icons and added tooltips for certain features
Purpose and instructions of the features are not properly explained
Provide context and introduce the interesting features on the onboarding page
Our final card design serves as a link between physical products and digital media. We enhanced the design to emphasize calls to action, and we streamlined the content to clearly convey the card's purpose.
Our final delivery demonstrating the core user flow.
Here are some highlights and small details that we've incorporated as a way to empathize with our users.
The onboarding page serves as an introduction, letting the users know what to expect of each features.
We've decided to include a progress bar to ease uncertainty from our users and let them know that it's only a 3 step process. We also added the code checking to display system status.
The "I don't feel represented button" is added so that people can express their concerns if they don't see an option that represent them.
We've included the option to opt out of customization, recognizing that some individuals may prefer not to participate for privacy reasons.
The stickers offer a straightforward means for users to express their support and affection without the need for extensive moderation. Additionally, the bottom bar provides a visual summary of the sticker ratio, allowing users to grasp the sentiments and mood conveyed within the post.
To keep the design language consistent and improve our prototyping efficiency, I created an UI system for different buttons of our prototype.
This shade of pink (#F3B2E5) is the current shade of pink Hands use. To compliment the pink without hindering visibility, we've decided to use black as the alternate colour. This combination is bold and powerful.
Us as a team are very happy with the product especially given only 1 week. Given the opportunity to work with 2 new teammates was eye opening and very exciting.
We’ve received many feedbacks that ultimately proves our product is a great solution to our problem statement, and will be a welcomed addition to the female empowerment community. Here are some comments from our testers:
“ It's good that you are able to add different shapes, since media shows a lot of the same boobs and makes people insecure, thinking boobs should look the same way.
“ I really like the concept, I never seen it before. It allows me to engage into female empowerment stuff that I enjoy, and give me a space to speak out. Reading others’ story will help let me know that I’m not alone, I’m not an outcast.
“ It’s meaningful, I’m also very interested in knowing how others in the community will support and react.
Hands have reached out to us personally and expressed that she loves the idea and would love to bring it to life when budget and time permits.😊💜