UX/UI
Clinic Locator
ROLE
Product Designer
TEAM
Omar Achkar (Developer)
TOOLS
Figma, Snazzy Maps, Google Maps API, VWO
STATUS
Completed
Product Designer
TEAM
Omar Achkar (Developer)
TOOLS
Figma, Snazzy Maps, Google Maps API, VWO
STATUS
Completed
PROJECT OVERVIEW
The CLS Health website’s specialty pages struggled to provide users in finding which clinic locations offered their search of specialty. Without a clear list or map of clinics, users had to leave the site to search manually (Google Maps, Apple Maps, etc.), often leading to confusion and drop-offs before booking an appointment. Clinic Locator was designed to allow users to easily view, filter, and map all clinics associated with a specific specialty — directly within the specialty page. The goal was to simplify the path from exploring care options to scheduling a visit.
The CLS Health website’s specialty pages struggled to provide users in finding which clinic locations offered their search of specialty. Without a clear list or map of clinics, users had to leave the site to search manually (Google Maps, Apple Maps, etc.), often leading to confusion and drop-offs before booking an appointment. Clinic Locator was designed to allow users to easily view, filter, and map all clinics associated with a specific specialty — directly within the specialty page. The goal was to simplify the path from exploring care options to scheduling a visit.
PROBLEM
Patients visiting the specialty pages were unable to easily locate nearby clinics that offered the services they needed. Each specialty page provided only general introduction, providers, and insurance information without showing which clinic locations offered that specialty. This vague search earlier on the journey caused drop-offs before booking appointments and friction in transferring users to the next step in completing the end-goal action.
Vague searching
Patients visiting the specialty pages were unable to easily locate nearby clinics that offered the services they needed. Each specialty page provided only general introduction, providers, and insurance information without showing which clinic locations offered that specialty. This vague search earlier on the journey caused drop-offs before booking appointments and friction in transferring users to the next step in completing the end-goal action.
DESIGN
taking from the design system
Location Cards List & Map
taking from the design system
Location map
Left option makes users who are majority right-handed convenient to toggle between the two states however, it composed concerns on fat-finger and not giving adequate territory for ease of loose targeting.
ITERATION
Left option makes users who are majority right-handed convenient to toggle between the two states however, it composed concerns on fat-finger and not giving adequate territory for ease of loose targeting. The selected right option stretches the toggle across the width of the screen and addresses the concerns of fat-finger and optimize mobile real estate for more convenient switch between the two states.
Mobile Toggle
Left option makes users who are majority right-handed convenient to toggle between the two states however, it composed concerns on fat-finger and not giving adequate territory for ease of loose targeting. The selected right option stretches the toggle across the width of the screen and addresses the concerns of fat-finger and optimize mobile real estate for more convenient switch between the two states.
The mint and white background is too subtle and did not visually create a starker difference to highlight the chosen state. T
he button as mint behind a white background worked better to create visual clarity however, it the absence of container to group both states make the toggle less unified.
IMPLEMENT
CLS Health website did not have any defined design standards along with usage guidelines of components. A thorough audit of the website was performed to discover all of existing design and animation patterns.
Page Integration & Navigation Anchor
CLS Health website did not have any defined design standards along with usage guidelines of components. A thorough audit of the website was performed to discover all of existing design and animation patterns.
RESULTS
Intense heat on clinic locator pagination suggesting users cycled through the location card list to
Active refine on search
Intense heat on clinic locator pagination suggesting users cycled through the location card list to
REFLECT
Implement filtering system for the list state to further narrow down clinics in preferred areas of the Houston area. Add “Save preferred clinic” for returning users
Next Steps
Implement filtering system for the list state to further narrow down clinics in preferred areas of the Houston area. Add “Save preferred clinic” for returning users