R.HM
Manhattan Bread & Bagel
Website Redesign.UX Designer. Team work Case study
Project Overview
Manhattan Bread &Bagel Website redesign was a capstne project which we done by group of 5 designer. we took the following steps:
1. User Research
• Heuristic Evaluation
• Interview
• Competitive Analysis
• Card Sorting
• Site Map
2. prototype
3. Usability Testing (x2)
4. Design Iteration
User research
- Heuristic Evaluation
we decided to start our research process with Heuristic Evaluation to find out potential problem in exist website, in this case we can have a opinion about technical pain point which is already exist and figure it out which one is most matter for our users.
Interview
We initially prepared a survey to gather insights from users but encountered a challenge.
Problem:our target audience likely had not used the Manhattan Bread and Bagel website. realized the limitations of conducting the survey without real users familiar with the site.
Solution: we decided to shift our approach to interviews.
Our revised plan involved having participants perform tasks on the existing website while we observed and timed them. After completing the tasks, we asked a series of questions to understand their pain points and overall experience. This approach allowed us to gather detailed, qualitative insights directly related to the users' interactions with the website
​
A key point ,recognizing that we were improving an existing site rather than creating a new one, we structured our interviews to include elements of card sorting and task performance. This dual-stage process helped us identify the most critical issues and user needs effectively.
​
Interview Result
Affinity Diagram
Result of Affinity Diagram,we found out
With the results from the interviews, we created an affinity diagram to gain better insights into users' pain points. We organized and categorized the most frequently mentioned problems, allowing us to identify key areas for improvement and effectively name and prioritize these issues. This process helped us understand the users' challenges in a structured manner and guided our subsequent design decisions.
Competitive Analysis
​
in this process we comparing our competitors against our website to understand their core differentiators, strengths, and weaknesses to getting closer to our target audience by evaluating what they like, dislike, prefer, and complain about when reviewing competing brands.
Card Sorting​
By this method we understand how users categorize and organize information. This method helps us create a website structure that aligns with users' natural thought processes and expectations. Here are the specific objectives of card sorting:
-
Inform Information Architecture: By seeing how users group information, we could create a logical and intuitive structure for the website, ensuring that content is easy to find.
-
Improve Navigation: Understanding how users expect to navigate through the information helps us designing menus and navigation paths that are straightforward and user-friendly.
-
​
-
Enhance Usability: A structure that matches users' mental models reduces cognitive load, making the site easier to use and improving overall user satisfaction.
​
Cart sorting process:
15 people participated in the online research and were able to create their own categories. The following is a sample of one of the card sorting.​
-
Step 1: Preparation of cards based on user pain points.
-
Step 2: defined and named each category
-
Step 3: Asking participants to sort cards into categories or create new category if they need.
-
Step 4: Analyzing the sorted cards to identify common categories.
we have done this step for each page of website to define what feature or category users expect to see in each page that help them to done their task smoothly.
​
​
Result of card sorting
At the end of this process, we created a chart showing how often each feature was placed under the same categories.Based on this information, we decided to remove features that were less frequently mentioned by participants, ensuring the final site structure aligns with user expectations.This process helped ensure that the site structure aligns with user needs and preferences.
Creating Site map
The following shows the initial stage of the card sorting whole website, the users we got to interview and each of their assortments as well. we created a Site Map based on what that specific user had assorted their cards under.
Usibility Testing
By creating wairefram we start usability testing to evaluates a product by testing it with real users to identify usability issues and improve user experience.
-
Users were asked to perform a series of predefined tasks (like order one product and check out process) that reflect typical actions they would take on the product or website.
-
this tasks cover all major functions and features of the product.
​
Success rate: The percentage of tasks completed correctly was 53%
Time on task: The amount of time users take to complete a task was high.
​
Analysis:
Data collected was analyzed to identify patterns, common issues, and areas for improvement.
Both quantitative data (e.g., task completion rates) and qualitative data (e.g., user comments) are considered.
According to data most of the problem which made user confused was in my order page.
-
​
Design iteration
Addressing Usability Issues Identified in Testing
Based on the problems identified during usability testing, we discovered several key areas needing improvement:​
​
​
Mock up Design
Design iteration
Addressing Usability Issues Identified in Testing
Based on the problems identified during usability testing, we discovered several key areas needing improvement:​
​
Home Page:
​
-
Problem: The home page layout was cluttered, making it hard for users to focus on key tasks. users had difficulty finding order online option in navigation bar
-
Solution: We provided order online button in homepage as CTA button instead of navigation bar
-
Change the navigation bar to navigate smoothly between pages. also we streamlined the content and design of the home page to prioritize essential information and create a more intuitive layout.
Design
First Iteration
Second Iteration
Product Information Page:
​
-
Problem: Product details were not presented clearly, causing user frustration.
-
Solution: We improved the layout and presentation of product information, ensuring users can easily find and understand product details.
Design
First Iteration
Second Iteration
Pick Up Time Adjustment Section:
​
-
Problem: Users struggled to adjust pick-up times, leading to errors and frustration.
-
Solution: We simplified the pick-up time adjustment process, making it more user-friendly and reducing the likelihood of errors.
Design
Iteration
Navigation Bar:
-
Problem: users had difficulty to navigate between page and getting lost during order process
-
Solution:
-
Simplified Navigation Menu:
-
Implement a Clear and Consistent Navigation Bar: Place a fixed navigation bar at the top of each page, including essential links to Home, Menu, Order Online, Contact Us, and User Account.
-
Add Breadcrumbs: Incorporate breadcrumb navigation to help users understand their current location within the website and easily backtrack to previous pages.
-
Streamlined Order Process:
-
Step-by-Step Progress Indicator: Introduce a progress indicator during the order process to show users their current step and the remaining steps, providing a clear sense of progression.
-
Clear and Concise Instructions: Provide clear instructions and tooltips at each step of the ordering process to guide users and reduce confusion.
Design
Iteration
