MyCoach App
1. HOME SCREEN REDESIGN
Redesigning the MyCoach home screen to enhance student engagement by balancing personalized, motivational elements with seamless navigation and minimal development effort.
PROJECT SNAPSHOT
-
Beyond 12 is an education nonprofit that uses tech and coaching to help underserved students graduate college.
-
Lead UX/UI Designer.
-
4 weeks.
-
Home screen redesign. Enhance student engagement with a less intrusive, more personalized home screen design.
-
Senior Director of UX — Regan Chagal
Senior Project Manager — Jeanette Corona
CTO + Head of Product — Chris Co
CHALLENGE
Redesign Goals
The MyCoach app’s home screen required a redesign to better engage students while being mindful of developer bandwidth. The goal was to create a personalized, motivational experience that streamlined access to key features like resources, notifications, and rewards.
Key considerations included
Reducing visual clutter and text density to improve usability.
Adding dynamic, motivational elements like personalized messages and progress updates.
Ensuring alignment with existing UI and development constraints.
Incorporating SAB (Student Advisory Board) and stakeholder feedback.
PROCESS
1— Empathize
I conducted user interviews with students (SAB) to identify pain points and opportunities for improvement.
Key Insights from SAB Feedback (original design)
Desire for personalized, motivational elements (e.g., “Welcome back, Alan! You’re halfway there!”).
Preference for a more visual, less text-heavy interface with improved color theory.
Need for better differentiation between content types (e.g., calendar events vs. library content).
2— Prototype Review with SAB Students
The first prototype introduced a new layout emphasizing visual clarity and dynamic updates.
Feedback Highlights
Students appreciated the improved usability and larger tappable buttons.
Motivational messages and progress updates were well-received but needed more prominence.
Requests for clearer differentiation between “What’s New” content and upcoming events.
Suggestions to incorporate icons to reduce text reliance and improve scannability.
3— Prototype Review with Stakeholders
Stakeholder feedback focused on aligning the redesign with engagement goals and business priorities:
Emphasized the need to encourage interaction with points, rewards, and campus resources.
Recommended prioritizing clarity in feature titles and actionable elements.
Raised questions about capitalization consistency and user accessibility for offensive word inputs.
4— Refining Design
Collaborating with stakeholders, I refined the redesign’s objectives to:
Prioritize motivational and personalized features.
Optimize the hierarchy of content for clarity and engagement.
Address technical limitations while maximizing existing resources.
Design Goals
Add value to the home screen without increasing cognitive load.
Provide students with clear, actionable insights to improve engagement.
Simplify navigation and improve access to frequently used features.
Highly mindful of design vs developer’s bandwidth.
FINAL DESIGN
Welcome Message
Added a personalized, motivational element (e.g., “Welcome back, Alan! Let’s achieve your goals together!”).
Tips Section
Reduced surface area for cleaner visual hierarchy.
Incorporated dynamic graphics to enhance engagement.
What’s New
Regularly updated content with impactful visuals and clear differentiation between events and resources.
Simplified navigation to ensure students could easily find relevant updates.
Local Resources
Improved usability with direct access from the home screen, reducing navigation friction.
Rewards Section
Added a prominent button linking to rewards details, including gift card redemption and points tracking.
FUTURE ADD-ONS
Notification Icon
Direct home screen alerts to improve visibility of new updates, reducing the current two-tap access.
Earn Points Feature
Gamified content engagement with auto-selected tasks for earning points, dynamically refreshing the home screen to encourage interaction.
Enhanced Rewards Tracking
Displaying points-to-reward ratios directly on the home screen for clarity and motivation.
IN CONCLUSION
This project was a balance of creativity and practicality. By actively integrating feedback from students and stakeholders, I delivered a cohesive redesign that aligned with user needs and business goals. If given more time, I’d conduct additional rounds of usability testing to fine-tune the motivational elements and further explore gamification strategies.
The redesigned home screen now serves as an engaging, personalized hub for students while respecting development constraints—a true step forward in enhancing the MyCoach app experience.
2. LIBRARY REDESIGN
Usability Meets Functionality. Redesigned the MyCoach Library to address usability challenges by improving navigation, integrating resources, and enhancing search and filtering capabilities.
PROJECT SNAPSHOT
-
Lead UX/UI Designer.
-
2 weeks.
-
Redesign the MyCoach Library to improve usability, navigation, and integration of resources.
CHALLENGE
Problem
The original MyCoach Library faced significant usability challenges, making it underutilized despite its potential value. Key issues included:
Infinite Scrolling Effect — Users struggled with endless content navigation without a way to search.
Confusing Filters — Limited filtering options were hidden behind a hamburger menu, causing confusion.
Disconnected Resources — Resources, intended as a subpage, felt disjointed and lacked cohesion with the library.
Goal
To create a functional, intuitive Library that seamlessly integrates resources, provides effective search and filtering, and enhances user engagement.
1st SET OF STUDIES
I began the redesign by wireframing and exploring ways to organize content categories.
Focused on clarity and intuitiveness, ensuring users could easily locate content.
Experimented with layout and color to create a UI that balanced functionality and visual appeal while maintaining brand cohesiveness.
Introduced initial ideas for displaying category previews to reduce cognitive load.
2nd SET OF STUDIES
Building on initial insights, I added features to address specific pain points:
Content of the Day — A prominent feature at the top of the screen to spotlight relevant content and drive engagement.
Search and Filtering
Added a visible search bar with recent searches and suggestions.
Enhanced filtering to allow multi-selection and sorting for greater flexibility.
Data Collection Space — Designed an unobtrusive area to gather insights from students, ensuring it added value without disrupting usability.
INTRODUCING RESOURCES
Incorporating resources into the library was a key focus:
Seamlessly integrated resources into the main library view to eliminate the perception of them as a separate feature.
Added filtering by school to tailor content to users’ specific needs.
Unified the UI for resources and library content to ensure a consistent, cohesive experience.
FINAL DESIGN PROTOTYPE
The final design delivered a lighter, cleaner UI that balanced aesthetics with functionality:
Content Display — Modules included brief content introductions to help users preview information before engaging.
Enhanced Filtering — Multi-selection and sorting capabilities improved usability.
Saving Ability — Retained the option for users to save content for quick access later.
Integrated Resources — Presented as a natural part of the library, with the ability to filter by school or category.
Optimized Layout — Improved hierarchy and spacing allowed more content to be displayed without overwhelming users.
REFLECTIONS & NEXT STEPS
Reflections
This redesign addressed significant usability challenges and laid the groundwork for a more intuitive and engaging Library experience. Integrating resources and enhancing filtering capabilities were critical in creating a cohesive tool that met both user needs and business goals.
Next Steps
Conduct usability testing on the final design to validate improvements and gather additional feedback.
Perform a WCAG color contrast audit to ensure accessibility for all users.
Explore opportunities to personalize the Library further, such as recommending content based on past interactions. </aside>
3. PROFILE REDESIGN
Streamlined the Profile feature to enhance usability, allow students to manage their information more effectively, and support developer bandwidth constraints.
PROJECT SNAPSHOT
-
Lead UX/UI Designer.
-
2 weeks.
-
Streamline UX and enhance usability.
CHALLENGE
Problem
The original Profile feature in the MyCoach app was cluttered and confusing, limiting students’ ability to view and edit their information.
Key pain points included
Limited functionality — Students could only view/edit their school and organization.
Confusing UI — The layout and hierarchy made it difficult to navigate.
Missing Features — Students couldn’t easily access or edit their demographic information, personal data, or coach details.
Goal
Redesign the Profile screen to consolidate key features into an intuitive, user-friendly interface while minimizing development complexity.
1ST DESIGN ITERATION
Key Enhancements
The first iteration focused on quickly implementing core functionality while keeping the design minimal and easy to develop.
Introduced the ability to edit personal data (e.g., name, email).
Added options to view/edit demographic questions under a new "About Me" category.
Consolidated the profile’s first screen to display three main options (Personal Data, About Me, School/Organization) for a cleaner and more focused entry point.
Results
This iteration provided a foundational improvement, setting the stage for more refined iterations.
2nd SET OF DESIGN ITERATIONS
Key Enhancements
The second round of iterations introduced additional features and explored ways to improve hierarchy and usability.
Simplified personal data editing to include only the student’s email, reducing complexity.
Separated the ability to edit school and organization into distinct elements.
Introduced a new "Dedicated Coach" category, allowing students to view coach details and initiate a chat.
Experimented with hierarchy, composition, color, and avatar inclusion to improve visual clarity and engagement.
Results
This phase balanced functionality with an intuitive layout, improving the student experience while remaining development-friendly.
FINAL DESIGN
Key Features
The final design streamlined the Profile experience into an elegant, cohesive interface that met user and business goals.
Dropdown Menus — Organized content into five categories—My Account, School, Organization, My Coach, and About Me—each collapsible for a cleaner view.
Improved Copy — Clear, concise descriptions under each category provided guidance and reduced confusion.
Color-Coded Categories — Assigned distinct colors to each category for visual differentiation and ease of navigation.
Unified Interface — Allowed students to view and edit all relevant information in one screen, enhancing usability.
Results
This design went live, delivering a seamless, user-friendly Profile experience that addressed previous student frustrations.
REFLECTIONS & NEXT STEPS
Reflections
This project demonstrated the value of iterative design and prioritizing simplicity within development constraints. By focusing on user needs and leveraging internal feedback, we delivered a solution that was both impactful and efficient to implement.
Next Steps
Evaluate the effectiveness of the dropdown design and color-coding in improving navigation and engagement.
Explore opportunities to personalize the Profile experience further, such as adding student avatars or progress indicators.
Conduct usability testing on the live version to gather student feedback and identify areas for further enhancement. </aside>