top of page

Redesigning the app for v1 launch

Hero image.png

What is Ascend Meditations

Ascend Meditations is an AI-powered mental wellness app built specifically for student athletes and high performers. It’s designed to help users stay focused, recover faster, and build resilience—both mentally and physically. With personalized meditations, structured plans for long-term goals, and sleep stories tailored to each user’s needs, Ascend fits easily into the daily routines of people constantly pushing their limits. Whether it’s mindfulness, breath-work, or guided imagery, every session is intelligently adapted to where you are and where you want to go.

Team

Me (UI/UX Designer)

Product Owner

Developers (3) 

My Role

UX Design, UI Design, Wireframing, Prototyping, Interaction Design

Time

Oct 2024 - Ongoing

Old Player Screen.png
Old Plans Page.png

* Images of player and plan details screen before redesign

Problem 🧐

Before I joined the team, the UI/UX was designed entirely by the developer. While the foundation was functional, the overall experience lacked the visual polish, emotional connection, and professional finish expected from a premium wellness product — especially one aimed at student athletes. 

 

With the App Store launch coming up and big investor meetings lined up, including potential partnerships with university athletic departments, the team needed a fast but thoughtful design overhaul. My role was to elevate the core experience — improving usability, visual appeal, and brand credibility to ensure Ascend made a strong first impression where it mattered most.

Solution & Outcomes 🥁

I was brought on board to quickly enhance the app’s visual design and user experience for the MVP launch. Working under tight deadlines, I focused on redesigning the most impactful user flows:

01. Onboarding flow and Personalization quiz

The onboarding was designed to clearly communicate Ascend’s core benefits to new users, while the personalization quiz helped customize their experience — recommending meditations, plans, and sleep stories that matched their unique performance and recovery goals.

Onboarding screen.png
Quiz screen.png
02. Audio player

Redesigned the audio player screen to make it more intuitive and user-friendly, with clearer controls and a smoother overall experience. I also revamped the exit flow, making it easy for users to seamlessly end a session, rate it, and share their experience — all without disrupting their post-session calm.

Player Screen.png
Player-control-modal - unmuted.png
rate_modal op3.png
03. Meditation plan screen

Redesigned the meditation plans page to follow a more modular structure, breaking each plan into clear phases and daily sessions. I added progress indicators and a lock/unlock feature to guide users through the journey — each day unlocks only after the previous one is completed, and new phases become available once the current phase is finished. This helped create a more structured and motivating experience.

Plan detail screen.png
Phase screen.png

The process I followed ...

Research and Defining Insights 🔬

Due to tight timelines, I conducted quick but focused research to ground my design decisions and identify usability gaps:

  • Heuristic Evaluation: I ran a rapid heuristic analysis to uncover key usability issues, including a lack of visual consistency, limited user control, and unclear navigation patterns.

  • Competitor Analysis: I studied apps like Calm, Headspace, and Insight Timer to understand successful onboarding flows, personalization techniques, and visual design standards commonly used in wellness and meditation apps.

  • Stakeholder Collaboration: I worked closely with the developer and product owner to align on technical constraints and business goals. This helped prioritize which design changes were both impactful and feasible within the given timeline.

Research Insights

01. Need for Onboarding & Personalization

An onboarding flow with a personalization quiz helped communicate Ascend’s value while collecting user goals—crucial for tailoring AI-generated meditations and plans through prompt engineering.

02. Meditation Plans as a Key Differentiator

The “Plan” feature stood out as Ascend’s unique selling point. It needed a visual and functional redesign to make it more structured, engaging, and aligned with user progression and motivation.

03. Lack of Visual Consistency

Visual inconsistencies weakened the overall experience. A cohesive design system was needed to deliver a polished, premium feel.

04. Unclear Audio Player Controls

The audio player lacked intuitive controls, which made interaction feel clunky. Clear, accessible controls were essential to ensure a smooth and calming user experience during sessions.

05. Disjointed Exit Flow

Ending a session felt abrupt and incomplete. There was an opportunity to improve the exit experience by adding elements like rating, sharing, or post-session feedback to maintain engagement and emotional continuity.

Design through Iterations ✏️

I started the design process by collaborating with the product owner and developers to gather feedback and understand technical constraints.

 

From there, I rapidly iterated using high-fidelity mockups to refine and align on effective design solutions.

Iterations of Login and Sign-up

Feedback:

Sign up process implementation not possible due to technical constraints and time limitation.

Design Decisions:

Removed Sign Up flow​

Added a note guiding users to create an account on the mobile app, along with a link to ensure they knew the next steps

Iterations of Home

The home page serves as a landing page, displaying daily actions, saved actions, active goals, and recommended actions

Feedback:

Left-side navigation made the design accessible - easy access to different pages and Logout.

Clean design layout.

Pop-up didn’t translate well to the web app in terms of visual appeal and had technical constraints that impacted feasibility.

Design Decisions:

 Dashboard layout for easy navigation and improved readability.

Pop-up action details card design to match the mobile app implementation.

 Replaced the pop-up with a third-column layout, allowing users to access and view other components without disruption, improving usability and maintaining context within the web app.

Iterations of Explore 

The Explore page showcases action categories, recommended actions, partner-specific actions, and category-based actions' lists.

Feedback:

The mobile-web consistency enhanced usability and reduced cognitive load.

Showcase Partner featured actions.

Design Decisions:

 Use of similar design visuals and assets as on mobile app to ensure consistency, reduce learning curve, and create smooth transitions between different platform.

 Maintained consistent action-card structure across page.

 The third-column layout displayed supplementary information, such as category-specific action lists or expanded action card details.

Iterations of Projects 

Users can join and contribute to partner-specific or general projects, which function as teams working toward shared goals. They can view in-project and cross-project leaderboards, as well as track their individual contributions.

Feedback:

The project card design offered a clear and concise visual overview of key details..

The leaderboard on the project screen offers an intuitive visual comparison without requiring users to open project details.

The full list of projects and the ability to switch between projects couldn’t be implemented on the web app version due to time limitations.

Users should be able to view project details.

Design Decisions:

 Designed the project card to focus on providing an overview by maintaining visual hierarchy and highlighting the most important metrics.

 Displayed the leaderboard on the project page to provide an overview and reduce the need for extra clicks to access it.

 Incorporated a project details section in the third-column layout, aligning it with the details section from the mobile app.

Final Design 🥁

Lastly, Reflections and Learnings ✍🏼

01

I learned how to adjust design patterns from mobile to web, considering platform-specific needs like screen size and interaction methods, while maintaining consistency.

03

Iterating on the third-column layout and project card designs highlighted the importance of flexibility and how refining designs based on feedback can significantly improve the user experience.

02

The use of the MOSCOW method taught me how to prioritize key features effectively and focus on delivering the most essential functionalities within tight time constraints.

04

Working closely with cross-functional teams reinforced the value of communication in navigating technical limitations and ensuring that the design aligns with both user needs and project goals.

bottom of page