AI recommendation Cards + Dashboard
Objective
A product team asked me to design a card UI to use in a pilot program for their new machine-learning algorithm. The purpose of UI was to show purposeful calls-to-action based on various data sources, such as users' insurance information. For example, a user could be provided with a recommendation to get their flu shot or join a smoking cessation program if their data indicated that they would be beneficial programs for their health.
I was also required to build a "card hub" where users could access their current, completed, and discarded recommendations.
This project was designed in Sketch and hosted on Invision.
Design Constraints
Net-new product.
The product team asked me to create an "MVP" product with room for future enhancements.
Limited data were available to reference or to use in design decisions.
The card designs had to be "fluid" and work in different areas of a portal.
The card designs had to work across two differently branded platforms.
Limit on headline and body description text.
Upon product launch, users would only see 2-3 recommendations until more programs were available several months later.
Process
I created an audit of card designs from other internal projects and websites to inform my design decisions.
I worked with the UX research team to test my designs with participants and incorporate their feedback. For example, users preferred cards with a few lines of descriptions with a headline versus a standalone headline.
I created an illustration standard, so the cards had a "recognizable" look to them.
I worked closely with the development team to ensure my design could scale properly at different responsive breakpoints.
Outcome
There is noticeable engagement with card UI and program conversion.
Other teams have adopted recommendation cards to use within their product spaces.
"MVP" dashboard design has outgrown its scope. It needs to be updated to include card categories, filtering options, and information on why users are recommended specific programs, such as weight loss.