Week 9 - Designing Effective Navigation

Objective:

To design intuitive and effective navigation systems for both a web and mobile application. This assignment will help you understand the key differences and considerations when designing for different platforms.

Assignment Overview:

You are tasked with designing the navigation for a fictional e-commerce platform, "ShopEase". Your designs should cater to both web and mobile users, providing a seamless and user-friendly experience across both platforms.

Requirements:

1. Market Research:

   • Compare at least two e-commerce sites and apps that you use both on web and mobile with a focus on how navigation is handled.

2. Content Inventory and Sitemap:

   • List all the primary sections and pages of the e-commerce platform you want to create (ex: Home, Shop by Category, Deals, Cart, Profile, Customer Support).
   • Create a detailed sitemap that outlines the hierarchy and structure of these sections.

3. Web Navigation Design:

   • Design a navigation system for the web version of ShopEase.
   • Include elements such as a global navigation bar, dropdown menus, and any secondary navigation components.
   • Consider the use of breadcrumbs, sidebars, and footer links if applicable.
   • Create wireframes/mockups of at least three key pages (e.g., Home, Category Page, Product Page) showing the navigation in context.

4. Mobile Navigation Design:

   • Design a navigation system for the mobile version of ShopEase.
   • Use mobile-friendly navigation patterns such as a hamburger menu, bottom navigation bar, and in-app search.
   • Ensure touch targets are appropriately sized and interactions are optimized for mobile users.
   • Create wireframes/mockups of at least three key pages (e.g., Home, Category Page, Product Page) showing the navigation in context.

5. Usability Testing & corrections:

   • Conduct usability testing with at least 2 participants to gather feedback on the navigation systems.
   • Re-iterate on your design and implement enhancements based on the feedback you receive.

Deliverables:

1. Sitemap.
2. Wireframes/mockups for web navigation.
3. Wireframes/mockups for mobile navigation.
4. Prototype your navigation, connect the links to make sense of the flow. Share your prototype link in the submission.

Please note that the focus in the mockups is mainly navigation. Other page items can be borrowed from community or simply wireframe placeholders.

Grading Criteria:

• Sitemap (20%): Clarity and logic of the content structure.
• Web Navigation Design (30%): Usability, completeness, and alignment with best practices.
• Mobile Navigation Design (30%): Usability, completeness, and alignment with best practices.
• Connected Prototype(20%): showing the flow and in case of mobile correct animations (instant vs slide) as demonstrated in class to navigate.