Education, Web

Assignment 03.09.02: User Experience Design

Jason W. Howell
August 3, 2018

Goal

The goal of this assign­ment is to enhance user sat­is­fac­tion with a product/experience by improv­ing the usabil­ity, acces­si­bil­ity, and appeal through inter­ac­tion, lay­out and communication.

Objective

Cre­ate a desk­top and mobile web­site that uses a doc­u­mented frame­work, rich media and inter­ac­tive ele­ments to improve the visual appeal and func­tional aspects of a cho­sen site.

Background

Assignment

Redesign a spe­cialty retail site and cre­ate a sta­tic sim­u­la­tion of a typ­i­cal user inter­ac­tion using HTML, CSS and other appro­pri­ate web technologies.

Select a retail site in need of redesign based on usabil­ity and con­tent. Ana­lyze exist­ing shop­ping solu­tions and free frame­works to deter­mine essen­tial items and attrib­utes needed for a suc­cess­ful solu­tion. Once the basic con­tent and orga­ni­za­tion is estab­lished, feel free to sup­ple­ment with addi­tional info (even fic­tional) to com­plete your mock ups. A fully func­tional site is likely beyond the scope of this assign­ment, but a sta­tic demon­stra­tion of key pages is essential.

As a min­i­mum, please include the fol­low­ing pages or series of pages to sim­u­late use:

  • Home page (with navigation)
  • Cat­e­gory selec­tion page
  • Cat­e­gory List­ing page
  • Prod­uct info page
  • Pay­ment pro­cess­ing page (cart)

The site must uti­lize aes­thetic design prin­ci­ples to cre­ate an attrac­tive, yet func­tional solu­tion. The use of a frame­work is rec­om­mended, though the solu­tion should appear cus­tomized for the issue and sub­ject mat­ter. Addi­tional inter­ac­tive JS libraries should be inte­grated into your work-flow to pro­vide increased value, detail or expres­sion dif­fi­cult to com­pre­hend from text alone.

Cre­ate a basic retail site sell­ing spe­cial­ized items from one of fol­low­ing categories:

  • Camp­ing
  • Gen­der spe­cific fashion
  • Sports orga­ni­za­tion fan wear
  • Spe­cialty Food
  • Geek-related gear
  • Sci­ence Supplies
  • Art Sup­plies

Part One

The com­plex­ity of the plan­ning stage is con­sid­er­able more impor­tant for this project than for a basic web page. The orga­ni­za­tion and pre­sen­ta­tion the infor­ma­tion (con­tent) col­lected will make the entire project a suc­cess or fail­ure. If the over­all goal is com­mer­cial (pur­chase), then always strive to col­lect and present your con­tent in a man­ner suit­able to your intended audi­ence. Con­sider how using one of these visual tools can ben­e­fit the shop­ping process. Ana­lyze the life cycle of a typ­i­cal user.

From a design per­spec­tive, con­sider how to orga­nize, fil­ter and select items. Look for frame­works that assist with these tasks. What is nec­es­sary to com­plete a suc­cess­ful trans­ac­tion? What sup­ple­men­tal items are needed to suc­ceed with cus­tomer satisfaction,

Sketch a paper wire-frame lay­out of your pro­posed pages, not­ing basic con­tent, com­mon ele­ments, id’s and markup using one of the tem­plates pro­vided in class. Keep it sim­ple at first and mobile friendly, with 2–3 main columns, before you get com­plex. Cre­ate, acquire or mod­ify exist­ing con­tent to suit your needs, but beware of copy­right restrictions.

Part Two

Build a dig­i­tal wire-frame mock-up in HTML and CSS based on your sketches from part one, includ­ing a mobile friendly ver­sion. Use the style infor­ma­tion pro­vided via the frame­work to assist. Begin to place the appro­pri­ate con­tent in as needed, but the empha­sis is on func­tion not on aes­thet­ics. Save this wire-frame separately. 

If per­ti­nent, inte­grate mechan­i­cal aspects of JS libraries with test data. Trou­bleshoot any com­pli­ca­tions, espe­cially tech­ni­cal inte­gra­tion, and adjust design para­me­ters as necessary. 

Please note, wire­frames should be based on a raw frame­work, and should not entirely use fin­ished, free tem­plates found online.

Part Three

Cre­ate a “final” dig­i­tal aes­thetic mock-up using the Adobe XD, Pho­to­shop or Illus­tra­tor frame­work tem­plates and based on the paper and dig­i­tal wire-frames from Part One and Two. Make care­ful notes of dimen­sions, col­ors, images, file­names and style infor­ma­tion. Easy access of this infor­ma­tion reduces con­fu­sion and speeds production.

Part Four

Using frame­work based files pro­vided via pre­vi­ous lec­tures (or via dis­cus­sion sec­tion for this assign­ment), cre­ate a series of web pages using your con­tent and image(s) sim­u­lat­ing the func­tion of the site. Test in browser often. Once your design is com­pleted, post the files to the appro­pri­ate D2L dropbox.

Assessment

  • The fol­low­ing rubric posted on D2L will deter­mine assign­ment score: Assign­ment 03.09.02: User Expe­ri­ence Design

Techniques

CSS, HTML, plan­ning, con­vert­ing files, file hier­ar­chy, struc­ture, nam­ing con­ven­tions, Baker Frame­work, JavaScript libraries

Supplies

TextE­dit, Dreamweaver, image edi­tor, source files

Deadlines

As defined by cor­re­spond­ing cal­en­dar item, drop­box, dis­cus­sion or con­tent topic description.

Deadlines

Fri­day, July  2, 2021. Assign­ment Given.

Fri­day, July  9, 2021. Part One Due

Fri­day, July  16, 2021. Part Two Due.

Fri­day, July  23, 2021. Part Three Due.

Fri­day, August 6, 2021. Files uploaded to appro­pri­ate D2L Dropbox.