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.
Together with a user task flow diagram showcasing how active sports learners and instructors accessed the platform and reach out to each other.
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.
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.
Find instructors by location + Checkout without redeeming
Find instructors by sports category + Checkout with redeeming
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.