Design
Iterating on the structure
I had 2 white boarding sessions with the UX Director to decide on different content sections we want to have based on preliminary research. We explored different page layout and tested 2 promising ones against each other on usertesting.com.
Learning: Participants appreciate the cleanness of the horizontal layout, they think the structure is more clear and the content is easy to digest. In terms of content, people wants to see product pricing sooner and seek to understand why we recommend certain products to them.
Decisions: We decided on horizontal layout because it is more scalable and easier for our customers to consume the content.
Localization and personalization make Jet different
After extensive user testing and getting insights from research team, we decided to move with bringing more localization and personalization content in our product recommendations. These are Jet's major differentiator to other e-commerce company.
Introducing a new Jet
The new Jet.com refocuses in the Metro Customer. Assortment and the need to craft stories through product become priorities. It is more humanized and editorial.
Responsiveness
A new Jet Design System was created
To give our customer a consistent look and feel as well as elevate the whole site experience with a bold, inspirational and human look and feel, when we finished the homepage UI iteration, we decided to create Jet Design System. By having a design system, we can also unite teams around a common visual language and create a scalable, reusable and standardized component to improve the development efficiency. I worked with another senior UI designer on laying the foundation of building JDS.
Principles: Playful, Elevated, Scalable
Playful is the Jet way. We want to emphasize contrast, use colorful and bold element. We also want it to be elevated and facilitate story-telling, so that we can provide curated assortment for urban millennials. A design system should also scale. we want to design clean and reusable component to avoid design debt.
Typeface: Bloomfield
We collaborated with a 3rd- party agency for a new typeface: Bloomfield. Compare to our previous typeface Graphik, which is generally appreciated for its great plainness and versatility, the boldness, friendliness and the strong contrast Bloomfield brings better matches Jet's updated brand image. It also allows us to create an editorial and elevated environment for our curated assortment. We created the different size and weight variations to meet accessibility standards.
Colors
We used Jet purple as the primary color for actionable UI within a page for main buttons and links. This color has a high contrast to make it accessible and to create consistent navigation patterns. Being the main color of our brand, it can also be used in bars or areas to ground the user in Jet (Example: Top Nav Bar). We used lighter or darker versions of Jet Purple only for alternate states (focus, rollover) or to create depth in bars or icons. We also chose a set of colors for accents and alert messaging.
Layout
Our main color is Jet Purple, but we have a wide palette to facilitate accessibility, visual hierarchy and messaging.
Spacing: All spacing for components and typography is done in increments of8 pixels. This 8px value forms the basic unit of measurement for spacing. 8px =0.5rem.
Density: For Browsing pages we use mostly a low density layout with wider margins and paddings (96px, 56px, 48px, 40px, 32px). For high functional and transactional pages we use mostly a high density layout with tighter margins and paddings (24px, 16px, 8px).
Flex-Box: Is a set of properties that determine the way the components behave. Most of our items have a fixed margin between them and a variable width, occupying 100% of the container
Modules
I worked specifically on the deals module, explore module and product carousel among 12 JDS module collections. I also collaborated with creative team to define the image safe area and content team to define the content rules. We use Zeplin to hand off the design to the engineering team.
Accessibility
We collaborated with Perkins School for the Blind to review the visual accessibility aspects of our new design, including color contrast, font size, buttons, navigational elements, etc. The goal is to make a POUR (Perceivable, Operable, Understandable, Robust) site. After the review, we summarized our changes in 5 following categories.
Minimum Contrast ratio 5, between foreground and background.
Be aware of using text on a background image
Minimum 13px, but allowing exceptions for legal text (10px)
Differentiate links with text component by styling link with carrot, underline or increasing font weight
Make sure a minimum clickable area of 24px.
Available actions must be accompanied with clear visual indication.
