Fearless Desktop Redesign (Scrollable)
Eric Saber
Product Designer
Fearless
Expanding the visibility of women-owned businesses in Winston Salem, North Carolina.
About the Project
Role: UI Designer
Overview: Redesign the Fearless web experience
Deliverables: Style Explorations, Website Design Mockups, Prototype, UI Kit, Design System
Tools: Sketch, Figma, Google Workspace, Miro
Project length: One month
18
Interviews
12
Usability Tests
3
Iterations
27
Screens Designed
Walkthrough Video
Desktop Prototype
The Challenge
It starts with a question
How can we make it easy and fun for residents of Winston Salem to connect, support, and empower local, underrepresented groups?
Over the course of one month, I (along with a team of 4 other designers) set out to solve this challenge through a visual overhaul of Fearless’ website.
First things first: what is Fearless?
Fearless is a female collective based in the Triad region of North Carolina. As a Fearless member you can:
Work from their physical co-working space
Attend specialized events or classes
Support local women-owned businesses through their business directory
While Fearless has a variety of offerings, our core focus was addressing the local women-owned business directory. In early iterations of the website, this directory was buried among other site features and not easy to find. The client worked with a UX team to rethink the general structure of the directory and how it might be improved. After the UX team wrapped up their end of the project, it was time to apply a UI treatment to the site to re-establish the brand.
That’s where we came in.
Fearless' original site and business directory. The directory was buried in the hamburger menu navigation.
The Approach
UX Desktop Wireframe Concept
Kicking things off
We began the design process by taking a deep dive into the materials handed off to us by the UX team. This included their research, synthesis, and mid-fidelity wireframes outlining the structure of the directory, the categorization schema, and search tag taxonomy.
The UX research indicated that the target user base was fairly broad: pretty much any adult that might want to shop at and support women-owned businesses.
During the initial kickoff meeting with Fearless founder, Jen, we learned a little more about Fearless and how it differed from competitors.
What did we learn? The Winston-Salem area was full of innovative women and nonbinary entrepreneurs but there are also deep pockets of racism and discrimination that make it difficult for creators to thrive. The Fearless organization was specifically borne out of necessity to help women who were looking to uplift other women and help foster an environment that would lead to success.
A sample of the local competition evaluated
Evaluating competitors
Post-kickoff, we conducted our own domain research and analyzed the competitive landscape from a visual perspective. Our research identified that Fearless lives in the middle of a Venn diagram of two industries: women-focused coworking spaces and professional networking communities (such as The Wing and Rise) and online business directories (such as Yelp or Google’s Business Listings). What makes Fearless stand out is its affordability and its accessible online directory.
After looking at the Fearless’ domain at a high level, we drilled down deeper to investigate how the company compared to other more locally focused organizations with similar missions. We identified direct and indirect competitors in the Triad region, and then performed a visual competitive analysis to better understand how we could help Fearless to stand out and distinguish itself.
The following strengths, weaknesses, and opportunities were identified in our analysis:
Strengths
Most competitors’ sites had relatively simple and clean layouts.
Weaknesses
A majority of the main competitors use pink as a primary color, which felt overly traditional and stereotypical for a modern organization hoping to attract young women and nonbinary members of the community. Navigation and hierarchy were often difficult to understand at a glance and many of the sites looked unfinished.
Opportunities
Hierarchy and layout could be better utilized. There is also room for improvement with more legible typography, and an opportunity to implement more inclusive colors.
Design Principles
We used these discoveries, along with our general understanding of Fearless’ mission, to help us establish the following design principles as a foundational guide for our initial style explorations:
Inclusive
Fearless is a welcoming space that supports its members. This should translate to its digital presence when choosing colors, typography and imagery. Accessibility and legibility are high priorities.
Supportive
Our designs should communicate a culture in which members of the Fearless community feel comfortable promoting growth and support of one another in professional or personal capacities.
Vibrant
Fearless is fun, bold, and inspiring. We strive to reflect this with our designs. Vibrancy isn't only about being loud or colorful. It’s about a particular kind of energy that the community exudes.
Empathetic
Empathy is always important in design, but this particular community really lives and breathes empathy. We must design with an open mind to make sure that all users and community members are heard.
The Concepts
Time to Design
With our initial research complete, each designer got to work on designing three different style explorations in the form of style tiles. My approach to my concepts was to lean into the community aspects of Fearless: learning together, having fun, and spending time with one another in the physical space.
Concept A - Vintage Learning
Based on Fearless’s unique location in the marketplace, with their combination of co-working and learning, this style was inspired by the Viewmaster: a playful learning device that can transport you to any world you want to learn about.
Concept B - Retro Arcade
This style tile was inspired by the fun and collaborative spirit of an old arcade. The colors were intended to evoke the playful nature of Fearless’ current vibrant palette, but taken in a slightly more retro direction.
Concept C - Material Growth
This exploration aimed to capture the feeling of entering the Fearless space, which is full of plants and a calm atmosphere. The softer green and dark blue colors were chosen to give users a feeling of having entered a welcoming, inviting environment.
User testing
Each style tile was presented and tested with six users to determine the preferred direction, and to make sure that the direction aligned with Fearless’ goals. A mix of quantitative and qualitative methods were used during these interviews, in which we spoke with Fearless members, as well as key stakeholders and subject matter experts. Jen provided us with a list of community members willing to give feedback and we took it from there.
Key takeaways
Overall these style tiles were met with mixed feedback. Users far and away favored my "Concept C - Material Growth” style tile, citing it as welcoming, relaxing, and friendly looking, while they felt that the other two were too far removed from what Fearless represents. Still, "Concept C" wasn’t going far enough.
I was at a crossroads.
The Evolution
Fearless Entrance Door (Source)
Discovering a new path
Our second meeting with the client included a virtual video tour of the Fearless physical space and I knew then that I needed to pivot my design direction. While my selected style tile was inspired by (and partially evoked) the Fearless space, it didn’t capture what Fearless represented. The space itself was much brighter and more vibrant than I had thought, just like the community it served.
I perused Fearless’ Instagram page, remembering that Jen had briefly mentioned in our kickoff meeting how much the entrance door to the Fearless space meant to its members. The bold blue door was a hotspot for Fearless community members to gather for selfies.
Eureka!
This doorway represented so much: community, entrance to a safe space, and an “anything is possible” attitude. The blue color was also quite vibrant, but neutral enough to appeal to all community members.
Homepage Version 1.0
High Fidelity Version 1.0
As I pivoted my design direction, I decided to implement this “Fearless Blue” color as the primary color of the site. It would be used within the persistent top navigation, as well as in large headers where appropriate. I utilized the same white lightning bolt from the door in the navigation as well. I injected a little bit more color via the gradient contained within the search area, but my main goal was to give the site a clean look and feel. The original wireframes were very minimal and clean, so I mostly stuck to the wireframe’s layout here, without challenging it too much.
Methodology
While the testing of style tiles was much more focused on the feeling and emotion of a particular visual direction, our high fidelity prototype tests focused on a series of scenarios/tasks for the user to rate in terms of the ease or difficulty of each task on a binary scale (i.e. “this is good” or “this needs work”). This was found to be an effective and impactful method to allow for clear iteration on future designs and also further tested the UX previously researched. Ethnography was also used for the tests -- specifically passive observation was utilized to see what users would do instead of just taking their word for it.
Participants were also instructed to “think aloud” and share their thoughts throughout the test. After every design was presented, participants went through a debrief to ascertain general visual desirability feedback and to gather their overall thoughts on the experience and visual presentation.
Testing results
I learned in our testing that my decision to pivot on the aesthetic was a good call and I was on the right track with my new design direction. Post-testing, our affinity mapping exercises showed that users recognized the use of the door as inspiration and most users found the overall color scheme to be visually pleasing, clean, and modern. The use of photos of real people in the Fearless space also was well-received, with one user noting that the design felt "inclusive and supportive," a key aspect of the Fearless brand.
High Fidelity Version 2.0
Although I felt I was on the right track with the first version of my high fidelity design, I received some internal feedback that the design could use some work in utilizing space and color more effectively and cohesively. Users responded positively to the new design direction, but there was a sense that I wasn't quite capturing the energy and emotion of the brand as much as I had hoped. I also personally felt that there was something a bit too stark and dry about my initial pass.
This was challenging. I needed to evolve the design for the desktop, but also design a mobile version, which was part of the ask in the initial brief, and what we as a team would be primarily testing this time around.
I decided that in order to inject some more of what it felt to be Fearless into the design, I was going to need to do two things:
Reduce the harshness of some of the white space
Find a new subtle and complementary color to Fearless Blue
Ultimately, I settled on a pink that wasn't too feminine but paired well with a newer, slightly brighter version of Fearless Blue. This complementary pink, when used sparingly, felt appropriate for the organization, but also balanced out the design with a certain energy that was previously missing.
Users wanted to the see the map higher on the business listing
Results
Users were enthusiastic about this new iteration and they rated it highly.
We used the same testing methodology as we did for the initial high fidelity version, but applied it to the mobile design. Color combinations were well-received with the majority of users specifically saying the colors were pleasing and blended together very well. The homepage was perceived as bold, welcoming, and fun.
We also tested how users felt about the consistency of the design going from mobile to desktop and vice versa. When translating this new mobile version back to the desktop version, I took feedback from the first round of testing to not only give the design a new coat, but also to improve the usability of the site when appropriate.
One example of this was shifting the map object on the business listing page to be above the fold. This was suggested by users in testing so they wouldn't have to scroll to find the relevant location of the business.
Most users found the overall evolution of the design to be easy-to-use, with all users noting that the design felt consistent across desktop and mobile.
Wrapping up
I learned a lot through this design process for Fearless. Above all, I learned that understanding where the brand is, where its users are, and how those users feel is paramount. When evolving a brand, you must differentiate it from the competition, but also retain the brand’s unique voice.
I initially got a bit wrapped up in designing for an aesthetic that wasn’t quite matching the tone of the brand as it existed. Once I realized that I needed to meet the users where they already were, things clicked. I also learned that the constraint of keeping things bold and vibrant was ultimately freeing. You don’t have to reinvent the wheel if you already know what users love.
Future Recommendations
After we tested our design iterations, I created a design system for Fearless to use for future implementation of the site, as well as guidelines that can be followed when designing areas of the site that were outside the scope of this particular project. Our team also came up with a couple recommendations and next steps for the future:
Test UX modifications made from the initial round of testing to the second round
Create a library of high resolution images that could be used throughout the website to fully represent the Fearless tone since users loved real photography.
Overall, this was a challenging and exciting project, and it was particularly inspiring to create designs for an organization doing both interesting and important work with such a dynamic community.