Avant garden
How might we improve the user’s ease of finding contact information on the Avant Garden mobile site?
Overview
The project
I worked on an end-to-end, comprehensive UX project for the Avant Garden mobile website, which encompassed redesigning their homepage and contact page to create a more intuitive experience for users when searching for the business’ contact information.
my role
My role within the scope of the project included:
-
Conducting user experience research and analyzing data
-
Ideating possible solutions
-
Prototyping various solutions
-
Conducting usability testing to ensure optimal user interaction and satisfaction
The problem
Avant Garden has realized that users are struggling to find the contact information of their business on the mobile website. As users navigate the homepage, where contact information is absent, it's leading to frustration and a disjointed user experience.
Furthermore, when navigating to the hamburger menu to seek another way to find contact information, the icon is located in a different spot than where it usually is found and the menu doesn’t display a “Contact” page, rather it shows they have a “Location” page.
Screen recording of current Avant Garden mobile site.
"How might we improve the user’s ease of finding contact information on the Avant Garden mobile site?"
design process
tools
Skills
Timeline
-
Google Forms
-
Google Meet
-
Canva
-
Figma
-
Google Slides
​February 5th -
February 15th, 2024
-
User Research & Data Analysis
-
Mobile-First & User-Centric Design
-
Wireframing
-
Prototyping - Paper and Digital
-
Usability & Universal Design
-
Usability Testing
-
Presenting Data
Research
Hypothesis - “It is our belief that creating a detailed and robust footer at the bottom of each page would be helpful to users who are trying to find the contact information.
We believe this would increase engagement and communication by users (calls and emails), as it will increase the accessibility and ease of finding this information.”
User Survey & Interviews
After conducting comprehensive user research, utilizing both a user survey via Google Forms and in-depth user interviews, I gathered valuable insights on the current Avant Garden mobile website:
​
-
100% of users found that it took them longer than expected to find the business’ contact information
-
85% of users found that is was “Difficult” or “Very Difficult” to locate the business’ contact information
The most interesting discovery from the research process was that users found it challenging to find the business contact information, as many stated that they had to search the entire website or dig a bit to locate it. One user stated “The website has some missed opportunities here,” while another said “There were large sections of whitespace, and I didn't feel like I was finding any answers or learning anything.”
Results from user survey - Google Forms screenshots.
User Personas
In crafting a user-centric design approach for the Avant Garden mobile site, I created two distinct user personas, leveraging insights gleaned from their Instagram page and analysis of current Google reviews about Avant Garden. These personas were developed to capture the diverse range of potential and existing customers of the bookstore, enabling me to deeply understand their needs, preferences, and pain points.
Avant Garden User Personas
Journey Map
I also developed a journey map to visualize the experience users might encounter while interacting with the current Avant Garden mobile site. This map delves into the emotional journey users undergo, capturing their feelings and frustrations as they navigate through the website, helping me to pinpoint areas for improvement and understand what may be required to meet their needs.
Avant Garden Journey Map - to better read the corresponding actions for each emotion, zoom into the table
Ideation
Throughout this UX project, my design process was comprehensive and iterative, focusing on understanding user behavior and needs while striving for effective problem-solving and user-centered design solutions.
This process included:
-
Developing a user flow
-
Mapping out the site structure
-
Sketching a paper wireframe
-
Utilizing Figma to build wireframes
User Flow
This user flow was developed to gain insight into the step-by-step process a user would undergo when navigating the entire mobile site to find contact information, allowing me to identify pain points and opportunities for improvement.
Avant Garden User Flow - a user's experience in looking for and finding contact information
Site Map
Though I did not change the architecture of the site, by creating the site map I was able to analyze the organization of the current Avant Garden website, ensuring a clear understanding of its layout and content hierarchy. I also changed the “Location” navigation label to “Contact” to intuitively guide users towards another opportunity to find contact information.
Avant Garden Site Map
Wireframing
By creating both paper and digital wireframes I was able to visualize and design where essential features and elements of the Avant Garden homepage and “Contact” page on mobile could exist.
​
During the design process, I decided that a robust, fat footer would be great way to ensure that users were easily able to find important contact information in an intuitive way on each page. I also redesigned and restructured the "Contact" page by organizing and placing the most important content higher on the page.
​
By leveraging both paper and digital wireframes throughout the design process, I ensured that each iteration was informed by user insights and aligned with the overarching project goals.
Paper (L) and Digital (R) Wireframes, showcasing the homepage and "Contact" page
prototyping
Design Comp
Throughout the UI design process for this UX project, I maintained consistency with the current Avant Garden website's look and feel, utilizing similar content and visual elements to ensure seamless integration with the existing brand identity. By aligning closely with the established aesthetic, I created design comps that not only enhanced the user experience but also preserved familiarity for users.
Avant Garden Digital Comp, showcasing the home page, the menu (when a user clicks the hamburger menu icon), and "Contact" page
Paper & Digital Prototypes
I employed paper prototypes to explore potential interactions, facilitating early-stage testing to refine concepts.
Additionally, I transitioned to building the first version of a digital prototype within Figma, using interactive features to allow for a more realistic simulation of user interactions and providing valuable insights into the usability of the redesigned pages on the Avant Garden mobile site.
Avant Garden Paper Prototype, showcasing how the menu overlay would be displayed when a user clicks the hamburger menu icon
User Testing
Process
Adhering to usability testing best practices, I organized a comprehensive usability testing process for my prototype, ensuring feedback collection and informed iteration. This process included:
-
Implementing remote usability testing via Google Meet for user convenience and accessibility.
-
Conducting structured interviews with users as they interacted with the prototype in Figma, enabling real-time feedback gathering.
-
Systematically collecting data during testing to capture observations, user comments, and performance metrics.
-
Utilizing collected data to inform iterative improvements for the next prototype iteration, prioritizing usability enhancements based on user feedback.
Feedback Cycle
I began by interpreting user feedback gathered from usability testing sessions, aiming to extract actionable insights and identify pain points for users. Comments about the prototype expressed by users during testing were:
​
-
Easy to read and navigate
-
Calming, not overwhelming
-
Has the most important information needed (ie. hours, contact info)
Also during my analysis, I found the following pain points of users:
​
-
Too simple, lacking information
-
Doesn’t really motivate them to visit the business sooner
Since the pain points and possible solutions are out of scope for this current UX project, I found that the V1 prototype works as expected, resolves the user’s initial problem and is ready to ship.
Final Prototype
Video of Avant Garden digital prototype in action - LINK TO FIGMA FILE
Results
solutions
Below are the overall solutions I designed and incorporated to address the usability issues identified in the Avant Garden mobile pages UX project:
-
Moved the hamburger menu icon to the top right in the header
-
Created a more robust footer at the bottom of each page, which includes:
-
Location address
-
Phone number
-
Hours of operation
-
-
Renamed the “Location” page to “Contact” page
-
Redesigned Contact page and used information hierarchy to list most important information first
Lessons Learned
One of the significant lessons learned in this project was navigating the challenge of working within a constrained scope while addressing broader functionality issues and user concerns across the entire website. While tempted to implement drastic changes to enhance the overall user experience, I realized the importance of staying focused on the specific problem statement.
Despite the urge to address all issues comprehensively, I remained diligent in adhering to the project's defined scope, ensuring that additional UX solutions and ideas were presented solely as future recommendations. This experience underscored the importance of prioritizing objectives and maintaining alignment with project goals to achieve meaningful outcomes within set limitations.
View More Projects:
UI/UX Designer
© 2024 Sebrinia Welch