Launching a Women of Color-Led Business From Scratch
Responsive Web and Mobile
Company Overview
A woman of color-led DEI consulting firm needs to launch their web presence from scratch in order to attract new clients and build a diverse network. This requires responsive web design, branding, subscription options, testimonials, and social proof.
Tools
- Figma, Material Design, Squarespace, Mailchimp, Canva, Hotjar
- Google Forms, Google Slides, Google Docs, Google Analytics
- HTML, CSS, Responsive Web Design
Team
- Daniel Sharp — UX Designer
- Rachel Schmitz — Senior Product Designer
- Mariah Gonzales, Gloria Dallas, Yemi Belachew — Co-founders
Role
- Daniel — Surveys, Research, Wireframes, Prototyping
- Rachel — Brand Identity Workshops
- Mariah, Gloria, Yemi — Business Strategy, Copywriting, Social Media
Initial Steps
What is most important to research when designing the look and feel of a new DEI consulting firm?
- Rachel led out a word list activity with stakeholders (including myself) which was insightful.
- We were able to categorize information about how the company should be represented using color coding.
Competitive Analysis
Before our next meeting, I was tasked with performing a competitive analysis of DEI companies offering similar services.
- I initiated this research in order to help Rachel with logo design and branding. This turned out to also be incredibly useful in articulating design decisions during the prototype critique later on.
- Still, there was more to be discovered before building. We now see what other DEI companies have to offer and how they offer it. We still didn’t have a firm grasp of who our target users are.
Wrapping Up Research
Due to time and resource constraints, I had to work with what was feasible in order to design and get wireframes in front of stakeholders. I spoke with some folks experienced in DEI consulting, did some competitive analysis, and that was enough research to dive into wireframing.
Wireframes
After getting a good feel of what other websites have to offer and scraping together content that the team compiled in Google Docs, I found a simple Figma wireframing kit for desktop.
After running through usability tests with a few team members, I noticed some obvious fixes that needed to be made which were surfaced after having other people use the prototype.
Mid Fidelity Prototype
I shared the wire frame via email and presented to our team during our next meeting. We agreed on the flow and that I should move on to a higher fidelity.
Design Critique
Rachel and I met up on the weekend to discuss the flow of the website and troubleshoot the prototype. The critique began with a great ask, “Can you please walk me through this and explain the rationale behind your design decisions?”
List of services is on the landing page
This was important because if the user didn’t bother to click the CTA and blindly scroll down they would still be able to find the services offered. This is arguably the most important piece of information besides the statement of purpose.
Social proof comes after statement of purpose and before list of services
When a user lands on the site they don’t want to immediately see the services offered. Why should they care? Because there is a testimonial of someone who has bought the service and is satisfied, or a list of trustworthy companies who have bought in.
Stock that is appropriate and representative of the company culture
Women of color who are focused, enjoying what they do, and hard at work. This works as a good place-holder until we do a photoshoot of the co-founders in their real work environment.
Iterating on feedback
Social proof
A quote from an individual should be replaced with a “Trusted By” companies section.
This has more weight in terms of conveying our company’s value rather than a quote from an individual CEO.
Our Services
Variation of text and imagery should be consistent.
The list of services had the images placed left, right, right, which was scrambling the viewer’s eyes. I changed the positioning to left, right, left.
Testimonials
This should come after statement of purpose and before list of services.
When a user lands on the site they don’t want to immediately see the services offered. Why should they care? Because there is a testimonial of someone who has bought the service and is satisfied, or a list of trustworthy companies who have bought in.
Choosing the Right Stock
I chose stock that I felt was appropriate and representative of the company culture.
Women of color who are focused, enjoying what they do, and hard at work. This works as a good place-holder until we do a photoshoot of the co-founders in their real work environment.
About Us Section
The “About Us” section featuring the co-founders should not come before services.
Let the user decide if they are interested in the services first. Only then would they want to learn about the team and their history.
Learnings
1. Accessibility Tools
You don’t have to be an accessibility expert to identify key issues. Initially my hi-fidelity mock seemed to look ideal. When I put it in front of other designers they could tell that there were contrast issues. Most design tools have plugins which can flag these issues for you.
2. No Perfect Research Formula
Due to time and resource constraints I had to work with what what was feasible in order to design and get wireframes in front of stakeholders. I spoke with some folks experienced in DEI consulting, did some competitive analysis, and that was enough research to dive into wireframing. When there are deadlines you opt to do what is possible with the time you have.
3. UI Kits are Your Friend.
Many designers describe designing for desktop as being one of the most difficult screens to design. Figma wireframing kits + extensive competitive analysis turned out to be helpful in avoiding getting caught up in the nuances of layout design when the goal was to get wireframes in front of stakeholders fast in order to gather feedback.
