Frys.com

Goal: To find an E-commerce website that is difficult to use, redesign responsive UI’s for all main pages and build a working prototype for user testing.

frys mockups
Platform

Website

Timeline

5 weeks

My role

UI Designer

Tools used

Sketch/HTML/CSS

Design Brief

I began with a heuristic analysis, competitive audit, & identifying target audiences.

Workflows

I created user workflow/flowcharts to visualize user steps needed in order to complete a task or achieve a goal.

workflows image

Usability testing

I created a simple prototype in HTML & CSS and hosted on Github pages. This allowed for fast user testing and feedback.

Low fidelity wireframes

From the user testing feedback, I created low-fidelity wireframes to establish more cohesive structure and added visual elements.

Design comps

  • Home page
  • 1024px
  • 768px
  • 480px
website screen image
website screen image
  • Projects page
  • 1024px
  • 768px
  • 480px
website screen image
website screen image
  • Product details page
  • 1024px
  • 768px
  • 480px
website screen image
website screen image
  • Checkout page
  • 1024px
  • 768px
  • 480px
website screen image
website screen image

Behind the scenes

  • Screen shot of prototype code - HTML & CSS
code screen image
question mark icon

Common Questions about project

I started with a heuristic analysis and created user journey workflows. Then created wireframes, UI designs and developed a working prototype for user testing.

I designed all responsive screens of the user journey in Sketch and developed the prototype in HTML, CSS and hosted on Github.

To fit all product information and website features into user-friendly mobile experiences.