Helping Youdle Redefine Website Engagement with Revamped Design and Search Functionality
Helping Youdle Redefine Website Engagement with Revamped Design and Search Functionality
Embedded Files
Timeline
Timeline
February 2024 - June 2024
My Role
My Role
Team Lead
UX Researcher
UX Designer
UI Deseigner
Deliverables
Deliverables
Tools
Tools
Figma
Google Suite
THE WALKTHROUGH
The App in Action
The App in Action
The client company set out to redesign Youdle's website, aiming to create an intuitive, distinctive platform that serves as the go-to resource for tracking product availability and stands out as a unique tool in the market. Their goal is to save users time and money while enabling retailers to engage effectively with shoppers seeking urgent purchases.
PROBLEM
Youdle aims to uniquely optimize their website by enhancing the search feature, user engagement, and ad revenue, making the site a go-to resource over competitors like Google, and ensuring the site is user-friendly.
SOLUTION
Develop an intuitive, modernized, and user-friendly website redesign, enhancing product availability tracking and user engagement by improving search functionality and introducing new services. This solution should optimize ad revenue and establish a unique, distinctive market differentiation from competitors like Instacart through innovative features.
There were four objectives to be prioritized throughout the redesign.
01
Develop an intuitive and modernized website redesign with a focus on improved search functionality.
02
Establish unique market differentiation from competitors by incorporating innovative features.
03
Increase customer retention by addressing user pain points and adding new services and features.
04
Increase ad revenue through partnerships and strategic ad integration.
- Improved Search Functionality
A) Prioritized an intuitive search bar, eliminating the use of a pop-up to choose the location and utilizing a drop-down menu, while also giving users the additional choice to shop by store.
B) A second search header allows users to search for a broad range of items, viewing or shopping multiple items at once.
2. Innovative Features
2. Innovative Features
C) Allows users to not only compare prices of products but also add products to their shopping list and track price trends.
D) Allows users to view products on a map. When users add a product to their list, a route is automatically calculated and allows users to open the route directly in their preferred GPS app.
3. New Services and Features
3. New Services and Features
E) Creating easier access to important product information without multiple clicks
F) Adding new features that prompt retention and engagement like allowing users to better filter their search results through shopping by store, following the store, or using additional filter options
4. Increased Ad Revenue and User Engagement
4. Increased Ad Revenue and User Engagement
G) Offering more opportunities for user engagement and customer retention through features that prompt users to make an account or come back to the site such as being alerted of product availability
H) Creating more ad opportunities in areas that aren't so overwhelming to the user
Before
Before
After
After
CONTEXT
What is Youdle?
Youdle aims to help users track product availability while saving time and money, and enabling retailers to engage with shoppers seeking urgent purchases.
The Brief
Our team received an initial briefing that laid out Youdle’s goals for the redesign: to increase user engagement, enhance the search functionality, communicate Youdle's unique value propositions, and provide businesses with easy advertisement options for featured products.
The Background
After reviewing the briefing, our team researched Youdle, a company founded during the pandemic as a Facebook group for tracking in-stock items. It quickly grew, prompting the transition into a website. Youdle aims to help users track product availability while saving time and money, and enabling retailers to engage with shoppers seeking urgent purchases.
RESEARCH
To kick off the design process, I conducted stakeholder interviews to gather insights and list the project requirements. One critical question guided our research:
"How can we fulfill Youdle's client goals through addressing user painpoints?"
⊹ Big Picture ⊹
Stakeholder Interview
Stakeholder Interview
Beginning with a kickoff call with the Youdle team where they outlined their redesign goals and objectives in their own words.
After this our team met and defined our main focus based off Youdle’s top priority: Improve the search functionality and experience.
Other goals and objectives to prioritize
1. The focus is on enhancing the search feature and user engagement, making the site a go-to resource over competitors like Google, and ensuring the site is user-friendly.
2. Currently, users primarily search for grocery items, so making Youdle as intuitive as possible is crucial, although a perfect solution is not expected from these three features alone.
3. We seek to: optimize ad revenue and increase customer retention.
Constraints: Effectively communicate Youdle’s value propositions, avoiding similarity to Instacart, and ensuring Youdle stands out.
⊹ Existing Product ⊹
Initial Usability Test User Interviews
Initial Usability Test User Interviews
We wanted to get a feel for where users are at with Youdle’s current site to help guide our UX process. We did this by doing a usability study with 5 users. Here’s what they had to say about the original design:
1. “It looks a little spammy” - Yvonne
2. “It’s not drawing me in” - Taliah
3. “The way the information is formatted has me frustrated and confused because it’s inconsistent” - Jumoke
Notes from the usability test
Hueristic & Competivie Analyis
Hueristic & Competivie Analyis
Heuristic Analysis of the Original Site
We conducted a heuristic analysis of Youdle’s website using Nielsen Norman's usability heuristics identifying the major areas for improvement and strengths.
We also used Hubspot’s Website Grader and accessibilitychecker.org to grade the usability and accessibility of the site.
Heuristic Analysis Report
Competitive Heuristic Analysis
We proceeded to identify Youdle's competitors and conducted a competitive heuristic analysis allowed us to assess effective strategies, observe how similar companies address common issues, and draw inspiration for the new site.
Our research revealed Honey as Youdle's primary competitor, with Google Shopping and PriceRunner close behind. Each platform offers unique strengths to inspire our approach.
Original Design
Home Page
Home Page
A) The search bar is not intuitive and overwhelms users- has to have a pop-up and multiple clicks to even search the location of a product.
B) Ads are clunky and spammy and the UI is clunky, outdated, and busy
Results Page
Results Page
C) There is not enough information for users.
D) Aren't any features to differentiate it/ make it stand out from other search engines or draw users in to engage.
⊹ User ⊹
Understanding the User
Understanding the User
Youdle initially started as a Facebook group before evolving into a website.
By analyzing the metrics and content within the Facebook group, including user engagement levels and demographic data, we were able to understand Youdle's primary user base. We also read through posts made directly by users which provided us with a clear understanding of their goals, pain points, and interactions
Empathy Mapping
We captured users' authentic experiences from Facebook posts and used them to create three empathy maps. These maps explore users' thoughts, words, emotions, actions, pain points, and goals.
Information gathered from the Facebook Metrics and Empathy Maps research were distilled into three unique personas
Information gathered from the Facebook Metrics and Empathy Maps research were distilled into three unique personas
DEFINE THE PROBLEM
Once we had our personas, we dove into the next phase: defining the problem. We asked ourselves, "How might we..." questions to guide our solution-finding process while helping us align with both Youdle's goals and the needs of its users.
How might we help users use Youdle as a consistent tool for grocery shopping?
How might we add a variety of options to the search engine and search results for users?
How might we make ads a seamless experience for users?
How might we help users shop for multiple options at once?
How might we help users shop for multiple options at once?
User Stories
Drawing from our "how might we" questions, we crafted user stories from the perspective of our personas. These stories allowed us to step into the shoes of Youdle's users and envision what they hoped to achieve through the platform.
User Stories
IDEATE
Brainstorming
In a collaborative brainstorming session, we synthesized user stories and how might we statements into actionable solutions. We generated a variety of ideas, prioritizing features that aligned most closely with user needs and company objectives.
View Full Brainstorming Session
Solutions
User Journey
With our key features in mind, we mapped out how users would navigate through our site. This helped us see the whole picture of their experience, guiding us to arrange things in a way that makes sense.
User Flow
After mapping out the journey, we sketched out exactly how users would move through each step of the site. This gave us a clear plan for what pages they'd see and what they could do on each one.
PROTOTYPE
Initial Concepts
Initial Concepts
Sketches & Wireframes
First High-Fidelity Mockups
As we prioritized user needs and company goals, drawing inspiration from successful competitors, more ideas continued to develop up to this stage. These were our initial high-fidelity mockups:
Home Page
Home Page
A) Optimized search bar - allowing more freedom in search options and updated to be single clicks rather than a pop-up. A header with carousel ads for ad optimization.
B) Bar to search for a blanket of items or multiple items without a specific item search.
Product Search Page
Product Search Page
C) More information for users, filtering options, and features such as price comparison.
D) Important product information for users is readily available without having to enlarge it.
Product Information Page
Product Information Page
E) Product information page where users can get additional information or photos of the product, view ratings, receive alerts, see when and where it's in stock, view price trends, and reviews, and overall engage with the site more.
F) Better placement of ads.
User Testing
User Testing
We conducted five usability tests via zoom and in person.
Goals of the user test
01
Compare user feedback to the new site to user feedback from the original site testing.
02
See how easily users are able to accomplish finding in stock items
03
Identify what features users were most drawn to
04
See if our design addresses any of the pain points users expressed from the first testing.
Task 1: Search for 1 item
“You are in need of an essential item and what to see if it is available using Youdle. What do you do?”
Task 2: Search for multiple items
“You are in need of toilet cleaner, soap and detergent and want to use Youdle to see if it is available nearby. What do you do?”
Task 3: Search for the ideal location
“You are about to run a few errands and want to see if an item (Stanley Cup) is available at a store you plan to go to. What do you do?”
What could be improved?
Main feedback:
Header layout- The text was too big in the header and the icons in the second header and overwhelmed users
Search bar visibility- The text on the search bar was a bit light and users felt it didnt stand out enough, especially the "store" selection option in the middleNavigating back to the homepage was not as intuitive
Secondary feedback:
Item cards are a bit large on the home page
Ads are large
The initial prototype received an average score of 90% in usability based on user feedback
User Test 1 Revisions: Addressing User Painpoints
Home Page
Home Page
A) Reduced header size and made search bar options more apparent by enlarging it, darkening the text and adding a dropdown icon to the store selection
B) Reduced icon size on the selection bar
C) Changed the placement of ads and ad sizes
D) Smaller product chips with a wider page margin
Products Page
Products Page
E) Adding breadcrumbs to allow users to intuitively go back to pages
F) Allow users to add items to a list to shop for multiple products at a time
Revisions Based Off Youdle Feedback:
After presenting our final design to our client, they had some minor suggestions and requests to ensure that the final product would be in line with what they wanted Youdle to stand for.
This meant incorporating a mapping feature, so it was back to the drawing board.
Mapping Feature
Mapping Feature
A) Mapping feature that shows products users are searching for.
B) Adding products to the list creates a route that the user can open in their preferred maps navigation app.
CONCLUSION
Next Steps:
As we know from this process, we can never be finished with validating and revising our designs. Our next focus lies in testing the new features specifically requested by Youdle.
Through thorough testing and iterative refinement, we aim to ensure these additions align with user needs and elevate the overall user experience on the platform.
Page updated
Google Sites
Report abuse