Refining the Design

Mockups | High-fidelity Prototype | Accessibility

Mockups

Early designs were focused on making sure necessary information was able to fit on the home page. After the usability studies immersive imagery was added with the necessary adjustments to text areas to ensure accessibility.

Usability studies showed that a non-functioning calendar confused the users. A fully functioning calendar was added to the prototype, along with more working time-slot options in a proper container to help organize components.

Desktop

Mobile

The vertically stacked mobile version lays out the same information found in the desktop version on a condensed screen.

The gallery features the full mobile home page, and two screen views within a mobile device.

 

High-fidelity Prototype

The final high-fidelity prototype features a cohesive design system and meets the user needs for a straightforward user flow with improved navigation cues.

View the GardenVariety high-fidelity prototype.

This map shows all of the intended interactions and connections between pages in the expanded HiFi prototype.

 

Accessibility Considerations

  1. Ensured color contrast meets WCAG AA standards.

  2. Used icons to improve ease of navigation

  3. used component states to show visual changes when components are highlighted, or selected