Elemeno Health is a point-of-care microlearning app for nurses that streamlines training and communication, empowering each healthcare organization to manage their own resources.
The project was split into two parts. The first part focused on refining the client manager tools, while the second part focused on improving the UI of specific features in the user app.
The management user experience was previously redesigned but specifically needed UI refinement in two key areas.
The “Manage Assignments” tool is used by managers to manage and assign assignments.
Manage Assignments Page
Assignment Details Page
The “Reporting” tool provides managers with data on assignment completion and resource engagement.
Reporting Page
Because the project brief was broad, I conducted an audit of the existing designs they provided me. Through this audit I identified three overarching heuristic violations throughout the designs.
Consistency and standards
Components throughout the design are inconsistent despite having similar uses and interactions.
Recognition rather than recall
Input fields lack labels resulting in more cognitive friction for users.
Aesthetic and minimal design
Overall the designs don’t follow a grid and lack a consistent design system, leaving the user experience feeling disjointed and difficult to parse.
Many of these usability issues reveal the need for more visual refinement and consistency.
After conducting the initial audit, I collected contemporary examples of the patterns and components used in the existing designs to identify areas of improvement.
This table design by Seven Metrics uses zebra striping to make long tables more readable.
OpenSea uses color to emphasize the sort order of the table.
Quicken’s dashboard navigation uses icons without labels. This might save space and reduce visual clutter, but relies on the users to recall what the icons means.
Coinbase opts to label each icon in its navigation, clearly communicating each destination.
After evaluating the original designs, my main goal in the redesign was to establish consistent patterns throughout the experience. Overall, I implemented a 12-column grid layout, refined the design system, and standardized the components to follow usability best practices.
Eliminated side navigation when there's only one page in the navigation.
Added zebra striping for better readability.
Highlighted and bolded column label to indicate sort order.
Moved "Team Name" field to the top right of the page to keep consistent with other pages.
Moved "Assignment Information" from the side railing to the top of the page, reserving the side-rail pattern for navigation only.
Moved "Team Name" field to stay consistent throughout the exerience.
Aligned the table design with the Manage Assignments page.
Standardized patterns and interactions throughout the page to increase learnability throughout the flow.
Redesigned the side navigation with labels to reduce reliance on uncommon iconography.
Note: Data visualization elements are placeholders as they would be handled by a third party program.
On the user app side, the client wanted specific UI improvements on four components:
Home page
Without making drastic changes, tighten up the vertical spacing in order to bring more of the home page content above the fold.
Feedback mechanism
Increase the discoverability of the feedback component.
Link to source document
When a resource has available source documentation, ensure users can easily access them. It’s important to client managers that their users can learn more background information about these resources.
Request content
Increase discoverability of the Request Content feature and explore more ways to surface it in the experience.
My initial explorations aimed to refine the layout of the navigation and search bar to reduce vertical height as much as possible.
After reviewing these options, the client expressed concern with the level of effort required to make these changes. Taking this feedback into consideration, I incorporated some of the spacing changes from my initial explorations into the original layout as a near-term solution.
Final Design
Home Page Desktop View
Home Page Mobile View
Taking inspiration from sites like Google and Adobe, I mocked up a few options for visual treatment and placement of the feedback component.
Final Design
Overall, placing the component outside of the article on the gray background made the component difficult to see and discover. It was also more intuitive to see a feedback component at the end of a resource since that would be the best time to ask for feedback.
The original placement of the link was visually cluttered and made the link easy to miss. I wanted to find a dedicated place for the link so it wouldn’t be missed or mistaken for a different button.
Final Design
I decided to group the source document link with the actions in the header bar, since viewing source documentation is similar to viewing “More Information”.
Similar to the feedback component, the request content feature seemed to get lost on the gray background.
Final Design
I moved the component onto the search results card and suggested showing the feature even when there were results in case users still couldn’t find what they were looking for.
My work was approved by the VP of Product and VP of Engineering, and I compiled the final designs with annotations to pass onto their future engineering contractor.
How to design with technical constraints
Without time or resources to conduct testing, you may need to make assumptions based on your experience and knowledge of best practices
Plan to take ownership of your designs and drive the conversation as the only designer in the room