Redesign a website
Redesign a website
Redesign a website
Redesigning a website to improve accessibility and navigability
Redesigning a website to improve accessibility and navigability
Redesigning a website to improve accessibility and navigability
ROLES:
ROLES:
ROLES:
UX Researcher
UX Researcher
UX Researcher
UX Designer
UX Designer
UX Designer
UI Designer
UI Designer
UI Designer
Prototyper
Prototyper
Prototyper
TOOLS:
TOOLS:
TOOLS:
Figma
Figma
Figma
FigJam
FigJam
FigJam
AF Designer
AF Designer
AF Designer
DURATION:
DURATION:
DURATION:
80 Hours
80 Hours
80 Hours
OVERVIEW
OVERVIEW
The Gamer’s Club
The Gamer’s Club
“The Gamers Club” is a gaming arcade business located in Long Island that provides people of all generations access to a variety of gaming equipment such as PlayStation 5, Xbox Series, Nintendo Switch, VR sets, and retro gaming cabinets.
“The Gamers Club” is a gaming arcade business located in Long Island that provides people of all generations access to a variety of gaming equipment such as PlayStation 5, Xbox Series, Nintendo Switch, VR sets, and retro gaming cabinets.
Despite the business’s success in providing customers with an entertaining gaming space, they face challenges with providing information about their services and booking due to their current website design.
Despite the business’s success in providing customers with an entertaining gaming space, they face challenges with providing information about their services and booking due to their current website design.
My role as the UX/UI designer was to redesign their responsive website to address their current issues stemming from their website.
My role as the UX/UI designer was to redesign their responsive website to address their current issues stemming from their website.
BEFORE
BEFORE
AFTER
AFTER
OVERVIEW
The Gamer’s Club
“The Gamers Club” is a gaming arcade business located in Long Island that provides people of all generations access to a variety of gaming equipment such as PlayStation 5, Xbox Series, Nintendo Switch, VR sets, and retro gaming cabinets.
Despite the business’s success in providing customers with an entertaining gaming space, they face challenges with providing information about their services and booking due to their current website design.
My role as the UX/UI designer was to redesign their responsive website to address their current issues stemming from their website.
BEFORE
AFTER
THE CHALLENGE
THE CHALLENGE
THE CHALLENGE
“The Gamer’s Club” receives many phone calls regarding what services they provide
“The Gamer’s Club” receives many phone calls regarding what services they provide
“The Gamer’s Club” receives many phone calls regarding what services they provide
Many customers resort to directly contacting the store because they are not clear about what services the “Gamer’s Club” provides from their website.
Many customers resort to directly contacting the store because they are not clear about what services the “Gamer’s Club” provides from their website.
Many customers resort to directly contacting the store because they are not clear about what services the “Gamer’s Club” provides from their website.
“All relevant information is on our website about the services we offer. But people still call us.”
“All relevant information is on our website about the services we offer. But people still call us.”
“All relevant information is on our website about the services we offer. But people still call us.”
Current system prevents users from booking different floors
Current system prevents users from booking different floors
Current system prevents users from booking different floors
Customers can book one of two floors or the entire store depending on their needs.
Customers can book one of two floors or the entire store depending on their needs.
Customers can book one of two floors or the entire store depending on their needs.
However, when one of the floors is booked, the booking system prevents the other floor from being booked even if it is available; the system considers it to be double booking.
However, when one of the floors is booked, the booking system prevents the other floor from being booked even if it is available; the system considers it to be double booking.
However, when one of the floors is booked, the booking system prevents the other floor from being booked even if it is available; the system considers it to be double booking.
Customers are asked to call the store to confirm if any of the floors are available if they cannot book via website.
Customers are asked to call the store to confirm if any of the floors are available if they cannot book via website.
Customers are asked to call the store to confirm if any of the floors are available if they cannot book via website.
IDENTIFYING THE SOURCES TO PROBLEMS
IDENTIFYING THE SOURCES TO PROBLEMS
IDENTIFYING THE SOURCES TO PROBLEMS
Information about the business is difficult to find
Information about the business is difficult to find
Information about the business is difficult to find
1
Menu items in navigation bar is not well-organized
Menu items in navigation bar is not well-organized
Menu items in navigation bar is not well-organized
The commonly visited ‘About Us’ page is only accessible by hovering on the “More” tab. Users must then scroll through items to locate the “About Us” option as it is not alphabetically organized.
The commonly visited ‘About Us’ page is only accessible by hovering on the “More” tab. Users must then scroll through items to locate the “About Us” option as it is not alphabetically organized.
The commonly visited ‘About Us’ page is only accessible by hovering on the “More” tab. Users must then scroll through items to locate the “About Us” option as it is not alphabetically organized.
2
Text is difficult to read due to low contrast
Text is difficult to read due to low contrast
Text is difficult to read due to low contrast
Many sections do not meet accessibility standards. Due to low readability, users may be dissuaded from viewing texts that provide information about the business.
Many sections do not meet accessibility standards. Due to low readability, users may be dissuaded from viewing texts that provide information about the business.
Many sections do not meet accessibility standards. Due to low readability, users may be dissuaded from viewing texts that provide information about the business.
3
CTA buttons are unclear
CTA buttons are unclear
CTA buttons are unclear
CTA button does not provide any information describing where it will take users; users may be hesitant to click on the CTA when it only says “Click Me”.
CTA button does not provide any information describing where it will take users; users may be hesitant to click on the CTA when it only says “Click Me”.
CTA button does not provide any information describing where it will take users; users may be hesitant to click on the CTA when it only says “Click Me”.
USER RESEARCH
USER RESEARCH
USER RESEARCH
Interviewing adult gamers to understand the social aspects of gaming
Interviewing adult gamers to understand the social aspects of gaming
Interviewing adult gamers to understand the social aspects of gaming
Since the business primarily caters to children aged 6-15, I wanted to understand their preferences through their parents but didn't have direct access to that demographic. Thus, I interviewed gamers aged 20-35, as they are also users of the gaming space.
Since the business primarily caters to children aged 6-15, I wanted to understand their preferences through their parents but didn't have direct access to that demographic. Thus, I interviewed gamers aged 20-35, as they are also users of the gaming space.
Since the business primarily caters to children aged 6-15, I wanted to understand their preferences through their parents but didn't have direct access to that demographic. Thus, I interviewed gamers aged 20-35, as they are also users of the gaming space.
My primary objective during the interview was to gain insights into what individuals find enjoyable about gaming and how they utilize it for social interaction. Following my interviews, I used affinity mapping to find patterns to create a user persona.
My primary objective during the interview was to gain insights into what individuals find enjoyable about gaming and how they utilize it for social interaction. Following my interviews, I used affinity mapping to find patterns to create a user persona.
My primary objective during the interview was to gain insights into what individuals find enjoyable about gaming and how they utilize it for social interaction. Following my interviews, I used affinity mapping to find patterns to create a user persona.
Jake is an avid gamer who uses gaming as a way to connect with friends
Jake is an avid gamer who uses gaming as a way to connect with friends
Jake is an avid gamer who uses gaming as a way to connect with friends
Online gaming does not fully capture all aspects of in-person gaming
Online gaming does not fully capture all aspects of in-person gaming
Online gaming does not fully capture all aspects of in-person gaming
Although many prefer to game from home due to its convenience, online gaming does not exactly capture all social aspects of in-person gaming.
Although many prefer to game from home due to its convenience, online gaming does not exactly capture all social aspects of in-person gaming.
Although many prefer to game from home due to its convenience, online gaming does not exactly capture all social aspects of in-person gaming.
It is easier to communicate and engage in friendly banter during in-person gaming as it enables direct access to social cues (ex. body language and eye contact).
It is easier to communicate and engage in friendly banter during in-person gaming as it enables direct access to social cues (ex. body language and eye contact).
It is easier to communicate and engage in friendly banter during in-person gaming as it enables direct access to social cues (ex. body language and eye contact).
In-person gaming can be more eventful as one can engage in a different activity with others.
In-person gaming can be more eventful as one can engage in a different activity with others.
In-person gaming can be more eventful as one can engage in a different activity with others.
Using insights I gained from my research, it was important that the redesigned site is playful, highlights key information, and use images that captures the joys of social gaming to resonate with users.
Using insights I gained from my research, it was important that the redesigned site is playful, highlights key information, and use images that captures the joys of social gaming to resonate with users.
Using insights I gained from my research, it was important that the redesigned site is playful, highlights key information, and use images that captures the joys of social gaming to resonate with users.
IDEATE: EXPLORING SOLUTIONS
IDEATE: EXPLORING SOLUTIONS
IDEATE: EXPLORING SOLUTIONS
Reorganizing information for easy accessibility
Reorganizing information for easy accessibility
Reorganizing information for easy accessibility
To determine the best way to group and organize information, I conducted a card sorting task with users who identified as gamers to help me create a site map that fit with their mental framework.
To determine the best way to group and organize information, I conducted a card sorting task with users who identified as gamers to help me create a site map that fit with their mental framework.
To determine the best way to group and organize information, I conducted a card sorting task with users who identified as gamers to help me create a site map that fit with their mental framework.
Using a mobile-first design approach
Using a mobile-first design approach
Using a mobile-first design approach
I used a mobile-first design approach when designing because it is easier to adapt designs to larger screens. It also helps eliminate any unnecessary design decisions that are more likely to happen when starting with a desktop site.
I used a mobile-first design approach when designing because it is easier to adapt designs to larger screens. It also helps eliminate any unnecessary design decisions that are more likely to happen when starting with a desktop site.
I used a mobile-first design approach when designing because it is easier to adapt designs to larger screens. It also helps eliminate any unnecessary design decisions that are more likely to happen when starting with a desktop site.
SOLUTION
SOLUTION
SOLUTION
Accommodating the client’s color scheme to create a uniform design
Accommodating the client’s color scheme to create a uniform design
Accommodating the client’s color scheme to create a uniform design
Keeping in align with my client’s color scheme, I used shades of pink used in their logo throughout the website to have design uniformity.
Keeping in align with my client’s color scheme, I used shades of pink used in their logo throughout the website to have design uniformity.
Keeping in align with my client’s color scheme, I used shades of pink used in their logo throughout the website to have design uniformity.
At all steps, I tested the contrast of the text and background to ensure that it met WCAG accessibility standards.
At all steps, I tested the contrast of the text and background to ensure that it met WCAG accessibility standards.
At all steps, I tested the contrast of the text and background to ensure that it met WCAG accessibility standards.
Using a playful design to capture attention and improve readability
Using a playful design to capture attention and improve readability
Using a playful design to capture attention and improve readability
The current website uses many images within a section, which can be too distracting and overwhelming. Moreover, the text is difficult to read.
The current website uses many images within a section, which can be too distracting and overwhelming. Moreover, the text is difficult to read.
The current website uses many images within a section, which can be too distracting and overwhelming. Moreover, the text is difficult to read.
To grab user’s attention:
To grab user’s attention:
To grab user’s attention:
A white rectangle with a circular-end was used for the text background to convey a playful tone
A white rectangle with a circular-end was used for the text background to convey a playful tone
A white rectangle with a circular-end was used for the text background to convey a playful tone
The white background enhances readability and directs attention to the text as many sections uses a darker background.
The white background enhances readability and directs attention to the text as many sections uses a darker background.
The white background enhances readability and directs attention to the text as many sections uses a darker background.
BEFORE
BEFORE
BEFORE
AFTER
AFTER
AFTER
Using visual hierarchy to highlight key information
Using visual hierarchy to highlight key information
Using visual hierarchy to highlight key information
To improve readability:
To improve readability:
To improve readability:
A solid dark purple color was used for the background of the text
A solid dark purple color was used for the background of the text
A solid dark purple color was used for the background of the text
Highlighted key information by either bolding, underlining, or using bullet points.
Highlighted key information by either bolding, underlining, or using bullet points.
Highlighted key information by either bolding, underlining, or using bullet points.
BEFORE
BEFORE
BEFORE
AFTER
AFTER
AFTER
Grouping similar service options into a single category
Grouping similar service options into a single category
Grouping similar service options into a single category
Instead of separating different options of a single service as individual items, related options were grouped together for an easier viewing experience.
Instead of separating different options of a single service as individual items, related options were grouped together for an easier viewing experience.
Instead of separating different options of a single service as individual items, related options were grouped together for an easier viewing experience.
BEFORE
BEFORE
BEFORE
AFTER
AFTER
AFTER
Providing a more detailed option about which floor to book an event
Providing a more detailed option about which floor to book an event
Providing a more detailed option about which floor to book an event
To solve the double-booking issue, I added options for users to indicate which floor they would like to book their event within a the party package service.
To solve the double-booking issue, I added options for users to indicate which floor they would like to book their event within a the party package service.
To solve the double-booking issue, I added options for users to indicate which floor they would like to book their event within a the party package service.
BEFORE
BEFORE
BEFORE
AFTER
AFTER
AFTER
Separating the selection of main and add-on services into distinct steps
Separating the selection of main and add-on services into distinct steps
Separating the selection of main and add-on services into distinct steps
Mindful of users' cognitive framework, I broke down the booking process into distinct steps to guide users more effectively and locate desired services without the need to peruse an extensive list.
Mindful of users' cognitive framework, I broke down the booking process into distinct steps to guide users more effectively and locate desired services without the need to peruse an extensive list.
Mindful of users' cognitive framework, I broke down the booking process into distinct steps to guide users more effectively and locate desired services without the need to peruse an extensive list.
BEFORE
BEFORE
BEFORE
AFTER
AFTER
AFTER
TESTING AND ITERATIONS
TESTING AND ITERATIONS
TESTING AND ITERATIONS
Overall, the prototype was well-received due to the uniformity and playfulness of the design. Many also found the site to be easily navigable to find specific information. However, there were some things that users struggled with.
Overall, the prototype was well-received due to the uniformity and playfulness of the design. Many also found the site to be easily navigable to find specific information. However, there were some things that users struggled with.
Overall, the prototype was well-received due to the uniformity and playfulness of the design. Many also found the site to be easily navigable to find specific information. However, there were some things that users struggled with.
40% of users struggled to identify the “Continue” button
40% of users struggled to identify the “Continue” button
40% of users struggled to identify the “Continue” button
To avoid confusion, the “Back” and “Continue” buttons were horizontally placed next to each other and modified the color of the “Back” button from green to gray to create a visual distinction.
To avoid confusion, the “Back” and “Continue” buttons were horizontally placed next to each other and modified the color of the “Back” button from green to gray to create a visual distinction.
To avoid confusion, the “Back” and “Continue” buttons were horizontally placed next to each other and modified the color of the “Back” button from green to gray to create a visual distinction.
BEFORE
BEFORE
BEFORE
AFTER
AFTER
AFTER
40% of users experienced difficulty locating the “Membership” page using the navigation bar
40% of users experienced difficulty locating the “Membership” page using the navigation bar
40% of users experienced difficulty locating the “Membership” page using the navigation bar
Some users did not expect the “Membership” page to be found within the “About” overlay menu. Thus, users can now access the “Membership” page via the main navigation bar for a easier navigation experience.
Some users did not expect the “Membership” page to be found within the “About” overlay menu. Thus, users can now access the “Membership” page via the main navigation bar for a easier navigation experience.
Some users did not expect the “Membership” page to be found within the “About” overlay menu. Thus, users can now access the “Membership” page via the main navigation bar for a easier navigation experience.
BEFORE
BEFORE
BEFORE
AFTER
AFTER
AFTER
FINAL PRODUCT:
DESKTOP VS MOBILE
FINAL PRODUCT:
DESKTOP VS MOBILE
FINAL PRODUCT:
DESKTOP VS MOBILE
Designing a responsive website
Designing a responsive website
Designing a responsive website
When creating the design for mobile and desktop, I scaled images and text accordingly to ensure that the design is similar. Some elements had to undergo slight modifications for the mobile design (ex. boxes for services) for readability.
When creating the design for mobile and desktop, I scaled images and text accordingly to ensure that the design is similar. Some elements had to undergo slight modifications for the mobile design (ex. boxes for services) for readability.
When creating the design for mobile and desktop, I scaled images and text accordingly to ensure that the design is similar. Some elements had to undergo slight modifications for the mobile design (ex. boxes for services) for readability.
HOMEPAGE
HOMEPAGE
HOMEPAGE (Desktop)
HOMEPAGE (Mobile)
ABOUT US
ABOUT US
ABOUT US (Desktop)
ABOUT US (Mobile)
RATES
RATES
RATES (Desktop)
RATES (Mobile)
LESSONS LEARNED
LESSONS LEARNED
LESSONS LEARNED
Card sorting results is not absolute
Card sorting results is not absolute
Card sorting results is not absolute
I conducted card sorting to analyze user information grouping patterns. Based on the results, I initially developed a sitemap aligned with those patterns. However, testing revealed that strict adherence to the results was not the optimal solution.
I conducted card sorting to analyze user information grouping patterns. Based on the results, I initially developed a sitemap aligned with those patterns. However, testing revealed that strict adherence to the results was not the optimal solution.
I conducted card sorting to analyze user information grouping patterns. Based on the results, I initially developed a sitemap aligned with those patterns. However, testing revealed that strict adherence to the results was not the optimal solution.
Ultimately, the designer must assess the findings and make informed decisions for the best solution. Card sorting provided valuable insights into general grouping tendencies but is not the final determinant.
Ultimately, the designer must assess the findings and make informed decisions for the best solution. Card sorting provided valuable insights into general grouping tendencies but is not the final determinant.
Ultimately, the designer must assess the findings and make informed decisions for the best solution. Card sorting provided valuable insights into general grouping tendencies but is not the final determinant.
