SUP (Standup Paddle boarding), the little-known-to-many water sport quickly becomes one of the hottest sports in Singapore thanks to COVID restrictions hitting a pause on travelling.
You have no clue? How could you?! (jk. No worries, 'cause I had been there too.)
I was introduced to its charm while I was working on a project with OAALSG (Outdoor & Adventure Learning Pte. Ltd), where they have growing SUP customer pool. OAALSG offers both one-off experiential journey, and ships SUP products online. However their website has been rather irrelevant to its growing business. And we all know, that can be fundamentally costly to a business in long run.
Smooth Transition to New Business Model
Increase Branding Relevancy
Shop Integration to Main Business Page
Easy Booking Process
I led the user research, user testings, and was involved in UI designing for particularly, Shopping journey. Overall, I was involved in the end to end development of the website, including Wireframes and Prototyping. I collaborated with three designers (Yu Jie, Chrissie and Jason) throughout this entire project.
Overall design moves away from the original "mountain-hiking" vibe and is now well structured.
We had an initial meetup with our client to understand their expectations and business problems. From that meeting, we embarked on a goal to see where OAALSG stands against its competitors. Below are examples of competitive and comparative analysis performed by taking considerations of other brands in the same/ different industries. These analysis tools allow us to adopt best practices possible.
Breaking Down User Journey
Our realisation on the tight deadline becomes apparent once we found out that there are l two user journeys of our main focus - Booking a SUP activity and Purchasing a SUP equipment.
Our Users
At an early stage, to verify the issues shared with us, a round of Usability Testing was carried out with interviews. and map out the existing user journeys.
Before embarking on designing, we deep dived into the existing behaviours of users to understand them better. We have conducted a series of user interviews. Our research targets on some of below points:
✢ Needs and frustrations of users
✢ How users discover activities
✢ Purchasing behaviours
We created two Personas, based on insights consolidated via Affinity Mapping, where these are mapped to the main behaviours of users.
Defining User Problem
We then consolidated the issues faced by two Personas to defined problem statements.
User Flows
We mapped the Personas to their user journey on the website to meet the intended success metric.
On the left is the current user flows. On the right is the improved user flows.
Early Ideation
A quick solution sketching was done to end the sprint.
Early Designs
This is how the early wireframes look like. We built on them to create high-fidelity prototypes. Throughout we experimented with different colours, shapes and layouts over remote sessions.
Usability Test & User Interview
To validate designs and prototypes, due to pandemic, we carried out remote tests with 5 users where we observed them in a controlled testing environment. Repeated iterations were also done based on discussion with client’s opinions.
Here is a detailed walkthrough of the revamped website.
Ready with New Branding Focus
A new logo is created for the brand to match its new business identity (SUP Boarding) as the current logo is more representative of hiking and outdoor activities.
We also chosen more cheerful and earthy colours to fits its outdoor nature of business, making it more interesting and relatable to users.
.gif)
Captivating SUP Boarding Experience
The existing gallery section contain no images with only linked social media icons. We have added in a photo gallery with images that could be linked directly from OAALSG Instagram page.
This enhances the user experience on the page by capturing their attentions. Video is also embedded after photo gallery to give more immersive expectations of SUP boarding.
Friendly, Approachable Copy
We use easy-going copy with users and let them feel sense of friendship when engaging the services.
Efficient and Transparent Booking Page
Previously activity booking is done via whatsapp booking with client. Manual booking arrangement has proven to be time- consuming.
Clear time slot and availability calendar has now incorporated as part of online booking process, eliminate the need for manual management.
A tide feature is also included to inform users on sea environment during booking.
Allow Users to Make Informed Decisions
Detailed activity informations e.g. basic participation requirements, clear activity cancellation/ postponement policy, a brief on SUP boarding as well as a list of its benefits are now included to help users in making a more informed choice.
Bringing All in One Place
Previously Shop page is redirected out to Carousell page, giving users a negative experience. To make a purchase, it is not straightforward due to messy product orders and limited filter options. We have created product pages with filters by categories, product functionality and user skill levels.
Increase User Engagement
We have added in a customer review section to welcome users to share their stories of each activity type as well products. This will enable a more engaged page, users will be able to have some insights on the activity/ product before purchase.
Credit Card Options
PayNow is the only option now. As many users indicated credit card as a common mode of payment during the user interviews, this could be an area to consider as the business expands.
Community Feature
Add community feature so users can promote the lifestyle and encourage more individuals to try out SUP boarding.
Comparison Tool
Add a comparison tool for the shop section so that users (especially beginners) can compare the properties of different products easily and have more confidence in their purchase decisions.
📮 Putting Ourselves into User’s Shoes
To fully understand participants’ mindset and needs in booking a SUP activities was not easy. We had to schedule multiple meetings to make an alignment.
⚖️ Balancing Users’ Needs & Client's Business Model
Client preferred mode of payment (PayNow) was different from our users’ preference (credit/debit card). It was an issue that we had to juggle throughout the project, meeting client’s business direction while not close out the alternate options completely.
