Graduation project: collaborative learning app design

Revolutionizing the educational ecosystem with a mobile app designed to enhance interactive learning and peer collaboration.

1.9 M+

monthly business sales, up from 640K

90x

increase in user satisfaction

141%

increase in Email Campaign Revenue

13% 

increase in AOV 

Role

UX/UI Designer

Products

EdTech

Duration

4 months

a cell phone on a table
a cell phone on a table
a cell phone on a table

Challenge

Aletha Health faced a fragmented user experience due to the disconnection between its branded website on Webflow and its Shopify store. This lack of continuity not only undermined the brand's credibility but also highlighted a weak visual identity in need of an uplift, complicating the customer journey and diminishing overall brand impact.

Challenge

Aletha Health faced a fragmented user experience due to the disconnection between its branded website on Webflow and its Shopify store. This lack of continuity not only undermined the brand's credibility but also highlighted a weak visual identity in need of an uplift, complicating the customer journey and diminishing overall brand impact.

Solution

Formulated a web redesign strategy that prioritizes a simplified user flow, enhanced language for comprehension, and new content structure to best organize resources. Designed custom website that solves for branding needs as well as shopping functionality and worked on countless iterations of their existing offering, in addition to seasonal web designs and marketing efforts.

Solution

Formulated a web redesign strategy that prioritizes a simplified user flow, enhanced language for comprehension, and new content structure to best organize resources. Designed custom website that solves for branding needs as well as shopping functionality and worked on countless iterations of their existing offering, in addition to seasonal web designs and marketing efforts.

The design approach I adopted:

01

Research

Stakeholder Interviews

Competitor Analysis

Literature Review

02

Define

Understand Problem

Define Project Goals

Expected Methods

03

Design

Branding + Identity

Sketches

Design Iterations

04

Evaluate

Implementation

Expert Evaluation

User-Based Testing

Design

Recommendations

Stage 1. Research

To gain a comprehensive understanding of the current issues and potential, I conducted stakeholder interviews, competitor analysis, and user interviews.

Based on insights and observations from the research methods, I created a journey map highlighting the pain points and the opportunities for improvement.

Stage 1. Research

To gain a comprehensive understanding of the current issues and potential, I conducted stakeholder interviews, competitor analysis, and user interviews.

Based on insights and observations from the research methods, I created a journey map highlighting the pain points and the opportunities for improvement.

From interviewing 7 potential customers and analyzing customer support data, the target market was refined to three personas:

Stage 1. User Research

Engaged with over 100 students and educators through online surveys, in-depth interviews, and virtual focus groups to gather comprehensive insights into their learning habits, preferences, and frustrations with current educational tools. This exhaustive research phase highlighted the need for more interactive and collaborative learning solutions, leading to the development of detailed user personas representing the app's target audience.

Stage 2. Ideation & Conceptualization

Led creative workshops involving stakeholders and fellow designers to brainstorm innovative features that address the identified needs. Mapped out several user journey scenarios to visualize how users would interact with the proposed features, fostering a collaborative environment and promoting engagement through gamified learning experiences.tead, algorithms and logic-based solutions ought only provide humans with better insight so as to empower us to arrive at better solutions, faster.

Stage 3. Design Execution

  • Wireframing: Developed over 60 wireframes for various app screens, meticulously planning each element of the user interface to ensure intuitive navigation and a seamless learning experience. These wireframes served as the foundation for the app's structure, focusing on facilitating easy access to educational content and interactive features.

  • Prototyping: Utilized advanced features in Figma to create interactive prototypes, enabling realistic user interactions. Conducted live prototype demonstrations to stakeholders, providing a tangible sense of the app's look and feel, as well as its functionality.

  • UI Design: Crafted a visually appealing and accessible user interface, selecting a color palette that promotes concentration and creativity, alongside typography that improves readability across various devices. Integrated feedback from stakeholders to refine the UI, ensuring that it not only looks appealing but also aligns with educational goals.

Stage 1. User Research

Engaged with over 100 students and educators through online surveys, in-depth interviews, and virtual focus groups to gather comprehensive insights into their learning habits, preferences, and frustrations with current educational tools. This exhaustive research phase highlighted the need for more interactive and collaborative learning solutions, leading to the development of detailed user personas representing the app's target audience.

Stage 2. Ideation & Conceptualization

Led creative workshops involving stakeholders and fellow designers to brainstorm innovative features that address the identified needs. Mapped out several user journey scenarios to visualize how users would interact with the proposed features, fostering a collaborative environment and promoting engagement through gamified learning experiences.tead, algorithms and logic-based solutions ought only provide humans with better insight so as to empower us to arrive at better solutions, faster.

