Lenovo — Heuristic Evaluation & UI Kit

I conducted a heuristic evaluation which is the process of evaluating the usability of a product. I worked alongside two other designers where we explored Lenovo’s website and if it complied with the 10 usability principles. After we broke down the process and developed a UI kit based on Atomic Design.

10 Usability Principles

Lenovo’s main evaluators

  • 4- Consistency and standards
  • 7- Flexibility and efficiency of use
  • 8- Aesthetic and minimal design

Chosen user: As a student, I am looking for a school laptop with touch-screen capabilities all within my budget of $1,500.

Product Usability Score — 3/4

Major usability concerns

  • significant errors in the task flow laid out for our chosen user
  • some major issues that impede user experience
  • many minor and cosmetic errors that accumulate to be a larger issue.
  • a couple of problems that are catastrophic in the user flow

Redesign 1 — Homepage

Heuristics broken: Aesthetic and minimal design

Redesign 2— Laptops Page

Heuristics broken: Aesthetic and minimal design & flexibility and efficiency of use.

Redesign 3—Dropdown menu

Heuristics broken: Aesthetic and minimal design & flexibility and efficiency of use.

Redesign 5— Touchscreen Icon

Heuristics broken: Aesthetic and minimal design & consistency and standards.

Redesign 6—Laptop Series Page

Heuristics broken: Aesthetic and minimal design & Flexibility and efficiency of use

Redesign 7— 1-Page Scroll

Heuristics broken: Aesthetic and minimal design, Flexibility and efficiency of use.

UI Kit

After completing the redesign, I moved forward with creating a UI library of all the components involved with the redesign so they would be of perfect use to a developer. This was designed through Atomic Design which is the process broken into Atoms, Molecules, Organisms, Templates, and pages.

** Pages are the final design shown above.**

1. Atoms

2. Molecules

3. Organisms

4. Templates

Product Designer living in Toronto