Course Project - Web and Mobile Design Techniques
Wool 'n Things

For this project, I had to choose a small local business that had a website, but no online shopping function. I chose a small yarn and knitting supplies store in the east end of Ottawa called Wool 'N Things. I had to create a business model, a design strategy, a user persona with an accompanying scenario, a user experience map, and a wireframe mockup of the site.

Skills & Technologies

  • UX
  • Persona
  • Scenario
  • Task Flow
  • Wireframing
  • User Experience Mapping
  • Balsamiq

Persona & Scenario

After creating a business plan and design strategy, I created a user persona and scenario. In the scenario, Cassandra is looking to purchase some good quality, unique yarn for a project.

Wool n' Things persona named Cassandra.
Wool n' Things scenario.

Task Flow

Based on the scenario, I created a user task flow for making a purchase on the Wool 'N Things website.

Wool n' Things task flow for making a purchase.

User Experience Map

I developed this user experience map to illustrate the experience of buying an item on the Wool 'N Things website.

Wireframe for the yarn page of the Wool n' Things e-commerce site.

Wireframes

For the final assignment of the course, I have to create a wireframe mockup of the main screens for the Wool 'N Things e‑commerce site. I used Balsamiq to create five annotated screens that demonstrate the main transaction flow for the website.

Wireframe for the yarn page of the Wool n' Things e-commerce site.
Wireframe for the cart page of the Wool n' Things e-commerce site.
Account sign in and creation page of the Wool n' Things e-commerce site.
New account details page of the Wool n' Things e-commerce site.
Wireframe for the order review page of the Wool n' Things e-commerce site.