Color Blindness
I also ran color blindness tests on the main lesson screen. My main takeaways from this were:
Text Labels: Ensure all interactive elements have clear text labels and don't rely solely on color for recognition.
Enhance Contrast: Increasing contrast between text and background colors, especially for highlighted or selected items, will make the content more accessible. Using bold fonts or adding outlines to key elements can also help.
Alternative Indicators: Incorporate additional visual cues such as patterns, underlines, or icons to convey important information.
Recommendations
Text Labels: Ensure all interactive elements have clear text labels and don't rely solely on color for recognition. This ensures that users with any form of color vision deficiency can navigate the interface effectively.
Enhance Contrast: Increasing contrast between text and background colors, especially for highlighted or selected items, will make the content more accessible. Using bold fonts or adding outlines to key elements can also help.
Alternative Indicators: Incorporate additional visual cues such as patterns, underlines, or icons to convey important information. This ensures that critical details are not lost on users who may have difficulty distinguishing colors.
User Flow
I created a simple user flow to help understand the logic of how users navigate through the dash to a lesson and manage their lessons.
Design Iterations
I started brainstorming with some simple designs for allowing users to manage lesson progress in one spot that also provides feedback for when a lesson has been started but not completed.
I was also thinking about how to use semantic colors here as well.
Color System
I set out to start defining color usage and semantics with a simple design guideline, leaning on the tailwindCSS palette and the brand guidelines provided. I also defined button types and usage.
2nd Design Iteration
I then created a second iteration attempting to address some of the visual complexity. I focused on:
simplifying the top navigation
consolidating the progress bar to provide better contrast with background
Simplifying all button and navigation states
Limit the use of colors, especially green, by using blue as another semantic color and limiting green to one type to be used solely for indicating progression.
utilizing defined buttons based on the design guidelines I created.
providing contrast, labels, and icons where necessary to accommodate visual impairments.
Color Palette Revisited
I reviewed with the team and began a third iteration based on feedback.
To provide better contrast and harmony between the colors being used. I shifted the brand green darker and created a green tinted blue to match.
3rd Design Iteration
My third iteration focused on further limiting the use of green and simplifying the visual design so that CTAs and navigation elements are more easily recognized.
Although the team liked the use of icons in the CTAs there were some technical limitations that would have made it take some time. We decided to capture that change as UX debt to be addressed after the preliminary cohort finished their courses.
I also removed the progress bar at the top. It was not adding enough additional context for users to justify the noise and design challenges associated with it.
Old Dash
The team was happy with the third iteration and felt confident enough for me to begin applying the design guidelines I created to the main dashboard as well.
New Design
I added a quick resume option at the top of this screen to replace the progress bar that had been there. This would allow users to jump right into their next lesson without needing to scroll through so many cards.
Next Steps
I think that I’ve made good progress at creating more cohesion in the design language of the lesson management screens. I think there is still a lot of room for improvement. I am not convinced the navigation is intuitive enough but given the constraints the team set on me for this initial project I did not focus on that aspect of the design. I’m also not sure that a vertical layout for the lessons is the right choice. Many (almost all) popular learning platforms track progression in a side menu while the lesson view is shown beside it. I brought this up with the team early on but they were not convinced. I plan on putting together a deck on the pros and cons of both styles to present to the team in the future.
overview
The Newton Institute is an company that provides a methodology and visual framework for leaders to define who they are
and what drives them. You could think of them as providing life/career coaching to business executives, although they will be targeting other types of users such as high school/college students and employees at other levels within organizations. The company has been running courses in person or moderated virtually. They want to scale up the business though, and have been building an online learning platform to accomplish this goal.
I’ve been brought on to the project to help their lead engineer and product owner with UX considerations. After some initial conversations with the team and stakeholders we decided it would be most helpful to start off with a heuristic analysis of the learner facing interface. I would offer design recommendations based on my analysis.
Constraints
Some constraints I had to keep in mind were: - The team had established brand guidelines. They spent quite a bit of money hiring a marketing team to build this out and it was imperative that those be followed. - The team were launching their first cohort on the platform with some trusted partners in order to test curriculum and to collect feedback from their users. Because of this, they wanted to keep the design changes mostly visual, avoiding big navigational or site map shakeups unless absolutely necessary. - Their engineer is using TailwindCSS and wanted to keep the design palette limited to that system if possible. They were also using the Shadcn UI library and again wanted to leverage those components as much as possible.
Heuristic Analysis
I