top of page
Top
Zenni My Account Pages 

Updating My Account Pages using Zenni Design System 

Zenni Design System.png
SUMMARY

Overview

As a Designer in the Design System team, part of my responsibilities was to create reusable components based on WCAG (Global accessibility standards) and implement the updated components in the pages. This project showcases my design contributions to updating Zenni's My Account pages. I led the design for more than 30 pages and 50 components for 1 month.

Outcome​

  • Helped the design team in rapid prototyping and testing
  • Having a more professional UI design with the minimum dev efforts

List of changes​

  • Updated the UI for large (1440) and small (390) breakpoints.

  • Adjusted layout to be multiples of 8.

  • Updated colors and fonts.

  • Improved hierarchy and visual weight of elements. I got rid of the teal color as much as possible to have a more minimal design.

  • Made minor UX enhancements with minimal development effort.

DESIGN
Responsible design.gif

I created responsive components for different breakpoints

Responsive mobile design.gif
BEFORE
  • While I kept the teal color as the Zenni brand color, I minimized its usage for dividing lines to achieve a minimal and desirable UI.

  • Red flags showed the area I improved.

AFTER
Zenni rewards_Claim rewards_ 1443 (1).png
BEFORE
screencapture-zennioptical-myAccount-myFavorites-2023-10-23-10_51_08 3 (1).png
AFTER
My favourites_1440.png

I updated the product details to give the user more info.

BEFORE
Order track page (before).png
AFTER
Order track page (before).png

I Improved the visibility of the important links by changing them to the primary buttons.

bottom of page