Fearless
Client name: Fearless
Role: UI Designer
Overview: Fearless needs an easy to navigate, fun, bold and professional website to engage their community so that the site can enhance Fearlesses mission.
Deliverables: Style Tiles, Hi Fidelity Screens, Prototypes
Tools: Figma, InVision, After Effects, Google Docs, Pen and Paper
Project Length: 4 Weeks
Learning what it means to be Fearless:
We first met with our client, Jen Brown, to get a better sense of what the Fearless brand is all about. She explained to us that the Fearless community was created to build a safe space for women in Winston-Salem. The city, a hotbed for racism, was seen as a challenge for Jen to build a beacon of positivity. A challenge she unflinchingly went after. Using her experience living in Brooklyn for 10 years, Jen brought those sensibilities to Winston-Salem. Fearless has become a community for women and women owned businesses to thrive and support each other.
How does this translate visually? The Fearless physical space is filled with bright, bold colors, highly organized bookshelves, a floor covered in glitter, and plants to balance everything out. Learning more about the community event space helped guide the initial concepts.
Listening to the Fearless community:
We began our research by speaking to the self-identifying women of Fearless. This included those who attended and hosted events there. Beside wanting to feel welcome, our target users expressed the following desires, needs, and goals:
Want to see real people representative of who they are in the actual co-working space.
Want the site to be gender-neutral.
The website should represent the acceptance of all people.
The site should be fun with bold and vibrant colors, while still finding a balance of professionalism.
We took these comments to heart as the iteration process of the designs continued.
“It doesn't feel very personal. I feel like the idea of Fearless and the Directory is trying to connect women in a local space and this feels like the opposite. It feels generic to me.” - Librarian
Where does Fearless fit in the co-working space and business directory landscapes?:
Initially we were focused on looking only at other coworking spaces, because we rushed into the research too fast. It didn’t cross our minds that Fearless covers multiple business domains. Going back and doing a second round of exploratory research helped us uncover ways we can improve the directory experience as well. Here’s what we found:
Coworking Spaces:
The larger players in the women-only coworking spaces, such as The Wing, and Hera Hub, carried membership fees that were not socioeconomically inclusive.
Coworking spaces that focus on community generate a more loyal customer base.
Safe spaces for women and minorities in Winston Salem are greatly needed, as racism and discrimination continue to grow under the current sociopolitical climate via alt-right media.
Business Directories:
Allowing users to write reviews about the businesses to give transparency to others who are interested in shopping for women owned businesses.
More specific local search queries like, ‘women owned restaurants near me’, or ‘women owned salons near me’, help users find better results. Search engines that use a more broad approach tend to slow down the process.
Visually appealing user interfaces help online directories stand out. A majority of these directories use a text-based approach with minimal graphics or images.
Ideas to live by:
After we talked with Jen Brown and researched the domain, as a team, we brainstormed principles based on Fearless and it’s community. These design principles align with Fearless’s brand and helped us make sure we were asking the right questions.
Inclusive: Fearless is a safe welcoming space both physically and digitally for all people from all backgrounds and walks of life. We are open to all who choose to enter that space with the same welcoming and inviting energy. This is reflective in all of our design choices whether focusing on color, font legibility, image selection or accessibility. Being thoughtful and conscious of our actions is the only way to ensure that we are including all people in our designs.
Supportive: Fearless is a supportive community. You are not alone in this big world and there are always people that you can rely upon to be there for you. Through our designs, we show a culture that raises each other up while promoting ourselves in the process. Being supportive is an active cyclical action that creates ripples that continue long after. We are aware of how we affect others and through our designs, we actively work to support the community that helps to support us.
Vibrant: Fearless is fun, bold, and inspiring. We strive to reflect this sense of being with our designs. Vibrancy isn't only about being loud or colorful. It’s also about the energy we put forth to show how strong we all shine and how we can help others to feel their best vibrant selves as well.
Empathetic: A core tenet of design, empathy is especially important for Fearless. We want to constantly be cognizant of what it is like to walk in someone else’s shoes. What we think is best for one person may not be what is actually best for another. Understanding comes through awareness, consideration, and reflection of others’ needs and wants. Most importantly, we focus on consulting with others and asking for their perspectives as part of our decision-making process.
Exploring design with Fearless in mind:
With a solid understanding through research and a structure defined by design principles, we began creating divergent styles to test with the Fearless community.
Natural, Clean, Inclusive
Mood board
This mood board represented Jen’s preference for clean open design with an emphasis on natural beauty helping the user feel inclusive. Earthy tones, wide open spaces, and well organized objects came together to represent a professional business directory.
Style Tile
The goal of this style tile was to have the text do the talking with big bold headlines and space to let the user feel at ease. This made things feel professional while also allowing for playful moments with pops of color which represents the Fearless brand.
Dark, Vaporwave, Playful, Positive
Mood Board
This mood board was an abstraction of the original Fearless website. Keeping with a dark motif while adding playful illustrations and challenging the idea that pink is usually considered a feminine color.
Style Tile
The style tile was designed to evoke a sense of exploration via the dark theme. To stray away from making the theme too dark to read comfortably, navy blue was used to balance the overall tone.
Colorful, Bold, Freeform,Encouraging
Mood Board
This mood board represented Jen’s experience in New York being brought over to Winston-Salem. Combining positive statements with bold splashes of color, this board was inspired by Fearless’s physical space.
Style Tile
The goal of this style tile was to give the user a sense of fun and positive energy. This made things a little quirky and helped tie the design to the physical space, which is also eclectic in nature.
With great feedback comes great responsibility:
After getting feedback on the initial design directions, it was time to start building high-fidelity Fearless website screens. Starting with desktop wireframes provided by the UX team, we began designing screens based on the most well tested design, concept A, combined with features users liked from concept C. The user flow is focused on using the updated business directory.
Initial DESKTOP Design
Testing Results:
Users did like the colors on the front page, but thought there was too much white in the design, which made users feel that it was too plain and not Fearless.
Users did not like that there was no visible “i” or “?” to show where the hover state would be located. Overall users felt icons needed to be clear and prominent to show usability at a glance.
Iterate, iterate, iterate:
The second round of hi-fidelity screens was an exploration of color to find the balance of fun and professional. Once the new palette was solidified, visual hierarchy was easier to establish with color blocks and larger images to separate sections.
The hover state indicator was addressed by using the same folding corner visual of the Fearless logo, and using it to reveal the hover state icon on the business directory cards. This resulted in a more playful unified design.
Final Desktop Design
Going from desktop to mobile:
For the final round of hi-fidelity screens, we were tasked with transferring the larger desktop designs to smaller mobile screens. The challenge here was making sure the menu and other functionality translated clearly to touch screens. This was achieved by replacing the top menu bar with a menu button, making the drop down arrows larger for touch capabilities, and changing some of the font sizes to make sure everything was still legible.
Final Mobile Design
Reflections:
This project helped me really see how to iterate in design. Not being married to the original concept allowed me to dig deeper into what Fearless was looking for, as well as it’s community.
I enjoyed the user testing process and finding out how other people interpreted the design. Getting direct feedback allowed me to learn about design that much faster, so that each iteration was a significant improvement over the last.
Here are the main lessons I learned working with Fearless:
Creating a cohesive color palette streamlines the overall design process.
Images can draw the viewer into the design by quickly establishing a mood and space.
You can never do too much research to inform design decisions.
Having a base understanding of how software often translates to new software quickly. My understanding of Adobe illustrator and Sketch helped me move quickly in Figma. (The first time using it was on this project.)