summary	time	deliverables
Create all the stuff IxD before you starting to write any code.	8 hours	1 InVision board, Google Doc, etc.

eCommerce UX

Overview

Throughout the term we’ll be working on the design of a complete website, specifically an eCommerce website.

We’ll be taking the approach of making a pattern library, where each week we’ll be designing different components of the website.

In the second half of the term we’ll take all those common components and use them to build out a home page, and a product list page.

And finally, near the end of the term, you’ll hand your pattern library off to one of your class peers who will create the product details page and your checkout form page.

Before we can get started on that stuff we need to do the UX—you’ll be graded on the completeness of your UX as expected in you IxD class.

The approach & idea

There are a few primary goals to this large-scale assignment:

1. To think in terms of components and pieces instead of pages—major websites are just made up of many, many small pieces; pages are nothing more than groupings of those pieces
2. To start to think about working with other people, and how to create a system that someone else can step into and take over Pretend in this project that you’re the “designer” working on a team—you’re creating a system of possible patterns and some example pages Eventually you’ll hand off the whole system to a “developer” (your peer) to finalize the rest of the pages and make the whole thing work
3. To get lots of practice coding—because you need it

---

Details

The subject matter of the eCommerce website is completely your choice. I’d prefer that you come up with your own company and products to sell—goofy and wacky is obviously preferred.

For the UX, create 1 InVision board (or Google Doc, or AI PDF) with the following pieces of information:

1. Target audience: Who will use your website? Be specific. Personas are encouraged.
2. Website goals: What is your website trying to do? How is it trying to do that?
3. Competitive analysis: Find competitors; What do they do well? What do they do poorly?
4. Sitemap: Include all the possible pages that an eCommerce website would need—but we’ll only be coding a few of them—show how they connect to each other
5. A logo: Must work well (or adapt to) these sizes:
   • 256px wide, height whatever — your primary logo, displaying on the website
   • 64px square — for mobile screens, social profile photos, bookmarks, etc.
   • 32px, 16px square — for favicons.
6. Visual design: Type & type scale, colours, sample components (buttons, cards, etc.), consider accessibility & performance when making decisions; Do some sample patterns in Illustrator/Photoshop/XD to give your coding direction
7. Wireframes: Home page, product list page, product details page (which you will not be coding), checkout form page These should be high-fidelity with some real text—paper is okay but use rulers

---

Marking rubric

Below is the rubric of expectations for this project. You will be assigned a letter grade based on your standing within the rubric.

	0 points	1 points	2 points	3 points
Target audience	Incomplete or missing	Rushed & too generic	Specific but obviously lacking research	Specific and appropriate, with good details
Website goals	Incomplete or missing	Rushed & too generic	Okay, but could be more specific	Specific and cohesive
Competitive analysis	Incomplete or missing	Only one comparison	A couple comparisons but too light on details	A few good comparisons with a goodly amount of details
Sitemap	Incomplete or missing	Has only the pages we’re coding	Lots of important pages missing	Complete, organized and contains all necessary pages
Logo	Incomplete or missing	Only works well at one size	Small sizes are inconsistent with large sizes	Cohesive & uniform for all sizes, even if different
Visual design	Incomplete or missing	Missing important components or poorly executed	Average, could be more cohesive & considered	Cohesive & appropriate with a good sample of components
Home page wireframe	Incomplete or missing	Missing important pieces or poorly executed	Complete but not detailed enough	Complete, detailed, responsive, and a good representation to code from
Product list page wireframe	Incomplete or missing	Missing important pieces or poorly executed	Complete but not detailed enough	Complete, detailed, responsive, and a good representation to code from
Product details page wireframe	Incomplete or missing	Missing important pieces or poorly executed	Complete but not detailed enough	Complete, detailed, responsive, and a good representation to code from
Checkout form page wireframe	Incomplete or missing	Missing important pieces or poorly executed	Complete but not detailed enough	Complete, detailed, responsive, and a good representation to code from
Professionalism	Rushed & poorly done	Okay	Average, could use more time spent	Clearly demonstrated lots of effort and consideration

---

Hand in

1. Create a board on InVision with all the content (or Google Doc, or AI PDF)
2. Submit the document URL online—I will not be downloading any files

Example URL:

https://projects.invisionapp.com/boards/MX1IZXSBQ3AY7

Submit as an Issue

After you’ve forked the ecommerce-pattern-library—in a future lesson—into your GitHub account, create an Issue named “UX”. Paste the URL into the Issue’s description.

Then in the right column, down near the bottom, there’s a “Pin issue” button—this will force the Issue to the top of the Issues page.

I’ll go looking for the Issue when I’m grading.

Discuss with the teacher

During the class that this is due—if we have time—you will show the teacher and discuss with them what you’ve created.