meQ
Native & Responsive Web App
meQ’s Workforce Intelligence Suite makes resilience scalable and engaging, with an evidence-based SaaS coaching solution for your entire workforce. Drive measurable results for individuals, managers, teams, and your organization as a whole.
Team
Design Practice Team
Role
Sr. Digital Product Designer
Dates
Mar 2023 - Oct 2023 (8 months)
The meQ mental well-being native and web app require UX/UI enhancements to address identified pain points and improve the user experience. As the newly added UX/UI Designer, I collaborated closely with the Product Design Lead and the Design Practice and Dev Teams to research, explore, and conduct thorough UX/UI improvements app-wide, while adhering to established brand guidelines -incorporating new UI components to bolster the existing design system.
My Task.
Deliverables
Hi-Fidelity Mockups
Interactive Prototypes
Design System Components
Design Tools
Figma
Adobe CC
Productivity Tools
Asana / Product Board
Miro / Figjam
Slack
Process
Flows
This sample flow summarizes how users initiate their meQ sign-in and registration process, including onboarding with a personality assessment, survey results, and access to a personalized user dashboard with activities and skills.
Grid System
Choosing a structured grid solution to implement in the design system was key in providing consistent layouts and improving the overall user experience. It simplifies design and development while maintaining a cohesive and visually pleasing interface.
Type
Fluid/Stretched
Columns
4 / Auto (Mobile)
12 / Auto (Desktop)
Margin/Gutter
24/16
Responsive Web App
The responsive web design solution for the meQ web app enables seamless adaptability across different devices, streamlining development and offering a consistent user experience.
Logo
We leveraged the pre-existing meQ logomark and logotype variations by using the established brand color palette, seamlessly integrating the brand identity into the app design to maintain a unified and visually engaging user experience.
Colors
Foundational colors for the meQ digital product line were defined in alignment with pre-existing brand guidelines, to be more clearly specified and scaled in the future-state meQ Design System.
Typography
The current type-ramp transitioned from a dual typeface to a single typeface (Source Sans 3) to ensure a consistent and visually pleasing text style throughout the entire interface. This enhances readability and maintains a polished appearance for users.
Design System Elements
Here are a few examples of some basic components and a handful of their variations from the meQ Design System.
Iconography
Integration of a clean, diverse, and simple line icon style for enhanced UI design efficiency, user understanding, and uniformity.
Login & Registration
A user-centric login, registration, and onboarding approach, guarantees a seamless user experience. This simplified process enables users to access the app, create accounts, and set up profiles effortlessly.
Onboarding & Assessment
Onboarding includes an initial assessment survey for new users. Upon survey completion, the results provide a pin-pointed personality profile, informing recommended daily and weekly activities and skills. This profile tailors the overall meQ journey for each user.
Activities & Skills
meQ’s “activity” and “skill” features are hyper-targeted (for individuals and groups) and delivered via personalization to users - aimed at identifying issues, improving mental health, fostering resilience, and reducing the risk of burnout individually and across teams and organizations.
End.
The completed deliverables were phased & prepped for hand-off to the Development Team for build-out and for use in phased usability testing, which was the next stage of the project.