Redesigning the Starter PWA* to boost engagement and membership conversion through enhanced user experience.

As our final project in the General Assembly User Experience Immersive Bootcamp, my team and I embarked on a real client project where we engaged with youths to understand their needs and conducted an analysis to identify issues and make recommendations for the Starter PWA.

*A Progressive Web App (PWA) is a web application that combines modern web capabilities with a native app-like user experience on both desktop and mobile devices.

Role

User research, UI/UX design, wireframes, design systems, usability testing

Tools

Figma, FigJam, OptimalWorkshop

Original Starter PWA

(Scroll horizontally to browse)

Challenges: Traction, Engagement, Retention

  • The Starter PWA lacks sufficient visitor traction and struggles to convert visitors into members.
  • User engagement on the Starter PWA is suboptimal due to usability issues and a lack of compelling features.
  • The Starter PWA struggles to retain members during the renewal process.

Key Findings from Initial Usability Testing

  • Lack of information on membership offerings
  • Copywriting inconsistent and unclear
  • Difficult to navigate and find information
  • Not optimised for desktop

Content is key, but discoverability is crucial

Upon analyzing the PWA, we found significant user experience issues due to its information architecture. The burger menu was missing core pages, and inconsistent link naming added to the confusion.

To address this, we developed a new sitemap including links to all essential pages with pillar groups in the burger menu, ensuring users can easily find the information they need. We also propose adding new content from relevant websites to enrich the user experience.

(hover/tap to see before and after)

↓ Starter PWA sitemap (Before)

↓ Starter PWA sitemap (After)

↓ Starter PWA sitemap (Before)

↓ Starter PWA sitemap (After)

Based on our research, the team redesigned the PWA with these two focuses

Provide youths with a clear and accessible method to gain a comprehensive understanding of the membership’s offerings

  • Including comprehensive information
  • Prioritisation of content
  • Clear presentation of information
  • Easy site navigation

Ensure that the PWA clearly demonstrates its value for youths who are cautious about committing to a paid service

  • Success stories
  • Past events

Redesigned Starter PWA

(Scroll horizontally to browse)

Feedback from usability testing on redesign

  • Overall, the proposed PWA was easy to navigate, clear and simple to use
  • Users found information in the Work, Live, and Play tabs clear and helpful in understanding the membership offerings.
  • The aesthetics of the proposed design were attractive and consistent
  • Copywriting was clear and easy to understand
  • Redesigned PWA received an SUS score of 87, above the industry average of 68

Meeting client's needs

As we concluded our presentation, the team's positive feedback reassured us that our work will significantly aid Young NTUC in their future PWA development. The client found our research validated their existing findings, and they found our redesign to be exactly what they needed. They plan to implement our recommendations based on our proposal of prioritisation due to budget limitations.

Revamping the NParks website based on user research findings, implementing solutions to address identified issues and enhance user experience.

Role

User research, UI/UX design, wireframes, design systems, usability testing, information architecture, project management

Tools

Figma, FigJam, OptimalSort

↑ NParks website home page adjusted for prototype

About NParks

NParks, a statutory board in Singapore, focuses on maintaining and enhancing national parks, nature reserves, and green spaces to create an optimal living environment. By engaging the community and restoring nature in urban areas, NParks aims to foster stewardship and promote sustainability for future generations.

Conducting User Research

The team conducted 18 user interviews and 6 contextual inquiries. While online user interviews focused on users' experiences with the NParks website, contextual inquiries provided more insights into users’ lifestyle and needs when hiking. These observations were mapped to generate valuable insights which we used to create our personas.

Some of the key insights include:

  • I want to have autonomy over my route planning.
  • I want an overview of the available routes.
  • I need to find a trail that matches my fitness level.
  • I like to ensure that my hike fits within my schedule.
  • I feel reassured when I understand my trail’s location and surroundings.
  • I want to know what I might encounter on my route.
  • I find the presentation of information too overwhelming.

Reorganising the Sitemap

