top of page

LearnActive

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

Mockups.png

85%
Customer Satisfaction Rate

Empathize

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.

Time

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

Technical

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

Resource

The company had limited resource for conducting detailed usability testing.

Empathize

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.

Persona-Learner.png
Persona-Instructor.png

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.

ic_outline-loyalty.png

Long-term use by executing customer loyalty program.

charm_shield-tick.png

Brand trust with high customer satisfaction

fluent-emoji-high-contrast_money-bag.png

Fast growth of customer group fulfilling revenue goals.

Conceptualize

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.

21-Features.png
22-Features.png

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

Visualize

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.

Home

Quick access to instructors nearby.

Reward status clearly displayed, keeping users motivated.

Sports categories displayed by images.

Option for browsing instructors in general.

Mobile-Home.png
Home.png
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.

LearnRewards

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

Reflection

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

no-shadow.png

Articious

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

Home-Mockup.png

FlexoOffice

Web App | UX/UI Design, Responsive Design

bottom of page