Resolving Navigation & Accessibility for UrbanVault’s New Website Design

TIMELINE

Dec 2022- Jan 2024

PLATFORM

Web Design & Development

MY ROLE

Lead UX/UI Designer

Introduction

UrbanVault, a leading provider of urban lifestyle products, faced a critical challenge: their website’s navigation was difficult to follow, and many users struggled with accessibility barriers. These issues led to high bounce rates and a decline in user engagement, preventing UrbanVault from delivering a seamless experience for all visitors.

This case study explores how UrbanVault’s website redesign tackled these challenges head-on. By simplifying the navigation structure and implementing accessibility improvements, the redesign aimed to create an intuitive, inclusive experience. We’ll delve into the design process, key changes implemented, and the positive impact these enhancements had on both usability and customer satisfaction. This transformation reflects UrbanVault’s commitment to providing a user-friendly environment that caters to a diverse audience, ultimately driving engagement and customer loyalty.

My Role

As the Lead UX Designer for UrbanVault’s website redesign, I identified navigation and accessibility issues and implemented solutions to enhance the user experience. I restructured the site’s layout for easier navigation and made accessibility improvements, including optimizing color contrast and keyboard navigation, ensuring the site was inclusive for all users. Through user testing and iteration, I helped create a seamless, user-friendly experience.

Research & Discovery

We conducted user research and competitor analysis to identify navigation and accessibility issues, ensuring the redesign would meet user needs and accessibility standards.

User Research

We gathered insights from user surveys and interviews to identify navigation difficulties and accessibility barriers, guiding the redesign for a more intuitive experience.

User Research

We gathered insights from user surveys and interviews to identify navigation difficulties and accessibility barriers, guiding the redesign for a more intuitive experience.

User Research

We gathered insights from user surveys and interviews to identify navigation difficulties and accessibility barriers, guiding the redesign for a more intuitive experience.

Below are some of the problems that users are currently having with the site.

"The navigation feels confusing and cluttered."

Users reported difficulty finding specific sections due to unclear labeling and complex menu structures.

"The font size is too small to read comfortably."

Accessibility-focused users highlighted that text and contrast improvements made the platform more comfortable to read.

"The color contrast makes it hard to read."

Low contrast between text and background colors made readability a challenge for some users.

"It’s difficult to use with a screen reader."

Users relying on screen readers struggled due to a lack of proper alt text and labeling on key elements.

Accessility Audit

We also gathered insights from user surveys and interviews to identify navigation difficulties and accessibility barriers, guiding the redesign for a more intuitive experience.

Accessility Audit

We also gathered insights from user surveys and interviews to identify navigation difficulties and accessibility barriers, guiding the redesign for a more intuitive experience.

Accessility Audit

We also gathered insights from user surveys and interviews to identify navigation difficulties and accessibility barriers, guiding the redesign for a more intuitive experience.

Competitive Analysis

We gathered insights from user surveys and interviews to identify navigation difficulties and accessibility barriers, guiding the redesign for a more intuitive experience.

Competitive Analysis

We gathered insights from user surveys and interviews to identify navigation difficulties and accessibility barriers, guiding the redesign for a more intuitive experience.

Competitive Analysis

We gathered insights from user surveys and interviews to identify navigation difficulties and accessibility barriers, guiding the redesign for a more intuitive experience.

Defining the problem

In this phase, we created user personas, mapped out user stories, and formulated a clear problem statement to address key navigation and accessibility challenges, ensuring the design would meet both user needs and business goals.

User Personas

Our users include individuals with varying abilities, prioritizing clear navigation and accessible design to easily complete tasks on UrbanVault.

User Personas

Our users include individuals with varying abilities, prioritizing clear navigation and accessible design to easily complete tasks on UrbanVault.

User Personas

Our users include individuals with varying abilities, prioritizing clear navigation and accessible design to easily complete tasks on UrbanVault.

The Accessibility Advocate

An individual passionate about digital inclusion—Emily is a content strategist who relies on screen readers and keyboard shortcuts to navigate websites. She values clear, simple designs that prioritize accessibility for all users.

JOBS-TO-BE-DONE

When I access a website, I want to easily navigate through content using assistive technologies, so I can quickly find the information I need without frustration.

The Time-Conscious Professional

A busy, results-driven individual who values efficient navigation—Chris is a financial analyst who frequently uses UrbanVault to access reports and resources. He needs fast, intuitive navigation that helps him find information without wasting time.

JOBS-TO-BE-DONE

When I visit the platform, I want an intuitive navigation system, so I can quickly access the tools and reports I need without unnecessary clicks.

