Gardens by The Bay
Gardens by The Bay
UI Design
UX Research
Usability Testing
Redesign
Summary
Summary
This project redesigns the website and mobile app into a singular platform so that both locals and tourists can access it easily, on the go.
This project redesigns the website and mobile app into a singular platform so that both locals and tourists can access it easily, on the go.
Problems
Problems
Users want to maximize their limited time at Gardens by the Bay while also seeking a seamless and enjoyable experience with family and friends.
Users want to maximize their limited time at Gardens by the Bay while also seeking a seamless and enjoyable experience with family and friends.
Solution
Solution
Redesign a mobile responsive website that is accessible for both Singaporeans and tourists that addresses both their pain points.
Redesign a mobile responsive website that is accessible for both Singaporeans and tourists that addresses both their pain points.
User Interviews
User Interviews
We conducted 16 user interviews with individuals who were visiting Gardens by the Bay to identify their needs, goals, and frustrations related to ticket purchasing, as well as their overall experience with the website and app.
Based on these interviews, we uncovered 3 key insights.
We conducted 16 user interviews with individuals who were visiting Gardens by the Bay to identify their needs, goals, and frustrations related to ticket purchasing, as well as their overall experience with the website and app.
Based on these interviews, we uncovered 3 key insights.
Information
7 people have difficulties deciding which attractions to visit.
Ticketing
6 people who booked tickets through the app have frustrations with the ticketing process.
Navigation
10 people have difficulties using the map due to unclear functions.
Information
7 people have difficulties deciding which attractions to visit.
Navigation
10 people have difficulties using the map due to unclear functions.
Ticketing
6 people who booked tickets through the app have frustrations with the ticketing process.
Persona
Persona
To better understand the target users and make design decisions accordingly, we have created two persona to tailor experiences to specific user segments for each of them.
To better understand the target users and make design decisions accordingly, we have created two persona to tailor experiences to specific user segments for each of them.
Attractions Redesign
Attractions Redesign
Existing
Existing
The current landing page on GBTB has all the attractions grouped together, making it difficult to determine if they are free or paid. This highlights the problem that users face.
The current landing page on GBTB has all the attractions grouped together, making it difficult to determine if they are free or paid. This highlights the problem that users face.
Redesign
Redesign
The Attractions are now labeled and categorized into Paid and Free, allowing users to easily see at a glance which attractions require ticket entry and which ones do not.
The Attractions are now labeled and categorized into Paid and Free, allowing users to easily see at a glance which attractions require ticket entry and which ones do not.
Ticketing Redesign
Ticketing Redesign
Existing
Existing
Across the website and app, users found the current ticket booking process frustrating due to multiple redundant steps. It was also not possible to purchase tickets for resident and non-resident tickets in a single transaction.
Across the website and app, users found the current ticket booking process frustrating due to multiple redundant steps. It was also not possible to purchase tickets for resident and non-resident tickets in a single transaction.
Redesign
Redesign
With the steps now condensed on a single page, users can easily book tickets without the hassle and confusion of selecting the correct ticket type.
For users who may not be aware that tickets are for one-time entry only, we have added Step 3 on another page to ensure they are well informed of the terms and conditions before making payment.
With the steps now condensed on a single page, users can easily book tickets without the hassle and confusion of selecting the correct ticket type.
For users who may not be aware that tickets are for one-time entry only, we have added Step 3 on another page to ensure they are well informed of the terms and conditions before making payment.
Map Redesign
Map Redesign
Existing
Existing
Most users had difficulties using the map due to it being too cluttered, and the functions of the buttons were not clear.
Most users had difficulties using the map due to it being too cluttered, and the functions of the buttons were not clear.
Redesign
Redesign
We added a search bar and legends on the side so that users can quickly access the locations of amenities.
We added a search bar and legends on the side so that users can quickly access the locations of amenities.
Usability Testing
Usability Testing
Now that we have solved all the pain points, usability testing sessions have been used to observe the user's behavior and collect feedback on their experiences
Now that we have solved all the pain points, usability testing sessions have been used to observe the user's behavior and collect feedback on their experiences
Before
Before
Users were unsure where they were on the map and needed clearer labels so that they know where they are and what the legends represent.
Users were unsure where they were on the map and needed clearer labels so that they know where they are and what the legends represent.
After
After
We added labels for better usability so that users understand where they are and what each legend means. The legend was also moved to the left side to make it more noticeable and accessible.
We added labels for better usability so that users understand where they are and what each legend means. The legend was also moved to the left side to make it more noticeable and accessible.
Before
Before
A lot of confusion among our users revolved around the labeling of 'Plan Your Visit' and 'Plan Your Trip'. Many asked what the difference was.
A lot of confusion among our users revolved around the labeling of 'Plan Your Visit' and 'Plan Your Trip'. Many asked what the difference was.
After
After
To ensure consistency, we decided to rename 'Plan Your Trip' to 'Itinerary Planner' and placed it under 'Plan Your Visit' based on our users' feedback, as that is where they expect to find the itinerary planner. Additionally, we relocated the button to the left for better accessibility.
To ensure consistency, we decided to rename 'Plan Your Trip' to 'Itinerary Planner' and placed it under 'Plan Your Visit' based on our users' feedback, as that is where they expect to find the itinerary planner. Additionally, we relocated the button to the left for better accessibility.
Final Look
Final Look
I took the feedback gathered from the usability test and iterated the design into a high fidelity mockup.
I took the feedback gathered from the usability test and iterated the design into a high fidelity mockup.
Landing Page
Landing Page
Ticketing
Ticketing
Map
Map
Landing Page
Landing Page
Ticketing
Ticketing
Map
Map
What I Learned
What I Learned
Creating Multiple Personas
Over the course of the two-week project design process, my team and I gained valuable insights on how to create effective solutions that address the unique needs, frustrations, and goals of multiple personas.
Creating Multiple Personas
Over the course of the two-week project design process, my team and I gained valuable insights on how to create effective solutions that address the unique needs, frustrations, and goals of multiple personas.
Future Steps
Future Steps
Mobile Responsive Site
Conduct usability testing on the mobile responsive site and make iterative improvements based on the findings.
Carousels
While carousels are effective for telling a visual story, my team and I may have relied on them too heavily in our design approach.
If we can prioritize the content and consider other display options, we could create a more balanced and effective website.
Mobile Responsive Site
Conduct usability testing on the mobile responsive site and make iterative improvements based on the findings.
Carousels
While carousels are effective for telling a visual story, my team and I may have relied on them too heavily in our design approach.
If we can prioritize the content and consider other display options, we could create a more balanced and effective website.
healthy365
healthy365
Website redesign to improve visual elements & provide
comprehensive & easily accessible information
Website redesign to improve visual elements & provide
comprehensive & easily accessible information