UX from Start to Finish

A quick run through a simple product site. From concept, to wireframe.

What do you want to do/accomplish?

- Selling a product on a website (blankets)

What’s the options/configurations?

- Products and configurations

Product choices

How will the user interact with it?

- Pick Product, Select Size, Select pattern, get Price

Interaction Flow

Pages to support interaction.

- landing page
- Product page
- Checkout page

What else will the user want to know or do to make the sale?

- About 
- Contact info
- FAQ
- Return policy
- Blog (social media/content marketing)

Inspiration / examples

- MonoPrice.com

Monoprice checkout
  • Tesla
Tesla Landing page
  • Pillpack
- pillpack landing page
  • atlas
Atlas landing page
  • designmodo
deisgnmodo product page
designmodo product page
designmodo landing page
designmodo product page

Style Goal

  • Simple
  • Clean
  • Modern
  • Minimal

Wireframe

  • Landing

Markup to explain the components in a little more detail

  • Product
Product page wireframe

Markup to explain in detail the areas

product page markup
  • Checkout
checkout wireframe

Markup to explain in detail the area

Checkout markup

Interactive high fidelity Mockups

  • Landing page
  • Product page
  • Checkout

Prototype

  • Hosting
  • Framework
  • Checkout

Copywriting

One clap, two clap, three clap, forty?

By clapping more or less, you can signal to us which stories really stand out.