Stage 3. Design Execution

  • Wireframing: Developed over 60 wireframes for various app screens, meticulously planning each element of the user interface to ensure intuitive navigation and a seamless learning experience. These wireframes served as the foundation for the app's structure, focusing on facilitating easy access to educational content and interactive features.

  • Prototyping: Utilized advanced features in Figma to create interactive prototypes, enabling realistic user interactions. Conducted live prototype demonstrations to stakeholders, providing a tangible sense of the app's look and feel, as well as its functionality.

  • UI Design: Crafted a visually appealing and accessible user interface, selecting a color palette that promotes concentration and creativity, alongside typography that improves readability across various devices. Integrated feedback from stakeholders to refine the UI, ensuring that it not only looks appealing but also aligns with educational goals.

01

smooth checkout process

so customers are not disrupted in their purchase flow

02

CMS framework + dynamic pages

to keep up with constant upgrades and promotions

02

03

educational resources

educational resources


to solve Customer Service issues and communicate value

Stage 4. User Testing & Iterations

Organized a series of remote user testing sessions, employing both qualitative and quantitative methods to evaluate the app's usability and effectiveness in fostering collaborative learning. Analyzed feedback to identify patterns and areas for improvement, leading to several design iterations that enhanced user engagement and satisfaction.

Stage 5. Final Presentation and Documentation

Prepared an in-depth presentation and comprehensive documentation detailing the research findings, design rationale, user testing outcomes, and the iterative design process. Highlighted the app's potential to transform the educational landscape by making learning more interactive, engaging, and collaborative.

Visual Identity: A dark scheme was chosen to help establish a sense of sophistication and consistency across all brand touch points, while allowing accent hues to bring life and energy to key elements. Blue is leaned into to express scientific intelligence.

Language: Messaging was refined to improve comprehension and increase trust, using more simplistic and scientific language to make every interaction feel approachable and credible.

Strategically Place Product Information Above the Fold: Incorporated concise callouts of product value and easy options for payment higher up on the page with a simpler design to create a user-centric design that fosters ease of understanding, trust, and streamlined navigation. Effective information architecture ultimately leads to a smoother user experience, improved conversions, and better customer satisfaction.

a cell phone on a white block
a cell phone on a white block
a cell phone on a white block
two cell phones on a gray surface
two cell phones on a gray surface
two cell phones on a gray surface

Enhance Checkout Process: Streamlined the transition from browsing the website to the checkout process. Simplifying the steps and optimized the user flow to maximize conversion rates. Included an upsell feature alongside a visual progress bar towards free shipping, gamifying the checkout experience to encourage increased spending and ultimately boost average order value (AOV).

Optimized Information Hierarchy for Enhanced UX: Designed website pages with key product details and benefits at the top for quick insights, while placing in-depth engineering and design information lower down, using clear and concise messaging to guide users smoothly through the page and improve overall engagement.

Designed Flexible CMS-Driven Web Pages: Created flexible layouts, such as for the blogs, to allow seamless content changes and updates, ensuring scalability and maintaining a smooth user experience.

How to Videos: Video tutorials were prioritized for customer support and engagement. The videos were directed and edited, with intention to include on the website and social channels.

Stage 4. Implementation & Launch Support

Collaborated closely with the development team to ensure a smooth transition from design to implementation. Provided ongoing support and guidance during the development phase, addressing any design-related challenges that arose. Played a key role in the website's successful relaunch, monitoring user feedback and engagement post-launch to inform future updates.

Stage 4. Implementation & Launch Support

Collaborated closely with the development team to ensure a smooth transition from design to implementation. Provided ongoing support and guidance during the development phase, addressing any design-related challenges that arose. Played a key role in the website's successful relaunch, monitoring user feedback and engagement post-launch to inform future updates.

Reflections

This project was a testament to the importance of thorough user research and iterative design in creating solutions that truly meet user needs. It honed my skills in collaboration, problem-solving, and effective communication, setting a solid foundation for my future endeavors in UX/UI design.

Reflections

This project was a testament to the importance of thorough user research and iterative design in creating solutions that truly meet user needs. It honed my skills in collaboration, problem-solving, and effective communication, setting a solid foundation for my future endeavors in UX/UI design.

Other projects

Kelly May Sheehan

Copyright 2025 by Kelly May Sheehan

Kelly May Sheehan

Copyright 2025 by Kelly May Sheehan

Kelly May Sheehan

Copyright 2025 by Kelly May Sheehan