UrbanVault’s existing platform faced challenges with both navigation complexity and accessibility, creating friction for users with varying needs. Through research and user feedback, it became clear that improvements were needed to create a more seamless and inclusive experience. This led us to identify key areas for redesign to ensure that all users could navigate the platform efficiently, regardless of their abilities or technical expertise.

Defining the Problem

How might we simplify UrbanVault’s navigation and improve its accessibility to ensure all users, including those with disabilities, can easily find and interact with key resources?

Ideation & Concept Development

We brainstormed design solutions to improve navigation and accessibility, focusing on simplicity and user-friendliness for all users.

Brainstorming

In the brainstorming phase, we gathered key stakeholders and the design team to generate ideas for improving navigation and accessibility. We explored various approaches, such as simplifying the menu structure, introducing clear visual hierarchy, and implementing keyboard navigation and screen reader support. Each idea was assessed based on user feedback, technical feasibility, and adherence to accessibility guidelines.

Brainstorming

Wireframing

We created low-fidelity wireframes to visualize the navigation layout and test design concepts quickly.

Wireframing

We created low-fidelity wireframes to visualize the navigation layout and test design concepts quickly.

Wireframing

We created low-fidelity wireframes to visualize the navigation layout and test design concepts quickly.

Sitemap

We mapped out the platform's information architecture to ensure intuitive, accessible navigation.

Sitemap

We mapped out the platform's information architecture to ensure intuitive, accessible navigation.

Sitemap

We mapped out the platform's information architecture to ensure intuitive, accessible navigation.

Design

We created high-fidelity mockups, focusing on intuitive navigation and accessibility, while refining visual elements for a user-friendly interface.

Low-fidelity

We developed low-fidelity mockups to establish basic layout and navigation concepts, focusing on functionality and user flow before refining visual details.

Low-fidelity

We developed low-fidelity mockups to establish basic layout and navigation concepts, focusing on functionality and user flow before refining visual details.

Low-fidelity

We developed low-fidelity mockups to establish basic layout and navigation concepts, focusing on functionality and user flow before refining visual details.

While creating high-fidelity mockups, we prioritized accessibility by incorporating features like clear contrast, screen reader compatibility, and keyboard-friendly navigation, ensuring the design met usability needs for all users.

High-fidelity

We created high-fidelity mockups with refined visuals, ensuring the navigation was intuitive, accessible, and aligned with the overall user experience goals.

High-fidelity

We created high-fidelity mockups with refined visuals, ensuring the navigation was intuitive, accessible, and aligned with the overall user experience goals.

High-fidelity

We created high-fidelity mockups with refined visuals, ensuring the navigation was intuitive, accessible, and aligned with the overall user experience goals.

Usability Testing

We conducted usability tests with a diverse group of users to evaluate the effectiveness of the new navigation and accessibility features. Feedback was gathered on ease of use, accessibility, and overall satisfaction, allowing us to make final adjustments to enhance the user experience.

User Testing

In user testing, we evaluated the updated design with real users to assess navigation ease, accessibility features, and overall satisfaction. Feedback on the new layout and accessibility improvements allowed us to make targeted adjustments, ensuring an intuitive, user-centered experience for all.

User Testing

Accessibility Testing

We conducted accessibility testing to ensure the platform was usable for individuals with varying abilities. This involved testing screen reader compatibility, keyboard navigation, and color contrast compliance, allowing us to identify and resolve any barriers to accessibility. The insights helped us refine the design to create an inclusive experience for all users.

Accessibility Testing

User Feedbacks

During usability testing, users provided valuable feedback, praising the improved ease of navigation, enhanced readability, and keyboard accessibility. Accessibility-focused users noted better screen reader compatibility and clearer contrast, though some suggested further icon refinement for clarity. This feedback guided our final adjustments, ensuring the platform was both intuitive and inclusive.

User Feedbacks

"It’s much easier to find what I need now!"

Users appreciated the streamlined navigation and reported that key sections were quicker to access.

"The contrast and font size make a big difference."

Accessibility-focused users highlighted that text and contrast improvements made the platform more comfortable to read.

"I love that I can use keyboard shortcuts!"

Users who rely on keyboard navigation were pleased with the increased ease of moving through the platform.

"It takes too many clicks to complete a task."

Users found the workflow inefficient, citing frustration with the number of steps needed to accomplish simple actions.

Iteration & Final Designs

Based on feedback from usability and accessibility testing, we refined and improved key aspects of the design. This iterative process allowed us to address user pain points, enhance accessibility, and ensure that the final product was intuitive and user-friendly.

Homepage

Redesigned for clarity and accessibility, the homepage provides users with a personalized experience, featuring clear calls-to-action and intuitive navigation.

Homepage

