REDESIGN OF THE NAVIGATION BAR & FULFILLMENT METHOD SELECTOR
NEW NAVIGATION MENU BAR
ISSUES
-
Ineffective way of displaying the category links making it harder to identify elements and impacting overall navigation.
Poor visual hierarchy through features, distracting users from important navigation options.
-
Ineffective way of displaying the fulfillment method bar (bottom of the page), increasing friction during the shopping experience and checkout.
-
Lack of accessibility when using only icons for links on desktop, making it difficult for people with reading disorders to use screen readers.
Old navigation version
SOLUTION
A revamped navigation bar that not only enhances the visual appeal but also significantly improves user experience.
Clear Fulfillment Method:
One of the key features of the new navigation bar is the incorporation of a clear fulfillment method next to the logo. Users can now easily identify the fulfillment method chosen. This ensures that users can effortlessly change the way they want their orders.
Important links are attached together on one side:
I've grouped important links together, enhancing the overall organization and accessibility of the navigation bar.
Text for Account Links for Accessibility:
Accessibility is a top priority, and I've implemented text for account links to enhance the experience for users relying on screen readers.
Visible Bag Icon:
To provide users with immediate feedback on their shopping actions, I've made the bag icon more prominent when a product is added.
I believe that this redesigned navigation bar not only meets aesthetic standards but also significantly contributes to a more user-centric and accessible digital environment.
New Navigation Menu Bar
NEW FULFILLMENT METHOD SELECTOR
SOLUTION
In our pursuit of seamless user interactions, I've worked on reducing friction in the fulfillment process. No more cumbersome steps or intrusive modals – the pathway to selecting pickup or delivery options have been refined for a smoother and more user-friendly journey.
Page, Not a Modal:
I've transitioned the fulfillment methods from pop-up modals to dedicated pages. This deliberate design choice provides a spacious canvas for users to explore methods, ensuring a comprehensive understanding of the available options without compromising the navigation.
Map Integration (Desktop Version):
Recognizing the importance of user convenience, I've integrated an interactive map feature, particularly tailored for desktop users. This functionality allows users to effortlessly locate and explore nearby store locations, facilitating a more informed decision-making process.
Product Lists and Store Hours:
Transparency is key, and I've incorporated detailed lists of available products and store hours for each pickup location. This addition empowers users with the ability to plan their visits efficiently, enhancing the overall user experience.
I believe the design choices contributed to a more intuitive, informative, and enjoyable fulfillment method selection process. It's not just about functionality; it's about crafting an experience that aligns seamlessly with user needs and expectations.
Old fulfillment method modal
New fulfillment method Page
CHALLENGES
Navigation Menu Bar Redesign
Crafting a new navigation menu bar presented a unique set of challenges. Balancing aesthetics with functionality demanded careful consideration. I endeavored to create an interface that not only aligned with visual standards but also intuitively guided users through the various sections of the platform.
New Fulfillment Method
The challenge extended to developing a dedicated page for the fulfillment method feature. Designing an interface that seamlessly transitioned users from the main platform to a specialized page demanded strategic thinking. I focused on creating a page that not only visually appealed to users but also provided a comprehensive overview of fulfillment options.
Navigating these challenges involved collaborative efforts and iterative design processes, prioritizing user feedback to refine the interfaces continually. The result is a navigation menu bar and fulfillment method page that not only meets functional requirements but also enhances the user experience through a harmonious blend of form and function.