top of page


LearnActive is a multi-platform web app on mobile and desktop viewports that tackles active sports access limitations with local instructors and affordable learning sessions.

Marshmallow Studios company project

March 2022 - May 2022

UX/UI Design, Responsive Design


Customer Satisfaction Rate


Active sports learning dilemma...

Active sports, pushing people to get out of their comfort zone and accomplish incredible tasks, have constantly attracted sports lovers. However, with going to facilities as the only way of learning and doing active sports, sports lovers and instructors have limited access to each other, making the experience cumbersome and deficient.

What constraints did I encounter?

“There is no such thing as unconstrained design.”
---- Kim Goodwin

I had an onboarding meeting with internal key stakeholders, asking what the scope and timeline of the project look like, and where the boundaries and limitations existed versus their expectations. It appeared that three major constraints drew my attention.


Working under a tight schedule, there was not enough time assigned for detailed user interviews and wireframing.


The development team leaned on web experience a lot in the past but had limited experience in mobile app design.


The company had limited resource for conducting detailed usability testing.


How the limited access impacted sports lovers?

By conducting internal stakeholder interviews and asking about their understanding of the challenge, as well as doing quick secondary research, I found that the active sports access problem was a two-sided dilemma between active sports learners and instructors.


What did the company want to achieve?

In addition to user goals, I noticed that as a startup company looking to launch its first product, the company also hand a set of milestones to be achieved during the process.


Long-term use by executing customer loyalty program.


Brand trust with high customer satisfaction


Fast growth of customer group fulfilling revenue goals.


How LearnActive addressed and met user and company goals?

With all the prerequisites collected, I started to map user and company goals to web app features.


How features interrelated with each other as a web app?

I then built a site map with all the features from the previous step transferred into web pages and connected with each other into a web app.

Site Map.png

Together with a user task flow diagram showcasing how active sports learners and instructors accessed the platform and reach out to each other.

User Task Flow.png


How did key screens look like in details?

In the visualization stage, details on each screen were focused on, where I laid out elements on both mobile and desktop as a consideration of responsive design.


Quick access to instructors nearby.

Reward status clearly displayed, keeping users motivated.

Sports categories displayed by images.

Option for browsing instructors in general.

Instructor Profile.png
Mobile-Instructor Profile.png
Instructor Profile

Images of instructors on top, inspired by Airbnb.

Instructors' certificates and background checking statuses were displayed as a proof of their professionalism.

Time picker for selecting sports categories and timeslots.

In mobile version, the time picker was designed as a stick CTA for easier access while browsing.


Progress bar enhancing the motivation.

Quick access to redeeming options.

Easy redeeming method.

In mobile version, the side menu was redesigned into a popup navigation menu for better readability.

My LearnRewards Status.png
My Account-My LearnRewards Status.png
Mobile-My Account-How it Works.png
My Account-How LearnRewards Works.png
My LearnRewards Status-1.png
My Account-My Redeem Options.png
Mobile-My Account-Navigation.png

Final Product

Find instructors by location + Checkout without redeeming
Find instructors by sports category + Checkout with redeeming
Final Product


What I learned from the project...

Take advantage of internal stakeholder insights

Although internal stakeholders may not fully speak for end users, as crucial participants of the design process, they always have unique insights of user needs. Designers can take advantage of these insights when there isn’t enough access to first-hand user insights. 

Design and develop recursively and iteratively

Designing in a practical environment, a robust product never happens overnight due to constraints here and there. There should always be constant iteration and recursion needed to make it closer to user and business goals.

Other Featured Works



Mobile App | UX Research, UX/UI Design, Branding



Web App | UX/UI Design, Responsive Design

bottom of page