Client
Fearless
Skills
UI/UX Design
IxD Design
Research
Branding
Deliverables
Style Tiles
Mockups
Prototype
Design System
Tools
Figma
Illustrator
Photoshop
After Effects
Overview
Who is Fearless?
Fearless is a women-owned business directory and coworking event space designed to assist and support women in Winston-Salem, NC.
Fearless’s CEO and Founder, Jen, described Fearless as a space for women to uplift one another and feel empowered to be who they are, a community project, not a money-maker, and an event and coworking space in one spot.
My Role
I worked on a team collaborating with 4 other UI designers to research, test, and present our design solutions to Jen. We analyzed findings from user testing and gathered insights to individually design separate concepts and design systems.
We were tasked to apply UI treatments to existing wireframes for the Homepage, Directory, and Business Listing pages on a responsive website.
Defining the Challenge
Help Socially-Conscious Users
Effectively Support Local Businesses
The current website is very ambiguous and is not easy to use because there’s no immediate mention when entering the site that tells what Fearless is or does. As a result of the ambiguity, users prefer to use the Facebook group to easily connect with local women-owned businesses and sign up for events or classes.
Our challenge was to take wireframes provided by a previous UX team Jen worked with to design the new interface in a way that shows users the capabilities of Fearless, but most importantly to highlight the Directory as an important feature through the homepage to make supporting local businesses easy and accessible.
Evaluating the Space
Where Fearless Stands
Through conducting domain research, we were able to identify the two industries Fearless resides within, women-focused coworking spaces and online business directories. By having an affordable membership and charging local businesses nothing to enlist on its site, Fearless stands out from any competition in an unsaturated market.
Standing Out
We analyzed competitors of Fearless to determine a visual style direction that could grow and scale with the brand. This was necessary to determine how the brand should change to meet the needs of their existing and future base.
PWWS, Women Owned, and WSBCC are easy to read and navigate. WSBCC has an effective look and feel that is both classic and modern with calming, unobtrusive colors. PWWS and NWBD were not consistent from screen to screen because of the organization of information on their sites. Hustle is not visually effective with cluttered information, playful typography that doesn’t match the tone of the brand, and image choices.
Many competitors had outdated platforms that didn’t feel modern and easy to use. Some had a clean aesthetic but still lacked the inclusiveness and ease of use that a product like this should entail. There were clear opportunities to focus on the use of hierarchy and layout that would allow Fearless to stand out and implement colors that would feel inclusive to all women.
Sticking to a Pact
We combined our domain research, style inspiration, and client insights to create design principles that we can keep in mind while designing our concepts.
Empathetic
Fearless focuses on consulting with others and asking for their perspectives as part of our decision-making process.
Inclusive
Fearless supports all users through color, font, legibility, photography, and accessibility choices.
Supportive
Fearless shows a culture that raises each other up and promotes each other in the process through design.
Vibrant
Fearless is fun, bold, and inspiring. We strive to reflect this sense of being in our designs.
Conceptualizing Visual Directions
To conceptualize I focused on three ways we could utilize a visual style to make the website desirable and give Fearless a brand with an appropriate tone of voice.
Soothing This direction emulates the happy, free energy the client mentioned Fearless members embody. The photography and calm, neutral colors are used to set this tone.
Empowering This visual direction is loud and inspiring. By utilizing a vibrant, blue color scheme and an image of what appears to be a hardworking and proud woman who looks and feels like she’s on top of the world, I wanted users to notice the theme of inclusivity and to feel empowered themselves.
Vibrant In this direction, I enhanced existing elements on the current website by maintaining the same colorful vibrance, but making sure colors like orange are gender-neutral and are used to draw users’ attention.
My vibrant direction was a natural favorite. The colors and the feel of the concept immediately resonated with the tone that has already been set on the Fearless website. Jen enjoyed the use of bold colors that made a statement as well as the use of photography that felt like they were the kind of women that would be a part of Fearless.
Improving the User Experience
Redesigning the Fearless Homepage, with the original (left) and my first iteration (right).
1. To minimize the ambiguity of the website, I introduced the Fearless logo and photography that spans the entire width of the hero module so that both elements speak to the brand. 2. I improved the search field by removing the “enter location” field which seemed redundant due to the fact that all business in the directory were only in Winston-Salem. 3. I also removed the “Follow us” verbiage near the social media links to keep this section minimal as the logos are understandable on their own.
Redesigning the Fearless Directory, with the original (left) and my first iteration (right).
1. As per Jen’s desires, I redesigned the logo to portray a more empowering feeling of what it means to be Fearless. 2. I altered the main category list to enhance the structure and layout that wouldn’t be obtrusive to the eye. 3. I moved the “filter” button to the right side of the screen to maintain its relation to the “sort by” button. 4. I increased the whitespace in the footer. 5. Lastly, I reformatted the pagination to bring a cleaner, modern look to the page.
Redesigning a Business Listing, with the original (left) and my first iteration (right).
1. To make this screen more dynamic and appealing to users, I included a banner image in the header.
Building, Testing, and Iterating
Testing Fearless Users
We conducted two rounds of desirability and usability testing with users who have similar characteristics to our Personas to validate if our solutions work well. We built prototypes on Figma, engaging with a total of 6 users for each test.
We asked testers to:
Search the business directory for Bath and Body products using the search field on the homepage.
Filter business listings to show Fearless Friends.
Learn what Fearless Friends means by clicking the tooltip.
View Honeysuckle Soaps business page.
Share the business page by copying a URL.
User Insights
Home Screen
Positive
1. The top and footer navigation is clear.
2. The photos for the Social Space and Events & Classes work in a way that they don’t feel cluttered.
Actionable
1. Photos of real Fearless women would work better than stock photos.
2. The search field should live above the fold to be easily accessible when users first visit the site.
Business Directory Screen
Positive
1. The size of the business cards were appealing, as well as their grey color allowing them to pop over the white background.
2. The info icon was initially confusing because it didn’t stand out. However, the hover interaction was eye-drawing and prompted users to click to enable the tooltip.
3. The badge icons felt fun.
Business Listing Screen
Positive
1. It was a delight to see the header image at the top of the screen..
Actionable
1. Users were torn that they would have to scroll to get more information on the business page.
2. Having the Fearless lightning bolt next to the business name is redundant if there is also a badge.
Colors
Various users responded well to various shades of blue and agreed that small accents of pink go a long way.
Visuals
Even though the current website doesn’t have any photography, users realized they prefer the use of photography that is reminiscent of the Fearless brand.
Tooltip
A common theme across all tested designs was the clarity of the information tooltip. The tooltip needed to be positioned in a way that it related to the Fearless Friend Badge.
To Sum Up
Users really favored my typography choices as well as color choices, blue and pink, because they were expected of Fearless. Having photography across the site made it feel engaging. The overall design felt clean and professional, it was easy to use, and had personality. This success allowed me to realize how I kept the users’ needs in mind while designing. Moving forward, I wanted to maintain this level of understanding to deliver the product the users and the client needed.
“I love what has happened with the logo.”
“Not usually a pink fan, but having a little of it works.”
“I think the consistency of the overall site is maintained, goes together really well and nothing jumps out at you.”
Design Solution
I sought to refine the website to ensure clarity, functionality, and desirability across the site.
Final Insights
Home Screen
Positive
1. The cut out angle on the header banner gave the feel a bit of an edge.
2. The font stands out in the word Fearless.
Actionable
1. To some users, the super bold orange felt inconsistent, while other users said they didn’t mind not seeing it on other screens across the site.
2. Users prefer the header image to contain one Fearless person rather than of a group of people that doesn’t feel engaging.
3. A user felt that white text over images was difficult to read.
Business Directory Screen
Positive
1. The hot pink color drew users’ eyes to hierarchical text and icons.
Actionable
1. Users want the tooltip icon to be darker to increase legibility.
To Sum Up
Overall, this iteration was bright, bold, fun and had very strong visuals. Drop shadows across the site felt clean and modern. The color combinations worked well for the most part. Users felt like a lot was going on, but in a good way.
Introducing the Responsive Site
From all of the data we were able to gather from user test results, we were able to create mobile responsive solutions. Users felt these screens transferred well between desktop and mobile.
The Impact
While researching the existing Fearless website, we defined the brand as bold, vibrant, friendly, and exciting. Through this process we were able to evolve a new look that would maintain those values, yet leverage a competitive niche in the market through clear and easy to use platform.
Next Steps
Because of the short time frame, the team was not able to test the current functionality or design other important pages on the Fearless website, such as the About, Become a Member, Events, and Contact pages. Further UX testing is recommended to determine the success of these pages. Users expressed that they prefer to use the Facebook group page to search events instead of on the current website because the listings are not as intuitive; caused by a near endless scroll and lack of an access point to register or sign up for events.
With more time, I would have liked to reiterate on the mobile version of this concept to further improve its quality that would fit best for the users and Jen. We were able to gather feedback in the second round of user testing, but with another round of iterations, I could apply user feedback to be able to deliver a flawless solution for Jen.
What I Learned
Taking Over Research
This project challenged me to become an expert and advisor to my client and a leader for my team. Throughout the process, I was able to re-enforce my skills in research, which allowed me to dig deeper into truly understanding where our client stood in the market. By really grasping the research, the concepts I created successfully resonated with the users and felt Fearless.
Users Always Know What They Want
The feeling of Fearless was actually an interesting thing to discover. Jen gave the team and I absolute creative freedom at the beginning of this project, but through testing, we found out that her users collectively already had an idea of what to be and look Fearless was. Jen was surprised to know this and was excited by the results.
All in all, working on this project was a powerful learning experience. My love for design and people allowed me to dive into the unknown and enjoy both my successes and failures. I’m now confident that I can jump into any project and use research to implement design and product strategy.
Other Work
Trial for Clinical Equality // UI Case Study
ThirdSpace // UI Case Study
FitLife // UI Case Study
Fearless // UI Case Study