Jala Project 2 Deck
Jala Project 2 Brief

Haba Project 2 Deck
Haba Project 2 Brief

The Problem/Opportunity

With large retailers like Amazon breathing down their neck, smaller retailers have to make some changes to keep up! Your e-commerce retailer is looking to design a new version of their site.

Prompt

You will be designing a clickable prototype around an online shopping experience. Your design should meet the goals of the users (represented by the 3 given personas), the goals of the business, and the goals of the brand. Your designs should be tested by users and follow IA heuristic best practices.

You will be provided with:

• A retailer you are designing for (your “client”)
• 3 Personas

Goals

• Demonstrate your understanding of the UX design process
• Demonstrate your understanding of heuristic best practices
• Demonstrate your ability to create a testable prototype
• Demonstrate your ability to iterate your designs based on testing
• Demonstrate your ability to communicate your research and design concept to a business team
• Demonstrate planning and time management skills while working independently. You will have to make tactful decisions about which activities will provide the best return given very real time constraints.

Requirements

Some prioritization work has already been done with the client. We know that the website:

Must

• Have clear ways of locating specific products
• Support a single page for each product which can be linked to directly
• Have an efficient means of purchasing one or more products
• Steer customers toward popular products
• Maintain consistency with the existing brand
• Allow customers to contact the business

Should

• Allow customers to browse related products
• Allow customers to read and write reviews of a product
• Provide a way to learn about the company
• Reward loyalty for repeat customers

Could

• Allow customers to shop by major brands
• Allow for multiple images per product

Won’t (right now)

• Offer advanced wizard-like ‘product finder’ tools
• Offer advanced search functionality
• Offer online activities unrelated to purchasing products

Deliverables

• 8-minute “client”-facing presentation
• Clickable prototype showing one of your persona’s path from home to checkout
• A single PDF (Upload to the Google Drive by Saturday, April 4th at 3pm)
  • Your presentation slides (with a clickable link to your prototype)
  • Navigation sitemap
  • 3 User flows
  • Annotated wireframes for home, category pages, product pages, and the checkout process
  • Medium fidelity is ok, be cautious on raising it too fast
  • Competitive research summary (including your competitive user flows)
  • Action photos (of you and your users) and artifacts from your iterations

Tools

You must use the following tools to complete your project:

• Omnigraffle (for sitemaps, wireframes, and annotations)
• InVision (for your prototype)

Suggested Timeline

Week 2

Week 3

Suggestions for Success

1. Research your business

Learn your business and brand goals through a variety of research methods:

• Visit the current website to understand how the company is presenting its brand and business Note: While a current website for your retailer does exist, we are not treating this assignment as a redesign project. Refer to the existing website for the sole purpose of understanding the brand and business. Your IA should be based on your sample product inventory of 100 items, not based on the existing site’s organization.
• Visit the physical store (contextual inquiry)
• Generate user flows (e.g. product discovery, checkout) based on three competitor/comparable online experiences
• Perform a heuristic evaluation of the three user flows

2. Create a navigation sitemap

Work with other students assigned to your retailer to create a sample cross-section of 100 products. You’ll each choose 20 products from the retailer’s brick and mortar store, then combine and whittle them down to 100 (this is where group work ends).

Using 100 products as a guide, you will each organize the site into logical and meaningful categories which help customers to find what they need, and understand what they have found.

We’ll be covering a few types of sitemaps. At a minimum, you are responsible for creating a navigation sitemap (using Omnigraffle) that shows how your sample products would be found by a user.

3. Create wireframes

Wireframes communicate relative priority and layout of page elements to provide a general sense of how a page may look. Your wireframes should be made using Omnigraffle, and be inclusive of your primary persona’s path from home to checkout and include:

• Global elements (appear in the same place on all pages), such as the header and the footer
• Common elements (appear contextually on certain pages), such as secondary navigation, page titles, breadcrumb navigation, pagination controls
• Custom elements (appear uniquely on specific page templates), such as product photos and descriptions, calls-to-action, pricing and sizing options, forms, related content

Specific wireframes should at least include:

• Home page: Establishes the site proposition, brand personality, and global navigation, and offers new and returning users enticing calls-to-action to tempt them further into the site.
• Product category page: Showcases all available products in a category (such as ‘board games’) and allows for filtering of results where appropriate.
• Product detail page: Describes a specific product and provides options to purchase.
• Shopping cart: Details the products a user has chosen to purchase, allows for some editing of those products, and for the user to proceed to the checkout process.
• Checkout pages: A linked series of form-based steps focused on successful completion of the transaction, including capturing personal details, card details, delivery options, and account creation.

4. Create a clickable prototype to test with as many users as possible

• Using InVision, link your wireframes together to allow a test participant to complete the journey from home to checkout (based on your primary persona)
• Conduct usability tests with as many users as possible
• Iterate on your designs (and be able to communicate what you changed and why)

5. Create User Flows

• Using Omnigraffle, create 3 user flows (annotated based on heuristic evaluations) showing how users (based on the three given personas) would move through your site, including product discovery, checkout, and a 3rd flow of your choice
• Your deliverable should compare your new annotated user flows with the ones you researched and annotated in Step 1.

6. Tell the story of your design process

• Create an 8-minute presentation as if you were presenting to your “client”
• Tell the story of your design process, making sure to frame your decisions through the lens of the business goals, brand goals, personas, and your testing findings
• Your presentation should include demonstration of how one of your personas would use your website (using your prototype)

Evaluation

Your project will be evaluated by your instructors in the following areas:

• User research
• Synthesis & Iteration
• User Interface Design & Interaction Design
• Use of Tech & Tools
• Design Communication
• Professional Skills