The Backstory
Allhers is a community marketplace for women in Austin, TX. The founders created the mobile app to provide a safe space for women to buy, sell, and connect locally. They invited the Ladies that UX in Austin group to work as volunteers on their UX designs. This project was the first time the start-up brought in a UX specialist.
The Challenge
The scope of the project was large. There was no budget. Most volunteers were full-time employees elsewhere. Allhers did not have a designer to keep up with the designs after the project. Given these constraints, our goal was to find impactful solutions that would bolster the Allhers’ user experience and business with lasting results.
My Role
I was part of a team of volunteer UX designers that tackled research and design. I played a support role on the team and focused on research and design for the home and search feeds.
Allhers Overview
Problem Discovery with Mixed Methods Research
Heuristics and WCAG Provided Excellent Jumping Off Point For Project
Each team conducted a heuristic evaluation for their portion of the app. Later we presented our findings in a group critique.
I took on the research feed as part of the Search/Home Feed Team. I used Nielson Norman Group’s 10 Usability Heuristics for User Interface Design and WCAG standards to identify problems. This was the first time the company had worked with any UX specialists. Checking against these basic guidelines was a must.
Most of the design issues were related to accessibility and lack of search relevancy. These problems impacted the functionality of the design. Many small errors like these can also drag down the overall feel of the app and ultimately cause Allhers to lose business. See my notes for a team shareout below and click the image to enlarge.
Sketching Flows and Maps of the Original Design to Understand the Nitty Gritty Details
I moved through the search flow (pictured below) as a user to document each step and identify possible sticky points. I noticed possible pain points with accessibility/ease of use and search relevance.
The image on the right is a rough site map of the homepage. It includes the menu, feed, and search options.
I sketched these details to deepen my understanding of the information architecture and flows that users experience. In making the site map I found many repeating items which I would later go back and consolidate.
Users Corroborated Our Findings and Provided New Insights
We spoke to users about their experiences with the app through a series of usability tests. Some results corroborated my findings from my other modes of research and documentation. A few key results from users include…
A handful of users mentioned that their items weren’t sorted by relevance. They had to try several search terms before finding relevant results.
"I'm curious why this [item] is the most relevant but it's the last down on the list. This should be at the top."
"It's very particular about what you put in the search bar"
Users had questions about icons. Many users said,
"I'm not sure I understand the difference between the like and bookmark options"
Additional Research Strategies
If we had more time and budget we could have included more research strategies to collect a variety of data points. Examples include:
Conducting user interviews with open ended questions to learn user preferences within marketplaces, searches, and competitor markets. We could use these data points to craft short and long term business goals.
Analyzing similar platform features to ensure a competitive product and consider niche services.
Utilizing a tracker to show how and where users engage with the app. This would help us pinpoint when users abandon the site.
Defining the Problem
Original Goal Recap:
We gathered data with a focus on major pain points. We considered how we could design impactful solutions that would bolster the Allhers’ user experience and business with lasting results.
Big Picture:
Users need an aesthetically pleasing experience. It should seamlessly showcase goods so that they can quickly view and purchase items they love from their local community. Our team believes a more delightful user experience will result in better foot traffic and sales for Allhers.
Design Goal:
We set out to target solutions that promote minimalist design, accessibility, and ease of use by:
Correcting heuristic and WCAG violations
Revising information architecture
Reducing feed length
Optimizing the search function
Sketching to Brainstorm Design Solutions
My partner and I met to review our research and brainstorm solutions.
We each rapidly sketched 8 screens with ideas to address our user pain points.
We shared them with each other, iterated on our sketches, and annotated our drawings
We shared our best ideas during a whole group meeting to finalize our priorities before wireframing.
Checking in with Our Client to Share Progress
An important part of my design practice is touching base with my clients between the research and design phase. Meeting at this point helps clarify goals and align stakeholders. I often learn a lot about key nuances from my clients during these meetings.
Our clients were very open to most of our suggestions. They particularly appreciated the accessibility and heuristic insights. There were two topics that created constraints for our designs.
They loved their chat feature, Girl Talk, and saw it as a distinguishing feature of their app. This was at odds with our research. We worked together to find a happy medium. We kept the feature prominent but not the main focus of the user experience.
They weren’t interested in developing an algorithm to improve the search relevance until they acquired more users. This was mostly due to budget constraints. We discussed ways to improve the search without an algorithm. We could use better tags and the addition of item titles. Sharing the user data helped bring the client’s attention to the issue.
Designing a Loveable Experience
Low Fidelity Frames as First Draft of Design Solutions
I sketched lofidelity frames in Figma by rebuilding the existing Allhers frames and adding revisions. The revised designs addressed accessibility, ease of use, and search relevance.
Even though I didn’t have control over the search algorithm I still prioritized making the search easier. I reorganized the category filters and added the number of search result items. Here are a few of my first draft frames.
Giving and Receiving Feedback
I love feedback and am very open to it as long as I can understand the rationale. Critiques make me a much better designer. My teammates suggested several ways that I could improve this specific design. I took their suggestions and asked for clarity when needed.
Occasionally I find that feedback can be more about personal preference. If my research doesn’t point to the suggestion and I don’t see a clear benefit I usually won’t make the change a priority. Likewise, when I give critiques I try to base them on best practices and user research.
Thoughtfully offering suggestions, asking for clarity, and strategically incorporating feedback are critical steps in my design process.
Hifidelity Frames - A Way for Allhers to Continue Their User Experience Journey
Our final product for handoff was an annotated file of highfidelity wireframes. The designs include research based improvements to address minimalist design, accessibility, and ease of use. Here are two examples of the multiple improvements I made:
I increased all touch targets, added a voice-to-text option, adjusted the color contrast, added item titles, and reduced the amount of visual information on the page. These changes promote accessibility, scan-ability, and reduce cognitive load which benefits all users.
I moved the multiple Girl Talk link locations to one icon option in a new bottom navigation bar. This way Girl Talk users can access the feature without it getting in the way of people who simply wish to shop. Ultimately the exchange of goods will have the biggest impact on business and should be the priority.
There are a few things I would have done differently.
For example, designers with the final say replaced the original draft icons on the bottom navigation with unconventional icons. They did not include labels or conduct user testing. I would have selected recognizable icons or tested them to make sure users can understand their purpose.
Before handoff we should have built in time to test the final frames with users. When possible it’s best to validate final design solutions with research. Without testing, we aren't sure of the impact of our work yet.
Final Thoughts
What the Team Accomplished
The team created a cohesive, beautiful mockup that pleased our clients. The overall prototype followed design principles and included basic accessibility features which should reduce cognitive load and make for a more lovable shopping experience. The search and scroll feeds are more efficient and accurate, The team also brought important questions to our clients such as the purpose of the Girl Talk feature.
Challenges of a Volunteer Project
The project felt a little messy. Only about half of the original volunteer group stayed until the end of the project. Leadership did not define key basics like components and margins. A few designers rallied to develop fabulous solutions throughout the process. The experience gave me a deeper appreciation for team players, project organization, and well-established style guides.
Next Steps
If I had the opportunity to continue this project with the client the first thing I would do is test the new designs. This includes testing the new navigation bar with users. I would rerun the original usability tasks with a new set of users and the new prototype. The results would validate the designs (or reveal problems) and provide metrics on the impact of our design changes.
Long term, I would use KPIs such as customer acquisition and retention to measure the success of the redesign. I’m also interested in tracking user behavior around the GirlTalk feature. Eventually, I would want to determine if Allhers should restructure the Girl Talk feature or deactivate it through quantitative analytics and more user testing.