Austin Business Woman Redesign
#GirlBoss
The Scope: Improve the e-commerce user experience for both consumers as well as business owners.
Professional Project: Redesign for Austin Business Woman
Participants: Myself, Jeromy Coleman & Alexis Yarnell
Duration: Three week sprint
Objective:
Our client came to us with an amazing website that showcases women owned businesses in Austin, Texas. The team loved the idea but it became clear, fast that the website needed help in order to thrive. The goal of this project was to create a simple, beautiful layout that is easy to navigate for both business owners and customers.
Through careful analysis, we were able to design a space where women owned businesses can flourish, and customers can find everything they are looking for in one place.
My Contributions:
As a group we all handled various aspects of the research and design execution together. This includes usability testing, comparative and competitive analysis, affinity mapping, design studios, creating personas, meetings with the developer, meeting with the client, writing questions for the survey, and contributing to the project report.
Here is a list of work I did for this project:
Task analysis
User interview
Sketching
Created a site map based on a new global menu
Designed wireframes for the product description page as well as the business owner profile
Wrote discussion guides for each usability test
Created high fidelity prototypes for the product description page and business owner profile.
Methodology:
Initial usability testing of the current website
Comparative & competitive analysis
Survey
Heuristic evaluation
Task analysis
Affinity mapping
Site-map
User-flows
User interview
Design studio
Sketching
Meeting with developer
Wireframing
H-fidelity mockups
Austin Business Women is an Online Directory, Promoting Woman Owned Businesses in Austin, Texas.
Olga Adler, like many in the spring of 2020, was laid off from her job due to the economic fallout of the pandemic. As she waited for the storm to pass, she watched other small businesses around her close their doors to the public. Her community was suffering so Olga took it upon herself to promote women and small businesses so she created Austin Business Woman.
The idea was to create an online tool that was pandemic proof and would connect powerful women so they can promote each other. This was an amazing project to work on. Our team was enthusiastic and excited to not only boost one female owned business but multiple at the same time.
Usability Testing Round 1:
How are users interacting with the current website?
Overwhelming Homepage:
There were 26 sections on the Homepage
The client wanted to showcase the various businesses she has listed on Austin Business Woman, but the homepage became very congested.
Multiple repeating calls to action:
In the example above, the “Home” tab is not only in the global menu but also next to the login button in the upper right hand corner. Olga received feedback that some features and buttons were hard to find and her solution was to put more of the same buttons in different areas.
In this case, there is also a “Homes” tab at the end of the global menu which referred to real estate listings, but was very confusing.
New Member Onboarding:
Verbiage Around Signup:
Right away, the client expressed that business owners were having a hard time signing up for the website’s services and would call her for a walk-through.
Customers were unsure if this was a site where they could find goods and services. The website seemed more geared toward business owners and not a place for consumers.
Membership Plan Layout:
There are four membership plans users can choose between:
The Premium Plan
The professional Plan
The Essential Plan
General User Plan
The perks and restrictions for each of the membership plans had all of the information one would need while making a decision. However, our users did not like the constant scrolling up and down the page to compare them.
The color scheme is a bit all over the place as well. It does not fit within the pallet used for the other buttons and the names of the membership plans are hard to read.
The consumer plan at the bottom was difficult for users to understand as well. It doesn’t match the other plans and is called the General User Plan.
Users were confused about the purpose of the site. To them, it feels like a networking website, not a place where you can find local goods and services.
Competitive Analysis:
The Important Information We Gathered:
Clear Audience
No User Account (or user accounts were the same as business accounts in myarea’s case)
Easy to locate business information
Comparative Analysis:
The Important Information We Gathered:
Amazon & Yelp had completely separate onboarding for business owners
Etsy’s on boarding for businesses was connected to their user account
Each website had a large prominent search bar
Task Analysis:
One of our challenges was to simplify member onboarding. In order to get our heads around it, I broke down each step of the task from start to finish and compared it to other websites from our comparative analysis.
It was fascinating to see the difference in companies layed out in this way. Etsy is one of the best examples of a website that caters well to business owners as well as consumers and yet has a much more complicated onboarding process.
Yelp however, was extremely short for both business owners and customers
The answer could be that Etsy is often the hub for a business, not where the business is being advertised lor reviewed like Yelp.
Austin Business Woman had virtually no onboarding process for customers. For the redesign, the onboarding process could be simplified like Yelp, where businesses are being advertised, and It could act like an e-commerce site, similar to Etsy.
User Survey:
The group conducted a survey to better understand consumers’ relationship with e-commerce overall. If we were going to improve the shopping experience on Austin Business Woman, we needed a better understanding of how online shopper’s feel about convenience and supporting local business.
12 people took part in our survey to gather information on basic e-commerce habits.
58.3% between the ages of 29-39.
100% of users want to support their local economy but find it difficult to do so while shopping online.
Users typically know that they are looking for, read reviews, save items and compare products.
Google Analytics:
September 1, 2021 to November 1, 2021
33.5% Users are between the ages of 25 & 34
12.6% Are returning customers
Top Pages:
Home | Buy | Search Results | Jobs
What to really look out for:
60.1% Bounce Rate compared to a 47.4% average to e-commerce websites as a whole
All of this research led to our target audience
Personas:
There are two personas, one representing business owners and the other representing customers. Each has their own user flow as well.
Business Persona: Sarah Griffith
Owner of Sarah’s Candle Lab
Needs and Expectations:
To showcase her products.
Drive more customers to her e-commerce website.
Network with other female business owners.
Grow her candle business.
Customer Persona: Shannon Ringer
Holiday Gift Shopper
Needs and Expectations:
To shop for women owned, local businesses.
Be able to save items she likes.
Read reviews and follow recommendations.
Find multiple products in one place.
Be able to search for specific items.
Solutions:
Hypothesis 1: Shannon’s Solution
We believe that by making the shopping experience reflect common e-commerce experience, and by providing a clear message when users are being taken to a new page Shannon will be more comfortable shopping on the Austin Business Woman website since it feels more familiar.
Hypothesis 2: Sarah’s Solution
We believe that by creating a minimal design and clarifying website language, Sarah will better be able to utilize marketing options and better advertise her products.
User-Flows
Wireframes:
Site-Map
Based on our initial usability testing and heuristic evaluation, the global menu needed to be reduced and simplified. Olga wanted to cover a wide range of different businesses and options for services but we thought we could organize them into fewer options. I created this site map so we could have a guide for organizing our design.
The original global menu read: Home, All Businesses, Digest, Buy, Deals, Photos, Videos, Event, Blogs, Work, Homes
The simplified version read: Home, Browse Businesses, Shop Goods and Services, Events, Media, About, Contact
Sketching:
Every team member sketched out different ideas for each screen of the flow.
This is where we developed many of our ideas for our screens.
Usability Testing Round 2:
Our Wireframes and User-Flows
A/B Testing:
We had two ideas for making the membership CTA easier to find on the homepage.
A: The CTA lives in the top right hand corner next to the login button.
B: Larger and lives farther down the page.
Test A was the winner!
Changing the Language:
We decided to change the business onboarding button from “Become a Member” to “List your Business.”
We thought this would clear up the confusion about adding one’s business to the platform.
What Shannon is Looking for:
Breadcrumbs
Products grouped together to avoid vertical scrolling
Filtering options:
By Category
Item type
Price
Special offers
Distance
Liking Items that can be stored on a customer dashboard for later
Membership Description Page:
The membership description page was originally set up in a list format and we changed it three boxes side by side with a description for each. When we tested this matrix we found:
A more traditional matrix with a grid and check marks would make the membership descriptions easier to read.
Prices were missing from the description which, for most users, would influence the decision making process.
Users liked that the descriptions were brief but could use a bit more information about specific perks such as “digest” and “social media stats.”
They also expressed that they want an option to read more. “Highlights” signals that there is more to read.
High Fidelity:
Component Library/ Design System:
These were the components I contributed to our design system. The global menu has a touch of the blue color underlining each section when a mouse is hovering. This splash of color comes from our style guide.
The buttons also change slightly while a mouse is hovering. All that happens is the button is outlined in black and has a slight roundness to its coloration. This was inspired based on button trends and indicating to the user that the button is ready to push.
Homepage:
The Homepage was cleaned up quite a bit.
We added the “Member of the Week” because the client wanted to make it a key feature on the site, as well as displayed across social media.
The events calendar is more prominent and interactive on the page as well.
Hierarchy:
Greyscale:
Users were concerned about the hierarchy of information on the business profile pages. We decided we could tackle this by moving valuable information such as, the map/location, basic information about the business and the business owner bio closer to the top of the page.
Since all of the information couldn’t live in the same place, we decided that by adjusting the size and spacing of page elements, each one would be highlighted equally in a way that makes sense to the user.
Hi-Fidelity:
All of Sarah’s candle lab information is at the top of the page:
Logo
Mission
Location
Contact and Social Media
As you scroll, featured products for sale, followed by Sarah’s bio, “The Woman Behind the Business.”
There is space for more information about the store and a space for blog postings or other content she wants to share on the page.
Shop Goods & Services:
Shannon can either use the search bar (Figure A) to look for specific products or brows e using the the Shop Goods and services Tab (Figure B).
The team made sure to showcase the filtering menu on the side bar. As Shannon, our customer is looking for candles she can filter through content to find what she is looking for.
The bottom of the screen also includes a list of deals and coupons!
Figure A
Figure B
Product Description & Third Party Website Disclaimer:
After selecting a product Shannon can see a description of the product, reviews, social media links and ads for more products from Sarah’s Candle Lab.
We added a disclaimer to the product description itself as well as a pop-up when you click “Purchase this Item.”
Users were actually very excited to know they were traveling to a third party website to make purchases. They thought it was great that they got to see more of the business and felt the purchasing process was much more honest.
The Hi-Fi Matrix
Our user’s liked that the membership plan descriptions were next to each other but there was room for improvement.
Now when new members are adding their business they get all the information they need, including the price, an option to read more about each perk and an option to schedule a phone call if they need it.
At first glance, the check marks make the benefits of the executive plan stick out. This is meant to increase trust from our users because they will have a better idea of what they are getting and how to use it.
When Sarah decides to renew her membership next year, she will be more include to sign up for the executive plan!
Responsive Design:
It was extremely important to us and our client that the directory work well on mobile devices.
We designed each of our flows in a drop down column format for iPhone 13.
Being able to filter through goods and services is still very easy. The icon under the burger menu at the top is commonly placed as a filtering icon.
From anywhere, Shannon is still able to narrow down her search to find exactly the gift she needs.
Listing your business is also very easy on the go!
Under the account icons, business owners are taken to a scrollable matrix. Our more traditional Martin is better suited for a laptop or desktop screen.
Each other the business plans are easy to see on one screen this way and business owners can compare features easily.
The product description and business profile page look very similar, just conduced into scrollable columns.
The product description page has everything Shannon will need to make a good purchasing decision.
When you hit purchase this item the same disclaimer about moving to a third party website appears.
The business profile is very scrollable. we wanted to keep customers engaged by keeping the same hierarchy.
Deliverables:
For a full rundown of our research please click here, or on the image below which will take you to our project report. There you can read extensively about our research and synthesis or simply observe our charts and Figma file in the Appendix.
Thank You!
This project was truly wonderful to work on. Our client has an amazing website that is building a community of women. As a team, we were so honored to work on a project that not only improved the business for one person but hopefully many.
During our sprint we found there was more potential to work through but unfortunately with our limited time, it did not fit into our scope. The developer was kind enough to speak with us about our designs and evaluate what was possible. We conducted a card sort to try and narrow down some of the categories listed on the site but because of the way they are stored on the backend, the task will be tedious and expensive.
However, we did learn a lot about the power of APIs which help others format their content to match our clients, that was a big win.
Again, this project was a true joy. My team mates are amazing and we are so thrilled to have this on our portfolio.