In user interviews, a common sentiment was that the NParks website felt overwhelming and content-heavy. To streamline navigation, we categorized items into three top-level groups through a closed card sort, referencing similar websites for inspiration.

↓ Pictured: NParks website sitemap (Before)

↓ Pictured: NParks website sitemap (After)

↓ NParks website sitemap (Before)

↓ NParks website sitemap (After)

The Experienced Hiker

Émilie is a seasoned hiker who loves spending her time exploring nature to seek solace and inspiration.

She needs a way to explore and navigate new routes without getting lost.

The Beginner Hiker

Tommy recently developed an interest in hiking and now enjoys taking his family on weekend hikes.

He needs a way to find trails that are suitable for his family with young children.

The Outdoor Researcher

Zaitun, a horticulture student, seeks to deepen her knowledge of plants through hiking expeditions.

She needs a way to find information on plants she might encounter on trails.

Ideation & Sketching

When designing the "Plan a Route" feature, we took inspiration from best-in-class websites like AllTrails and Google Maps. Our aim was to ensure familiarity for users while introducing elements tailored to our unique planning functionality.

↑ Pictured: Initial layout sketches for the "Plan a Route' feature

The "Plan a Route" Feature

Provide users with a feature to plan a route by linking multiple trails and filter based on parameter information to identify trails that suit their needs.

↑ Pictured: "Plan a Route" feature (map view)

↑ Pictured: "Plan a Route" feature (grid view)

↑ Pictured: "Plan a Route" feature (trail details)

↑ Pictured: "Plan a Route" feature (trail filter)

↑ Pictured: Sign in page

Note: There will be slight differences between the prototype and the mockups featured in this case study as the prototype only includes the first round of iteration.

Accessing Planned Routes on Mobile

Following route planning on the NParks website, users can seamlessly access their planned routes through the NEAR mobile app, enabling real-time navigation during their hike.

↓ Accessing a planned route in the NEAR app

Testing the Prototype

Usability testing was conducted with 5 participants, who generally responded positively to its features, finding them fun and interactive. Additionally, they expressed that the feature would be useful for many individuals including themselves. Most users encountered no significant issues completing most tasks. Our first prototype received an average SUS* score of 69.5.

Dissatisfied with the initial results, the team opted to iterate the prototype to address identified usability issues and subsequently conducted a second round of usability testing. This iteration resulted in a notable increase in the SUS score to 83.5, indicating significant improvement in user satisfaction.

*The System Usability Scale (SUS) is a simple, ten-item attitude Likert scale giving a global view of subjective assessments of usability.

Next Steps

While the proposed solution currently resides on the NParks website for desktop users, we envision potential future integration of the "Plan a Route" feature into the NEAR app, providing users with the flexibility to plan routes on their mobile devices as well.

↓ Mobile app adaptation of the "Plan a Route" feature

Key Learnings

Collaborating with outstanding teammates - Jeremy, Aloysius, and Joyce - was a pleasure in my first UI/UX group project. This experience underscored the importance of leveraging individual expertise within the team and the crucial element of trust in achieving our shared objectives. Additionally, it taught me the vital role of effective communication, the importance of managing timelines and tasks, and the necessity of keeping everyone updated to ensure smooth and efficient teamwork.

Reorganising Torque Golf’s website to showcase products in a clearer manner while encouraging users to make purchases through an improved user experience and added features.

Role

User research, UI/UX design, wireframes, design systems, usability testing, information architecture

Tools

Figma, FigJam, OptimalSort

About Torque Golf

Torque Golf is a golf equipment retailer and club fitter that specializes in bespoke and unique golf equipment.

(Hover/tap to see original and redesigned website)

↑ Torque Golf website (Original)

↑ Torque Golf website (Redesigned)

Reorganising the Sitemap

Based user interview insights revealing a preference to browse by both brands and product types, the proposed sitemap introduces the ability to sort by product types. These categories have been curated based on card sorting analysis, ensuring intuitive and efficient navigation for users.

(hover/tap to see before and after)

↓ Torque Golf website sitemap (Before)

↓ Torque Golf website sitemap (After)

