Inline messaging
The Project
We had text input components at Lifion but we did not have inline error handling yet. As a result our design and product teams used an array of workounds in it’s absence. We wanted to fill this gap.
My Involvement
I was responsible for designing a solution for inline error handling as well as delivering an HTML prototype to handoff to engineering.
Kickoff
I kicked off the project meeting with a designer from each of the different product teams to understand their needs and desires around error handling. I collected use cases and examples of how they were currently solving this problem and what their ideal solution looked like.
Discovery
I gathered examples of how different products and systems solved for this problem. Keeping note of trends and what we should.
Exploration
I explored various treatments for our messaging patterns and reviewed with the team, iterating on feedback.
Designs
After interating i landing on the following designs.
HTML Prototype
I built html prototypes of the update applying it to all the components it affected from text inputs to radio lists. These prototypes displayed styles as well as interaction notes for the developers.