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.
User research, UI/UX design, wireframes, design systems, usability testing
Figma, FigJam, OptimalWorkshop
(Scroll horizontally to browse)
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)
Provide youths with a clear and accessible method to gain a comprehensive understanding of the membership’s offerings
Ensure that the PWA clearly demonstrates its value for youths who are cautious about committing to a paid service
(Scroll horizontally to browse)
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.
User research, UI/UX design, wireframes, design systems, usability testing, information architecture, project management
Figma, FigJam, OptimalSort
↑ NParks website home page adjusted for prototype
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.
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:
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.
↓ NParks website sitemap (Before)
↓ NParks website sitemap (After)
É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.
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.
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
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.
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.
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
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.
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.
User research, UI/UX design, wireframes, design systems, usability testing, information architecture
Figma, FigJam, OptimalSort
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)
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)
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:
↑ Feature analysis on Torque Golf and 3 competitors
↑ Customers trying products in-store
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.
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:
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.
Jenson needs to get advice and recommendations so he can make informed decisions when buying golf equipment.
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
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.
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.
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
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.
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.
Logo & visual identity design, website design, no-code web building on Webflow
Adobe Illustrator, Adobe Photoshop, Figma, Webflow
↑ TômTex website home page
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.
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.
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 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.
Logo & visual identity design, website design, mobile app design, no-code web building on Webflow
Adobe Illustrator, Adobe Photoshop, Figma, Webflow
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.
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.
Logo & visual identity, website design, mobile app design, PDF report design, iconography
Adobe Illustrator, Adobe XD, Adobe InDesign, Adobe Photoshop
↑ Sequential Skin mobile app mockup
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.
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.
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 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 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