Competitive Analysis of Features

After conducting a thorough analysis of Torque Golf's website alongside those of three key competitors, I have identified several potential enhancements to elevate the user experience on Torque Golf's platform, such as:

  • Home page content
  • Categorise by product type
  • Information to locate store
  • Latest products
  • Compare products

↑ Feature analysis on Torque Golf and 3 competitors

↑ Customers trying products in-store

Contextual Inquiry

To gain comprehensive insights into users' needs, I conducted observational research by visiting multiple golf stores and engaging in one-on-one conversations with both staff members and customers. This hands-on approach allowed me to closely observe shoppers' behaviours and interactions with golf products while also gaining firsthand perspectives on shopping experiences and product preferences.

User Interview

The aim of this research is to investigate the behaviours and preferences of users when shopping on golf e-commerce websites. A total of 10 participants were recruited based on the criteria that they either have prior experience purchasing golf equipment online or intend to do so. The participants consisted of 3 beginner golfers with less than one year of experience, 5 intermediate golfers with 2-5 years of experience, and 2 experienced golfers with over 10 years of experience in golf.

Here are some key insights gained from the research:

  • I want to make informed decisions when buying golf equipment
  • I want to receive advice on products
  • I like to get product recommendations
  • I like to do comprehensive research on products before purchasing them
  • I want to be certain that I’m buying the right products that suit my needs

The Intermediate Golfer

Jenson, 29, deeply invested in golf for 2 years, values the sport for both skill enhancement and social bonding with his close-knit group. Despite daily online browsing, he prefers testing equipment in-store for suitability, seeking expert advice for wise investments. However, he faces challenges balancing golf with work commitments and feels uncertain about online product choices despite valuing its convenience.

Problem

Jenson needs to get advice and recommendations so he can make informed decisions when buying golf equipment.

Solution

By answering a few questions about their proficiency level and playing style, users will get products recommended for them.

↓ User Flow for Club Selector Tool

↓ Wireflow for Club Selector Tool

The Experienced Golfer

Gary, 52, a devoted golfer of over two decades, aspires to retire and dedicate his days to playing golf. Although he seldom shops for golf equipment online, he occasionally peruses to stay updated. Armed with extensive knowledge of golf gear and a focus on technical specifications, he actively seeks information on new releases. Gary prioritises finding suitable equipment but finds the in-store comparison process tedious.

Problem

Gary needs an easier way to carry out comprehensive research so he can be certain that he is buying the right products that suit his needs.

Solution

Provide users with a way to compare products in a clear and structured format so they can analyse the product details and specs more easily.

↓ User Flow for Compare Tool

↓ Wireflow for Compare Tool

The Prototype

Provide users with a feature to plan a route by linking multiple trails and filter based on parameter information to identify trails that suit their needs.

↑ Home

↑ Product Detail

↑ Product Overview

↑ Cart

↑ Checkout

↑ Payment

↑ Club Selector Tool

↑ Help

↑ Product Recommendation

↑ Compare Tool

↑ Compare Images

↑ Compare Details

↑ Pictured: Home

↑ Pictured: Product Detail

↑ Pictured: Product Overview

↑ Pictured: Cart

↑ Pictured: Checkout

↑ Pictured: Payment

↑ Pictured: Club Selector Tool

↑ Pictured: Help

↑ Pictured: Product Recommendation

↑ Pictured: Compare Tool

↑ Pictured: Compare Images

↑ Pictured: Compare Details

Key Learnings

The biggest challenge in this project was addressing the preference of most golfers to purchase equipment in person, where they can physically feel and test the products. Given the brief to enhance the online shopping experience, I decided to focus on the research phase of the shopping process, as user research indicated that while golfers prefer to buy in-store, they primarily conduct their product research online.

Designing the visual identity and website for TômTex, a revolutionary, bio-based, and high performance material created from seashell or mushrooms waste.

Role

Logo & visual identity design, website design, no-code web building on Webflow

Tools

Adobe Illustrator, Adobe Photoshop, Figma, Webflow