Redesigned for clarity and accessibility, the homepage provides users with a personalized experience, featuring clear calls-to-action and intuitive navigation.

Homepage

Redesigned for clarity and accessibility, the homepage provides users with a personalized experience, featuring clear calls-to-action and intuitive navigation.

Dashboard

A streamlined dashboard that highlights key metrics and frequently used features, with improved accessibility features for screen readers and easy-to-read visuals.

Dashboard

A streamlined dashboard that highlights key metrics and frequently used features, with improved accessibility features for screen readers and easy-to-read visuals.

Dashboard

A streamlined dashboard that highlights key metrics and frequently used features, with improved accessibility features for screen readers and easy-to-read visuals.

Implementation & Handoff

Here, collaborated closely with developers to ensure the design was accurately translated into the final product. Accessibility guidelines and design specs were documented in detail, allowing for a smooth handoff. We provided ongoing support, testing, and quality assurance to address any issues and ensure a polished, user-centered final product.

Design Handoff

During the design handoff, we delivered detailed design specs, accessibility standards, and interactive prototypes to the development team. We ensured all visual, interactive, and accessibility elements were well-documented, facilitating a seamless transition from design to development. Regular check-ins and feedback loops helped maintain design fidelity and address any technical challenges.

Design Handoff

Collaboration with Developers

We worked closely with developers, sharing design assets and accessibility guidelines to ensure accurate implementation. Regular feedback sessions helped address technical challenges and maintain design consistency throughout the process.

Collaboration with Developers

A simplified and revamped, personalized meal selection screen that allows users to quickly filter meals based on dietary preferences, making it easy to find and choose options that match their needs.

Quality Assurance

We tested the design across different devices and browsers to ensure functionality and consistency. We focused on validating accessibility features, navigation, and overall user experience, addressing any issues before the final launch to ensure a seamless product.

Quality Assurance

Final Launch

After thorough testing and refinements, the redesigned platform was successfully launched. The final product featured improved navigation, enhanced accessibility, and a more intuitive user experience, ensuring it met the needs of all users.

You can view the final launched website here!

Maintenance & Updates

Following the launch, we established a plan for ongoing maintenance and updates to ensure the platform remained functional and up-to-date. Regular monitoring for accessibility issues, performance improvements, and user feedback will guide future enhancements and ensure continued usability.

Bug Fixes

We actively monitored the platform for any bugs or technical issues. When issues were identified, we prioritized and resolved them quickly to ensure a smooth and uninterrupted user experience, maintaining the platform’s performance and accessibility.

Bug Fixes

Continual Updates

We committed to ongoing updates to keep the platform aligned with user needs and industry standards. These updates include improvements to functionality, performance, and accessibility, based on user feedback and evolving best practices to ensure long-term usability and satisfaction.

Continual Updates

Learnings & Future

LEARNINGS

User Testing is Crucial

Conducting early and iterative user testing helped us uncover pain points and fine-tune features before launch, ensuring a smoother experience for all users.

User Testing is Crucial

Conducting early and iterative user testing helped us uncover pain points and fine-tune features before launch, ensuring a smoother experience for all users.

User Testing is Crucial

Conducting early and iterative user testing helped us uncover pain points and fine-tune features before launch, ensuring a smoother experience for all users.

Accessibility Benefits Everyone

Improving accessibility not only made the platform more inclusive but also enhanced usability for all users, leading to higher satisfaction and engagement.

Accessibility Benefits Everyone

Improving accessibility not only made the platform more inclusive but also enhanced usability for all users, leading to higher satisfaction and engagement.

Accessibility Benefits Everyone

Improving accessibility not only made the platform more inclusive but also enhanced usability for all users, leading to higher satisfaction and engagement.

FUTURE

Mobile Optimization

Future updates will focus on improving mobile responsiveness and enhancing the mobile user experience to ensure seamless access across all devices.

Mobile Optimization

Future updates will focus on improving mobile responsiveness and enhancing the mobile user experience to ensure seamless access across all devices.

Mobile Optimization

Future updates will focus on improving mobile responsiveness and enhancing the mobile user experience to ensure seamless access across all devices.

Advanced Personalization Features

We plan to introduce more personalized content and recommendations based on user preferences and behaviors, enhancing user engagement and satisfaction.

Advanced Personalization Features

We plan to introduce more personalized content and recommendations based on user preferences and behaviors, enhancing user engagement and satisfaction.

Advanced Personalization Features

We plan to introduce more personalized content and recommendations based on user preferences and behaviors, enhancing user engagement and satisfaction.

This project has been an incredibly rewarding experience! I'm grateful for the opportunity to collaborate with talented colleagues in design and development, and I've learned so much through this process of enhancing accessibility and improving navigation for UrbanVault's users.