Problem & Goal
Problem
Long-time residents and newcomers struggle with fragmented transit information spread across navigational apps and local transit websites. Three core frustrations became evident after exploratory research.
- Trip planning and purchasing fare requires navigating multiple apps or websites.
- Commuters lack awareness of alternative transportation methods because these options aren't readily available in the transit apps they use. (scooters, bikes, local rideshare)
- Existing transit apps lack detailed information such as operation times, comprehensive route maps, and visual aids to help riders navigate their city with confidence.
Goal
Develop a comprehensive mobile experience that streamlines purchasing fare, trip planning, and discovering new travel options.
Research & Insights
Exploratory Research
To ensure a research-driven design, I employed several methods throughout the process.
I began with a competitor analysis to assess existing mobile transportation apps. This revealed a lack of end-to-end experiences, where users could purchase fares, explore routes, and plan their trips, all within a single app.
Next, user interviews uncovered the challenges commuters faced and identified potential opportunities to address them. These interviews also informed the development of user personas, reflecting the unique behaviors of local and new-to-Ann Arbor commuters.
Key Takeaways From User Interviews
Long-time residents:
- Focus on traditional transit method, but are open to trying alternative methods of transportation, such as eBikes and eScooters.
- Lack awareness of alternative transportation methods.
- Are largey satisfied with existing schedule information since they are familair with their routes.
Newcomers:
- Struggle with understanding the local transit system and the options they have available to them.
- Experience difficulty finding bus stops and figuring out routes at first.
Overall: Both groups juggled multiple apps/websites for trip planning and purchasing fair, leading to frustration.
Three core frustrations became evident after exploratory research:
- Trip planning and purchasing fare requires navigating multiple apps or websites.
- Commuters lack awareness of alternative transportation methods because these options aren't readily available in the transit apps they use. (ex: scooters, bikes, local rideshare)
- Existing transit apps lack detailed information such as operation times, comprehensive route maps, and visual aids to help riders navigate their city with confidence.
Solutions
- Streamline ticket purchasing. Eliminate app hopping by allowing users to buy fares directly within Town Trekker.
- Aggregate all available transit options (traditional and alternative) to address lack of awareness of alternative options through education within the app.
- Provide comprehensive information about each transit option to increase users' confidence in traveling around Ann Arbor.
- Offer two tailored experiences based on the user's familiarity with Ann Arbor. "Local" & "Visitor" options personalize Ann Arbor transit for residents and newcomers, tailoring information and features for each group's informational needs.
Prototyping & Iteration
With clearly defined target users, and their needs in mind, I entered the iterative design process.
- I began by creating user flows and site maps to visualize the user's journey in the app.
- From here, I sketched out initial screen ideas to explore potential solutions.
- Next, I translated these sketches into low-fidelity wireframes for heuristic analysis, ensuring a strong foundation for the final design.
- Lastly, I created a high-fidelity prototype to be tested with potential users in order to identify any flaws and refine the design.
User Flows & Site Map
Sketches to High-Fidelity
Plan a Trip Start Start Screen Development
Feedback 🧑
3/5 users voiced that they didn’t want to choose settings each time they started a trip. However, they liked that the feature was readily available and not hidden in app settings.
Heuristic Violations ❌
Error Prevention: Constant availability to change settings could lead to accidental changes.
Recognition over Recall: The app fails to remind users of their traveler settings from previous trips. Forgetting these settings can increase users' mental load, leading to a less efficient experience.
Solutions: ✅
Added a "Save" button after a user updates settings. This allows them to solidify their changes.
The option to close the settings from user view was also added. This prevents accidental changes.
Add “Current Selection” information that reminds user’s what option they’ve selected in the past.
Transit Near Me Development
Feedback 🧑
2/5 users indicated they were unlikely to switch the distance measurement to kilometers, reporting preferring to keep it in miles since local transit is measured in miles.
Heuristic Violation ❌
Aesthetic and Minimalist Design: Interfaces should avoid unnecessary information to prevent diminishing the visibility of relevant details.
Solution ✅
Embed this option into the larger settings menu for users to switch between miles and kilometers as needed. This maintains minimalism while giving users control.
Navigation Development
Heuristic Violation ❌
User control and freedom: Secondary navigation was not readily available in the top nav bar, which restricts users' ability to quickly exit unwanted actions or processes.
Fitts's Law 💡
Core features of the app should be quickly and readily available in the bottom nav bar to reduce the amount of time and effort it requires a user to interact with them.
Solutions ✅
A hamburger menu in header was added to provide the user flexibility to navigate away from their current action or flow.
"Near Me" menu item was swapped in for "Settings" in the bottom nav bar.
Key Design Decisions
1. Buy Fare In-App
Feature
This feature introduces a seamless solution to address the disconnection between planning a trip in one app and the inconvenience of purchasing fare through a separate application.
Goals
Significantly reduce the necessity for users to navigate between multiple apps or websites when planning a trip, purchasing fare, and managing their tickets for future use.
Rationale
User Research: 5/6 users agreed that navigating between different apps or websites to purchase fare was a burden and detracted from their overall user experience.
Competitor Analysis: I identified this as a strong opportunity, as I didn't observe this feature available in competitors in the market, such as Google Maps.
.gif)
2. Visitor & Local Settings Available
Feature
Visitor & Local settings on the "plan a trip" start page allows users to toggle between two modes: "Local" and "Visitor," catering to their familiarity with Ann Arbor.
Goals
Acknowledge the diverse needs of both local residents and visitors, ensuring the app caters to their specific requirements.
Optimize the user interface based on familiarity levels, providing advanced features for locals and a simplified, assistive features for visitors.
Rationale
Flexibility & Efficiency of Use Heuristic: Navigation can be carried out in different ways so that people can pick whichever method works for them based on their needs.
User Research: 100% of long-time residents felt that they had a handle on their trips and routes. Coupled with the flexibility & efficiency of use heuristic, I concluded that it would be a good option to personalize people's experiences in-app based on their needs.
3. Tansit Near Me Prioritized
Feature
"Transit Near Me" offers a comprehensive view of nearby traditional and alternative transit options, addressing limited awareness.
Goals
Enhance commuters' awareness of the diverse range of transit options available in Ann Arbor.
Bridge the information gap by offering detailed insights into each transit option.
Rationale
User Research: 4/6 participants desired having all local transit options, both traditional and alternative, aggregated in one source for ease of access and convenience.
Competitor Analysis: Existing transit apps lack detailed information about the available transit options that aid newcomers, such as visual aids, operation hours, and descriptions.
.gif)
Final Deliverables
Style Guide
High-Fidelity Prototype
Retrospective
As my first end-to-end product design project, this was a welcomed challenge. I thoroughly enjoyed the process of taking the research and iterating through each step of the design to make it come to life.
If I had more time to work on this project, I would have expanded accessibility features not only within the app itself but also by integrating information about accessible public transit options for local riders. I would have also loved to delve deeper into the app's visual identity and branding in order to refine the look and feel of the app and elevate the overall user experience.
Background
Our design team devised a product configurator prototype aimed at streamlining the sectional selection process. Key features included fabric and color options, modular configurations, and visualization tools. However, before investing in development, we needed to validate its usability and gather crucial user feedback.
Research Goals
- Importance of Features: Understand which features are most important to people shopping for sofas/sectionals.
- Product Comprehension: Understand how our participants interpret different styles of seating.
- Sectional Shopping Experience: Understand what a customer's first step is as they search for a sectional. (for example, do they look at seating orientation or color first)
- Configurator Experience: Gather feedback on how our participants interact with our configurator versus competitor configurators.
- Points of Confusion: Understand if there’s anything confusing about using our proposed configurator.
- Customer Confidence: Understand the likelihood of a customer purchasing based on their experience with our customization configurator.
Methodology
31 participants were recruited across 3 separate testing rounds.
Unmoderated User Testing: 6 participants
Rationale: This method was used on the company’s prototype in order to gather initial feedback on usability issues and user preferences.
Closed Card Sorting: 15 participants
Rationale: This method was chosen to understand how users intuitively categorize different seating options, which will help us design a more usable and efficient filter for our product configurator. Compared to open card sorting, this method provided a more structured approach and allowed us to gather quantitative data on user preferences.
Competitor Analysis & User Testing: 10 participants
Rationale: This combined approach allowed us to benchmark our design against competitors and identify potential strengths and weaknesses in both competitor designs and our own prototype.
Participant Recruitment
Participants were recruited from UserTesting.com's pool using the criteria of "Broad National Audience." Specifically, we targeted primary decision-makers within households who owned sectionals and fell within the age range of 27-67. This selection aimed to gather feedback on website functionality and fresh perspectives on furniture customization, focusing on individuals who hadn't used online configurators previously. Screener questions ensured these criteria were met.
Broad Nation Audience
- Age: 27-65+
- Own a Sectional
- Primary decision-maker for furniture purchases
Results
The full case study report requires a password for access. Contact me at clarissadiaz8@gmail.com if you have not received one.
View PresentationConclusion
This UX research project successfully evaluated the usability and user experience of furniture retailer product configurators, including both competitor designs and the company's own prototype. By evaluating both competitor designs and our own prototype, our team was able to achieve a solution that meets customer needs, aligns with business requirements, and adheres to technical limitations.
NDA Disclamer
This case study is based on work completed while under a Non-Disclosure Agreement (NDA) with a former employer. As such, certain details have been anonymized or reframed to protect confidential information. The company name has been replaced with "The company" and specific product details, brand names, and logos have been omitted. All insights and findings presented are based on factual data and analysis but do not represent the proprietary information or intellectual property of the company.
Background
The company's current order confirmation page lacked clarity and functionality, leading to customer frustration around order delivery details and missed opportunities. To address this, we conducted a comprehensive UX research project to understand user needs and preferences for an improved order confirmation experience.
Research Goals
- Understand user expectations: Identify what information users want to see and actions they want to perform on the order confirmation page.
- Evaluate the current design: Assess the strengths and weaknesses of the current page in terms of usability, information hierarchy, and overall user experience.
- Test the effectiveness of the redesigned page: Compare the redesigned page to the current version and determine if it meets user expectations and preferences.
- Gather feedback on our delivery copy: Determine if the content we provide around delivery on our order confirmation page is easily understandable.
Methodology
We employed a mix of qualitative and quantitative research methods:
Card Sorting (n=10): To understand user expectations and prioritize information on the order confirmation page, we conducted a card sorting exercise with 10 participants. They categorized cards representing different information elements and features, revealing what they deemed most important.
Rationale: By observing how users group different information elements, we can gain insights into how they perceive the relationship and importance of each piece of information. This helps us optimize the information hierarchy on the page to align with user expectations
Usability Testing:
- General Impressions (n=10): (5 mobile, 5 desktop) Participants interacted with both the current and redesigned versions of the page. They provided feedback on usability, clarity, and perceived value, helping us identify areas for improvement in the redesign.
- Fulfillment Language Testing (n=5): To ensure clear communication around delivery options, 5 participants reviewed various versions of our delivery messaging. This allowed us to refine the language for optimal understanding and user experience.
- Design Comparison (n=10): 10 participants (5 mobile, 5 desktop) directly compared the current and redesigned versions, explicitly stating their preferences and providing reasons for their choices. This helped us validate the effectiveness of the redesign and identify any remaining issues.
Participant Recruitment
Participants were recruited from UserTesting.com's pool using the criteria of "Broad National Audience." The following criteria were used to narrow down our audience along with screener questions.
- Age: 27-65+
- Recent furniture purchase online (within 30 days)
- Primary decision-maker for furniture purchases
Results
The report has been adapted to a PDF from its original format in Notion. For confidentiality reasons, the full case study report requires a password for access. Contact me at clarissadiaz8@gmail.com if you have not received one. Thank you for your understanding.
View WriteupConclusion
The redesigned order confirmation page was a significant improvement over the current version, aligning better with user expectations and preferences. Based on the research findings, we implemented further iterations on the "Preparing for Delivery" section and clarified the functionality of the "Manage Your Order" feature.
Original Wireframes From Client
Final UI Mockups
NDA Disclamer
This case study is based on work completed while under a Non-Disclosure Agreement (NDA) with a former employer. As such, project details have been anonymized and reframed to protect confidential information.
Overview
I led a three-phase research initiative that involved analyzing the competitive landscape, establishing foundational user insights through interviews, and iteratively refining a new customization feature through co-design sessions.
Impact
Insights from this project have contributed to:
- Shaping Pixel’s upcoming strategies for customization and personalization.
- Informing the design of a new customization feature slated for future launch.