↑ TômTex website home page

About TômTex

TômTex is a new-generation 100% bio-based material, a sustainable and economical leather alternative made from shell seafood waste, mushroom and coffee grounds. Unlike many existing materials in the market, TômTex believes in being transparent about its process and product.

The Logo

Tômtex's logo is an embodiment of the brand's support for the circular economy and the natural ecosystem. The 'o' and 'x' symbols in TômTex's logo represent its commitment to giving waste materials new life. The 'o' signifies the cycle of reusing and recycling materials, potentially symbolizing the circular economy. The 'x' represents the natural decomposition of unwanted materials or their recycling for future production.

Colours

The International Orange is striking and vibrant, radiating strength and positivity. Wine Burgundy adds sophistication, while Ghost White balances the warm tones with a softer, cooler alternative to white.

The Website

The website was designed with the intention to show the process behind TômTex in a manner that is easy to understand. This was achieved by breaking down wordy and informative texts into smaller sections and adding visuals to illustrate what is said. The design also focuses on maintaining a visual flow with most pages having one unified background colour.

Designing the brand identity, website, and mobile app for Soaak, a healthtech company using sound frequency compositions to reduce stress, decrease anxiety, and boost energy.

Role

Logo & visual identity design, website design, mobile app design, no-code web building on Webflow

Tools

Adobe Illustrator, Adobe Photoshop, Figma, Webflow

Elevating Soaak's Digital Presence

To gain the trust of potential customers and companies, Soaak's website and mobile app were designed to reflect professionalism, confidence, and credibility. The focus on creating an immersive, deeply relaxing experience was infused into their new branding and digital touchpoints.

Enhanced Branding with Tranquil Tones and Dynamic Design

Aqua tones and hues of teal, blue, and green create an oceanic color palette that instantly exudes calm. Sound frequency-inspired wave graphics and customized icons blend a scientific edge with holistic gentleness. Free-flowing yet accessible fonts were selected to reflect the brand’s movement and fluidity.

Designed the visual identity, website and mobile app for Sequential Skin, a beauty startup that developed the world’s first proprietary skin mask that deeply analyses your skin genetics and microbiome.

Role

Logo & visual identity, website design, mobile app design, PDF report design, iconography

Tools

Adobe Illustrator, Adobe XD, Adobe InDesign, Adobe Photoshop

↑ Sequential Skin mobile app mockup

About Sequential Skin

Sequential Skin is a beauty startup founded by scientists Dr. A. Dashi and Dr. O. Worsley. They have developed the world’s first proprietary skin mask that deeply analyses your skin genetics and microbiome.

The Logo

Sequential Skin's visual identity represents the two important components in the skin analysis that they provide, which are genetics and microbiome. In the symbol, the dotted circle represents the skin genetics, showing resemblance to a part of the DNA strand. The circle made up of lines models after one of the microorganisms found in the skin microbiome.

Colour & Typeface

To create an allure that appeals to consumers of the beauty industry, colours that exude a sense of elegance and glow were used. The geometric typeface adds to the look a touch of reliability, an important trait to convey for a brand that places strong emphasis on science.

The Website

The website was designed to educate users about the science behind the Sequential Skin patch and explain how their results are generated. A user-friendly sign-in flow was created to allow customers to access their skin test results, explore personalized recommendations, and download a PDF of the full report. It was crucial to present the complex and technical test results in a simplified, digestible manner. Additionally, the website includes a seamlessly designed e-commerce flow, allowing users to easily and conveniently purchase the skin test kit.

The Mobile App

The mobile app was designed to provide users with easy access to their test results and detailed skin profile in a user-friendly format. Users can explore various aspects of their skin profile, understand its implications, and receive personalized recommendations. The app also features a login and e-commerce flow, similar to the website, along with additional skincare tips.

↑ Skin test kit packaing

↑ Instruction card

↑ Custom iconography

If you're liking what you see, let's get in touch!

Email   /   LinkedIn

NParks

Project Type
Role
Tools
Year
PreviousNext