Original lander

Why the original design was challenging for users

• Unclear content hierarchy — messaging was scattered and did not clearly communicate the page’s primary purpose.

• Low-value navigation — the side menu provided limited utility, with metrics showing minimal user engagement.

• Limited scalability — caregiver details were not designed to scale, and additional features risked cluttering the interface.

• Ineffective instructional copy — phrasing such as “I manage prescriptions for other people” required user interpretation rather than guiding action.

• Accessibility concerns — actions like “Manage” and “Remove” were visually separated from associated names, making it challenging for users that are zooming in.

• Broken media experience — the embedded video failed to load or function as intended.

Improved lander

Why the improved design works for users

• Delivered clear, unified messaging — consolidated copy and introduced explicit action steps to reduce confusion.

• Reduced distraction — removed the side menu and video to keep users focused on primary tasks.

• Improved scalability — moved caregiver details to a dedicated page, allowing the experience to grow without clutter.

• Designed a future-ready layout — structured the landing page to support new sections, such as Connections, without compromising clarity.

• Strengthened accessibility — placed actions directly alongside related content to improve usability for screen readers and all users.

Original look up

Why the original design was challenging for users

• Excessive input fields — the volume of fields increased cognitive load and raised the likelihood of user error.

• Unnecessary data exposure — some information shown was not required for task completion.

• Inconsistent experiences across devices — behavior and layout differed between mobile and desktop views.

Improved look up

Why the improved design works for users

• Reduced cognitive load — simplified input fields from eight to four, using only essential information (first and last name, date of birth, and mobile number) to support secure identification.

• Ensured a consistent cross-platform experience — aligned layouts and behaviors across desktop and mobile views.

Prototype

Prototypes captured key interactions and ensured the experience felt helpful, not disruptive. The design focused on input behaviors—such as validation, focus states, and auto-advancing to the next field—to create a smooth and intuitive flow.

Open the interactive prototype (opens in a new window) to see how Sophia adds her child, Lupe, as a care recipient.

Dev hand off

Annotations

I prepare developer-ready designs with clear annotations, ensuring engineers understand which design system components to use and how they should behave. I embed accessibility guidance directly in the files, including semantic structure, action types, and input requirements such as required fields and keyboard behaviors.

This approach reduces ambiguity, supports accessibility standards, and enables teams to build with confidence.

Full flow

I created comprehensive user flows in collaboration with engineering and architecture to ensure end-to-end alignment. I documented key states and edge cases—including preloading, retry attempts, and system nodes—to support accurate and predictable implementation.

Error handling

I designed for edge cases where technical constraints limited standard error patterns. In one scenario, a user attempted to look up a person they were already caring for. Because the system could not remain on the lookup page or display an inline error banner, I evaluated alternative patterns that would best support the user.

Instead of treating the outcome as an error, I redirected the flow to a success-style confirmation page. The action itself was valid, and the confirmation reinforced the existing relationship without implying a mistake. This solution balanced usability with technical constraints and demonstrated the importance of close collaboration with engineering partners.