Winning Project Award
Academic Coaching Mobile App
2024
•
Key to Thrive
Leading UX strategy and interactive design for Key to Thrive company, shaping seamless student journeys and design solutions.
ux_research_strategy
ui_visual_design
student_experience
information_architecture
Defining the Purpose and Understanding Student Needs
The project began with the goal of researching, analyzing, and designing a mobile app concept that aligned with the client’s established brand. The focus was on addressing the study-related needs of students through features that felt relevant, intuitive, and engaging.
Analyzing Client Requirements
To kick things off, I translated the client’s requirements into a clear and actionable app concept. This ensured the solution not only reflected the brand identity but also supported students with practical, user-centered features designed to enhance their learning journey.
Setting Up Client Meetings and Project Roadmap
Regular meetings with the client were scheduled to align expectations, refine requirements, and prioritize features. These sessions provided clarity on goals and constraints, while the roadmap ensured each design phase—research, visual exploration, prototyping, and testing—progressed in a structured and collaborative way.
Starting with the Visual Design
Mood Board
Three mood board options were presented to the client, with the chosen direction centered around a collaborative and exciting theme. The final concept emphasized energy, creativity, and friendliness, drawing on natural textures for depth and vibrancy.
To bring warmth and highlight key elements, orange was introduced into the existing green and blue palette, creating a split complementary contrast that felt dynamic yet balanced. Rounded typography reinforced a storytelling and approachable vibe, making the app feel inviting and student-friendly.
Style Tiles
The style tile refined the chosen mood board into concrete design guidelines. It included:
UI elements such as buttons, links, and icons.
Typography specifications (families, weights, and sizes).
A detailed color palette with hex codes.
This step served as a preview of the app’s visual identity, ensuring consistency and polish throughout the design. Color contrast was carefully tested using the Web AIM Contrast Checker website, ensuring accessibility and compliance with WCAG standards.
Ideating the Core Experience
Core Modules and Features
Before moving into flowcharts, the app’s core modules and features were visually organized into categories. This provided a comprehensive overview of scope and priorities, helping to align the design roadmap with client expectations and ensuring that all features directly supported the project’s objectives.
User Flows
To design a supportive experience for graduate students, I created user flows that mapped how different needs could be addressed through tailored app features. These flows illustrated scenarios such as managing productivity, building academic skills, and accessing emotional or financial support.
By visualizing step-by-step interactions, I anticipated potential challenges, refined navigation, and ensured that each pathway felt intuitive and aligned with student goals.
Flow #1 - Managing Time & Productivity
This flow focused on helping graduate students manage their time, stay productive, and handle academic stress. It outlined the journey from onboarding into time management tools and study strategies, ensuring a balance between structure and flexibility.
Key pathways included:
Onboarding & Orientation: learning how and why to use the productivity tools.
Focused Study: navigating to the Pomodoro feature and setting timers.
Strategic Support: completing planning and task schedules to receive notifications.
This flow demonstrated how productivity tools and supportive resources can work together to help students maintain consistency and balance.
Flow #2 - Needing Academic Skills Support
This flow highlighted how graduate students could strengthen their learning style, memory, and organizational skills. It mapped the journey from assessments into tailored strategies, making the app a personalized academic support hub.
Key pathways included:
Onboarding & Orientation: understanding available academic tools.
Assessments: taking tests on learning style and working memory.
Results & Strategies: viewing recommendations, accessing strategies (organization, focus, problem solving), and saving insights.
Supportive Tools: using voice-to-text for study notes and categorizing them into playlists.
Progress Tracking: returning to the profile to monitor academic growth through E:MAPS.
This flow emphasized how structured assessments and tailored strategies help students build stronger study habits and learning outcomes.
Flow #3 - Seeking Emotional & Financial Support
This flow showcased how graduate students could access emotional and financial support while maintaining balance in their academic lives. It outlined pathways into mental health, resilience, and financial assistance resources.
Key pathways included:
Onboarding & Orientation: introducing support features.
Resource Access: navigating to mental health, resilience, or financial assistance sections.
Connection: viewing descriptions, saving contacts/resources, or reaching out directly.
Extended Engagement: exploring external programs, and optionally connecting through social media channels for community support.
This flow demonstrated how the app supports overall well-being, ensuring that academic success is paired with mental, emotional, and financial resilience.
App Flow
The app flow outlined the high-level structure of the application, mapping the main sections and their connections. This visualization ensured smooth navigation across modules, clarified how features would interact, and created a clear picture of the overall system architecture before diving into detailed wireframes.
Bringing Early Ideas to Life Through Sketches
Early ideas were explored through hand-drawn sketches, allowing for quick iteration of layouts and flows. This lightweight approach encouraged experimentation, helped identify promising directions, and provided a flexible foundation before committing to structured wireframes.
Low/Medium Fidelity Wireframes
With simple shapes, placeholders, and annotations, low-fidelity wireframes were created to quickly prototype different screen layouts and interactions. This rapid exploration supported early usability testing, enabling fast feedback loops and reducing the risk of costly changes later in the process.
Validating the Experience Through Usability Testing
Usability testing was carried out to evaluate how students interacted with the app’s navigation and core study-related features. Test tasks focused on assessing clarity, efficiency, and ease of use to ensure the experience felt seamless and intuitive.
Features Analyzed
By observing participants and collecting direct feedback, we identified moments of hesitation and uncertainty that revealed potential usability issues. These insights guided refinements in flow and interaction design, validating key decisions and ensuring the app effectively supported students’ real study needs.
Delivering the Solution
Design Guidelines
To ensure consistency and maintain a polished user experience, comprehensive design guidelines were developed. These guidelines documented UI components, typography, color usage, and interaction patterns, serving as a reference for future iterations and handoff to developers. By establishing a clear visual and functional standard, the design remained cohesive, efficient, and user-centered throughout the project.
UI Components in Figma
Crafting reusable UI components in Figma during the high-fidelity wireframing phase streamlined the design process and ensured a cohesive experience across screens. Establishing a shared library created a consistent visual language, improved aesthetics, and promoted familiarity for users. Leveraging Figma’s features also enabled rapid iteration, prototyping, and testing—laying a solid foundation for efficiency, consistency, and user-centricity.
High Fidelity Wireframes
Student Module
The student module provided a dynamic platform for learners to optimize their academic journey. With seamless access to essential resources—such as the academic pillars, time management tools, organizational aids, and support services—students could enhance their performance and stay engaged.
Administrator Module
The administrator module empowered clients with comprehensive tools to manage content and monitor student progress. From overseeing assessments and strategies to tracking performance, this module enabled administrators to maintain oversight and ensure student success.
Celebrating Recognition and Awards
Winning Project Award at Applied Research Day
On April 12th, 2024, our team proudly earned Second Place at Algonquin College’s Applied Research Day for the Key to Thrive Academic Coaching project founded by Tina Mackay.
Our UX and UI solution stood out among 80 innovative projects across different programs. It was an honor to be recognized alongside an electrical engineering project in first place and a video production project in third. This recognition reinforced the impact of our design in supporting student success.
