menu
This is a large-scale, ongoing project where I am guiding the app's development toward a more mature UI/UX standard. My work encompasses a complete overhaul of the brand identity and accessibility foundation
This project's potential was already defined by a robust set of features and clear goals, but it was trapped in an underperforming and inaccessible layout.
My role was to architect the UI systems and visual language necessary to bring that potential to the surface. By establishing a cohesive design system rooted in their thematic identity, I transformed a collection of high-concept features into an intuitive, accessible, and functional experience—ensuring the product finally worked the way it was always intended to.
.png)
My design audit served as a strategic blueprint, categorizing issues by severity to provide a clear roadmap for the VMI software suite redesign.
My process for these UI systems was to start with the end-user goals, like fostering a growth mindset, encouraging non-linear exploration, and building community, and work backward.
Each element was not an isolated component, but a deliberate design choice engineered to guide users toward the specific behavioral outcomes the application was built to achieve.
The achievement badge system is directly mapped to the psychological model of skill acquisition, from Unconscious Incompetence to Unconscious Competence. Each stage is personified by Mazzy's growth:
This visual progression transforms abstract learning stages into a tangible, rewarding journey, using gamification to motivate students and make their growth feel visible and celebrated.
.png)
The implementation shifts the focus from a fixed score to actionable, multi-faceted feedback. The original design showed only a percentage, which can lead users to fixate on a number rather than their learning journey.
My redesign replaces this with the visual reward of the badge itself and complementary data like progress blocks. This provides more usable, encouraging feedback after a lesson, celebrating concrete milestones and effort. This approach is designed to sustain engagement by promoting a growth mindset, where the focus is on development and mastery, rather than a fixed mindset obsessed with a single, often discouraging, number.
The original leaderboard had the basic features they wanted, but no UI design with horizontal scrolling and no clear hierarchy. Following a UX consultation, the client expressed a desire for the friendly, community-driven competition seen in apps like ski trackers and the UX feelings they wanted to evoke.
The redesigns introduce a clear, two-tiered filter system (stat type and timeframe) to help users understand the data. By focusing on one metric at a time—whether in a button-based or swipe interface. The new design allows a cohort to interact healthily, see what peers are prioritizing, and discover which learning approaches lead to success, turning their starting UI into a tool for community engagement.
.png)
The Story Quest is designed as an instructional amalgam, weaving together diverse exercise types: chatbot conversations and skills practice to applied story chapters and video tutorials. The core design challenge was preventing a natural tendency toward linear, syllabus-style completion.
To foster a more dynamic and structured study habit, we implemented a game-like skill tree navigation. This system encourages users to jump between topics, repeat exercises for mastery, and try new challenges for fun, creating a playful yet balanced ecosystem that intrinsically motivates exploration across all exercise modalities.
The original skill list was a major point of cognitive overload, presenting over 20 skills of varying intensity and length in a single, implicitly linear sequence. This directly contradicted the client's goal of allowing non-linear, self-directed exploration where users could review old sections while discovering new ones.
The solution was a complete information architecture overhaul. I developed a user flow organized around thematic clusters—such as Recalibrate, Empathy, Reflect, Open Up, and Affirmations—keeping the number of groups under seven to align with short-term memory limits. This structure empowers users to focus on what they need most in the moment (e.g., practicing how to get a client to "Open Up") without being forced down a rigid, predefined path, transforming an overwhelming list into a manageable toolkit for professional growth.
This exploration tested two distinct layout strategies for the story quest navigation. The first used a high-context culture approach: dense clusters of small hexagons that provide maximum information upfront, favoring explicit structure and individual choice. The second used a low-context culture approach: larger, artful shapes with ample breathing room, suggesting a path through implication and atmosphere.
The testing revealed that our audience of American medical students, while operating in the high-context environment of Electronic Health Records (EHRs) professionally, strongly preferred the low-context, Western-style UI for their learning. In this context, they wanted clear, guided hierarchy and explicit information architecture, demonstrating that user expectations for structure can dominate even when their professional training involves navigating more implicit systems.
The core brand strategy was to fundamentally differentiate the suite from the sterile, lifeless aesthetic typical of clinical and educational software. The goal was to make students feel the care and effort invested in supporting their journey.
Furthermore, with the integration of gamification elements to boost engagement, the branding needed to feel modern, approachable, and fun. This was essential for fostering a growth mindset. A learning state that is open, curious, and resilient, rather than pressured or monotonous. Our visual system, built on the cohesive but dynamic hexagon framework and a fresh color palette, was designed to embody this philosophy: structured and professional, yet inherently human, energetic, and supportive.
The client's existing software suite suffered from a complete lack of visual cohesion; each app had a different logo style, color, and shape language, making them feel unrelated.
My strategic recommendation was to establish a unified design system to support their plans for future growth. I introduced a consistent hexagon shape and a restricted palette of dark/medium blue and white across all concepts. This created an immediate familial relationship between the master suite logo and the individual application icons, ensuring that both current and future apps would be recognized as part of the same professional ecosystem.
The Original Logos
My Concept Logos
The consistency is engineered into the system's geometry. A hexagon's internal angles are 120 degrees. When subdivided into six equilateral triangles, each triangle has 60-degree angles. This is the foundation of our iconography: the house icon's roof uses the hexagon's 120-degree angle, while the chat bubble's speech pointer is derived from the 60-degree angle of the internal triangles. This mathematical relationship ensures every element is intrinsically connected, building a unified and scalable visual language from the ground up.
The visual development of the mascot, 'Mazzy the Mastodon,' focused on creating a cute, memorable mentor. While the client was set on an elephant for its symbolism of strong social networks, I deepened the local connection by looking to Utah's prehistoric past. Mastodons, ice-age relatives of mammoths, actually roamed the region. They provided a perfect foundation: their smaller ears and potential for a fluffy coat (due to the cold climate) made them inherently cuter.
The exploration involved defining key traits—nose length, body proportions, and color—to find the right balance of friendly and capable. Adding playful elements like sego lily flower pigtails and a cowboy outfit helped establish a unique personality that feels both nurturing and distinctly Utah.
For Mazzy to be an effective digital mentor, she needed to react to user input in a fun, emotionally clear, and immediate way. Because she is a stylized character, her emotions had to be more exaggerated to be read instantly from her core shapes.
This involved creating a library of expressive poses, from a sad droop of the trunk to an angry flare of the ears, ensuring she can provide nuanced, non-verbal feedback that supports the learner's journey without relying on text. These reactions are key to building a relatable and encouraging gamified experience.
A key challenge in animating a stylized character like Mazzy is the exaggeration balance. The more a design is simplified and stripped down to basic shapes, the less visual information there is to convey subtle emotion. To compensate, the expressions must be pushed further (bigger eyes, more distorted features, broader gestures). This exaggeration ensures that feelings are read instantly and clearly, even at a small scale, making the character an effective communicator despite its simplified form.
The prototype is now in user trials, marking the start of a new development cycle. I will help analyze the feedback to prioritize and implement design refinements, ensuring the final product is deeply aligned with user needs.
A key outcome has been the client's renewed excitement and trust. They have expressed strong appreciation for how I contextualize design choices, clearly linking each decision back to the specific problems and concerns they raise. This has empowered them to confidently explore the design process and trust the strategic recommendations provided.