Poki.com redesign

Poki.com redesign

Poki.com redesign

Indie gaming made simpler.

Indie gaming made simpler.

Indie gaming made simpler.

Indie gaming made simpler.

Poki.com reimagined for an enhanced user experience where nothing gets in between the players and their grind. A more modern, responsive, and accessible way to find new games.

Poki.com reimagined for an enhanced user experience where nothing gets in between the player and their grind. A more modern, responsive, and accessible way to find new games.

Poki.com reimagined for an enhanced user experience where nothing gets in between the players and their grind. A more modern, responsive, and accessible way to find new games.

View Prototype

Background

Background

Background

Poki.com provides instant play games that are great for quick play interactive sessions with family and friends. The site also acts as an outlet for boredom and stress relief at any point for the regular user who possesses or are developing an interest in gaming. Its platform allows game developers and players to connect as the site gives first access to certain newly released games that players can access on Poki.com for the very first time.

Poki.com provides instant play games that are great for quick play interactive sessions with family and friends. The site also acts as an outlet for boredom and stress relief at any point for the regular user who possesses or are developing an interest in gaming. Its platform allows game developers and players to connect as the site gives first access to certain newly released games that players can access on Poki.com for the very first time.

Poki.com provides instant play games that are great for quick play interactive sessions with family and friends. The site also acts as an outlet for boredom and stress relief at any point for the regular user who possesses or are developing an interest in gaming. Its platform allows game developers and players to connect as the site gives first access to certain newly released games that players can access on Poki.com for the very first time.

Role:

Role:

Role:

Role:

Researcher, Product Designer

Researcher, Product Designer

Researcher, Product Designer

Researcher, Product Designer

Skills:

Skills:

Skills:

Skills:

User Research, Wireframing, Branding, Prototyping, User Testing

User Research, Wireframing, Branding, Prototyping, User Testing

User Research, Wireframing, Branding, Prototyping, User Testing

User Research, Wireframing, Branding, Prototyping, User Testing

Tools:

Tools:

Tools:

Tools:

Figma, G-Suite, Optimal Workshop,

Canva

Figma, G-Suite, Optimal Workshop,

Canva

Figma, G-Suite, Optimal Workshop,

Canva

Figma, G-Suite, Optimal Workshop,

Canva

Timeline:

Timeline:

Timeline:

Timeline:

4 weeks

4 weeks

4 weeks

4 weeks

The Problem

The Problem

The Problem

Despite Poki's high user engagement, the website's user interface doesn't take into account many established usability heuristics and accessibility principles created to ensure the user's have a seamless experience navigating websites. The objectives of this redesign is to maintain a user-centric approach that improves the overall site's functionality, user engagement, and efficiency for when user's try to navigate all the newly released Indie Games.

Despite Poki's high user engagement, the website's user interface doesn't take into account many established usability heuristics and accessibility principles created to ensure the user's have a seamless experience navigating websites. The objectives of this redesign is to maintain a user-centric approach that improves the overall site's functionality, user engagement, and efficiency for when user's try to navigate all the newly released Indie Games.

Despite Poki's high user engagement, the website's user interface doesn't take into account many established usability heuristics and accessibility principles created to ensure the user's have a seamless experience navigating websites. The objectives of this redesign is to maintain a user-centric approach that improves the overall site's functionality, user engagement, and efficiency for when user's try to navigate all the newly released Indie Games.

Step 1: Research:


Step 1: Research:


Step 1: Research:


To ensure that our re-design targeted real-life issues that Poki user's were facing, various forms of research were conducted to ensure that our redesign avoided any biases and would work to enhance the site's already successful aspects.

To ensure that our re-design targeted real-life issues that Poki user's were facing, various forms of research were conducted to ensure that our redesign avoided any biases and would work to enhance the site's already successful aspects.

Methods:

Methods:

Methods:

Methods:

Secondary Research

Secondary Research

Secondary Research

Secondary Research

Competitive Analysis

Competitive Analysis

Competitive Analysis

Competitive Analysis

Heuristic Evaluation

Heuristic Evaluation

Heuristic Evaluation

Heuristic Evaluation

User Interviews

User Interviews

User Interviews

User Interviews

The objectives we kept in mind as we conducted our research:

  1. Learn how user's would want to navigate Poki.com sites.

  2. Learn definitive areas of focus to improve on for the site to obtain higher user satisfaction.

  3. Learn the best way to organize Poki.com's layout and information architecture.

  4. Learn how user's use the site responsively on different devices.

The objectives we kept in mind as we conducted our research:


  1. Understand why user's feel motivated to learn a new game.

  2. Understand the steps commonly taken by users when learning a new game.

  3. Learn if there are pain points in the process that users might find demotivating so that we can reduce this tension.

  4. Learn what type of content/support user's find most helpful in the process of learning a new game

The objectives we kept in mind as we conducted our research:

  1. Learn how user's would want to navigate Poki.com sites.

  2. Learn definitive areas of focus to improve on for the site to obtain higher user satisfaction.

  3. Learn the best way to organize Poki.com's layout and information architecture.

  4. Learn how user's use the site responsively on different devices.

Secondary Research:

Secondary Research:

From analyzing outside research conducted on Poki.com's user engagement we were able to find out that:

From analyzing outside research conducted on Poki.com's user engagement we were able to find out that:

From analyzing outside research conducted on Poki.com's user engagement we were able to find out that:

Sources: 1. Similarweb.com 2. Crunchbase.com 3. Semrush.com

Sources: 1. Similarweb.com 2. Crunchbase.com 3. Semrush.com

  • Poki.com garners about 85.6 million monthly visitors with an average 5.79 pages per visit and an average visit duration of 12 minutes and 9 seconds

  • It's user base is almost equally male and female and predominantly from the age range of 10 - 34 years old.

  • It's top countries of usage are USA, India, and Turkey and in terms of usage by device.

  • Poki.com garners about 85.6 million monthly visitors with an average 5.79 pages per visit and an average visit duration of 12 minutes and 9 seconds

  • It's user base is almost equally male and female and predominantly from the age range of 10 - 34 years old.

  • It's top countries of usage are USA, India, and Turkey and in terms of usage by device.

  • Poki.com garners about 85.6 million monthly visitors with an average 5.79 pages per visit and an average visit duration of 12 minutes and 9 seconds

  • It's user base is almost equally male and female and predominantly from the age range of 10 - 34 years old.

  • It's top countries of usage are USA, India, and Turkey and in terms of usage by device.

Competitive Analysis

Competitive Analysis

Competitive Analysis

I researched the market for existing competitors to understand how they were already providing this type of service to gamers. We focused on examining their key features, successes, and shortcomings to identify opportunities for innovation.

I researched the market for existing competitors to understand how they were already providing this type of service to gamers. We focused on examining their key features, successes, and shortcomings to identify opportunities for innovation.

I researched the market for existing competitors to understand how they were already providing this type of service to gamers. We focused on examining their key features, successes, and shortcomings to identify opportunities for innovation.

Site's Examined:

Site's Examined:

Site's Examined:

Site's Examined:

Key Findings:

Key Findings:

Key Findings:

  1. All competitor sites including Poki lack informational hierarchy, an established design system, and aesthetics that are adapted to modern day design patterns. Improving these qualities will make Poki stand out from the rest.


  1. Other competitors give user's the opportunity to customize their playing experience through personalized accounts which give user's access to features like favorited games, or personalized content


  1. Other competitors use features like leaderboards to improve the sites community engagement, and overall player motivation.

  1. All competitor sites including Poki lack informational hierarchy, an established design system, and aesthetics that are adapted to modern day design patterns. Improving these qualities will make Poki stand out from the rest.


  1. Other competitors give user's the opportunity to customize their playing experience through personalized accounts which give user's access to features like favorited games, or personalized content


  1. Other competitors use features like leaderboards to improve the sites community engagement, and overall player motivation.

  1. There is only one existing competitor that provides coaching out of the sites we looked at. (ProGuides) - This indicates that there are more ways this feature could be explored that could give our product a competitive edge against the rest.


  1. There is a gap in the market for more variety game learning content. Most sites focus on MMO's and lack content which would help players in other genres of gaming.


  1. All three competitors incorporate some social aspect into their site for engagement. This includes things such as leaderboards discussion forums, or the ability to chat with other players.


  1. All competitor sites including Poki lack informational hierarchy, an established design system, and aesthetics that are adapted to modern day design patterns. Improving these qualities will make Poki stand out from the rest.


  1. Other competitors give user's the opportunity to customize their playing experience through personalized accounts which give user's access to features like favorited games, or personalized content


  1. Other competitors use features like leaderboards to improve the sites community engagement, and overall player motivation.

Heuristic Evaluation

Heuristic Evaluation

Heuristic Evaluation

To better analyze what usability issues the site was having - a heuristic evaluation was conducted to understand what specific principles could be targeted and improved on Poki's site.

To better analyze what usability issues the site was having - a heuristic evaluation was conducted to understand what specific principles could be targeted and improved on Poki's site.

To better analyze what usability issues the site was having - a heuristic evaluation was conducted to understand what specific principles could be targeted and improved on Poki's site.

User Interviews

User Interviews

User Interviews

To then garner real live feedback from users, I conducted 5 user interviews through discord. Participants were asked about their experience with Indie games, and were then asked to share their screen and walk through Poki as a site. From this we were able to learn that many of the usability issues we predicted were further validated through our user's experiences.

Affinity Mapping

Affinity Mapping

Affinity Mapping

With our raw user interview data - we sorted that into an affinity map to organize the data and decipher issues as well as strengths of Poki commonly mentioned amongst our users.

With our raw user interview data - we sorted that into an affinity map to organize the data and decipher issues as well as strengths of Poki commonly mentioned amongst our users.

With our raw user interview data - we sorted that into an affinity map to organize the data and decipher issues as well as strengths of Poki commonly mentioned amongst our users.

There were several reoccurring patterns amongst the user's experiences.

Many of these patterns further validated the commonness of our problem.

There were several reoccurring patterns amongst the user's experiences.

Many of these patterns further validated the commonness of our problem.

Experience with free online games:

Experience with free online games:

All participants stated that they interacted with Free online games in their current lifestyle or consistently growing up:

  • Top Competitor sites were: Y8.com and Coolmathgames.com


All said they play free online games as it's an affordable way to pass time when bored or in need of entertainment

  • 3/5 said it's good for exploring new game genres and to identify your preferred niche.


5/5 said that they have never heard of or interacted with Poki.com despite their familiarity with free online games.

  • 2/5 said Poki's user interface was completely unfamiliar to them

  • 3/5 said they were somewhat familiay with Poki's coms layout due to exposure to other free online gaming sites.

All participants stated that they interacted with Free online games in their current lifestyle or consistently growing up:

  • Top Competitor sites were: Y8.com and Coolmathgames.com


All said they play free online games as it's an affordable way to pass time when bored or in need of entertainment

  • 3/5 said it's good for exploring new game genres and to identify your preferred niche.


5/5 said that they have never heard of or interacted with Poki.com despite their familiarity with free online games.

  • 2/5 said Poki's user interface was completely unfamiliar to them

  • 3/5 said they were somewhat familiay with Poki's coms layout due to exposure to other free online gaming sites.

Issues with Categories:

Issues with Categories:

One of the biggest concerns mentioned by 5/5 participants in the display and lack of accessible categories on Poki's website.

  • 5/5 weren't aware and disliked the fact that all categories were placed at the the bottom of the explore page after lots of scrolling was done.

  • 5/5 recommended moving the categories to somewhere at the top or edge for more visibility. (keeping them accessible)

  • Categories were too broad and not placed in alphabetical order

  • categories also felt pointless as the results after clicking felt random and arbitrary.

One of the biggest concerns mentioned by 5/5 participants in the display and lack of accessible categories on Poki's website.

  • 5/5 weren't aware and disliked the fact that all categories were placed at the the bottom of the explore page after lots of scrolling was done.

  • 5/5 recommended moving the categories to somewhere at the top or edge for more visibility. (keeping them accessible)

  • Categories were too broad and not placed in alphabetical order

  • categories also felt pointless as the results after clicking felt random and arbitrary.

Negative Responses to Poki.com:

Negative Responses to Poki.com:

Issues with game display:

  • 5/5 stated that the display of games appeared, "Messy, unorganized, random, and overwhelming."

  • 5/5 stated that the games needed to be re-sorted into more clearly distinct genres in order to make navigating the site more efficient.

  • 4/5 mentioned that they disliked the random sizing of the game icons (found them distracting and not purposeful)

  • 3/5 said it was hard to infer which games were popular, recommended, etc., based on the layout and icon sizes


Game Search Related Issues:

  • The search bar/icon wasn't very distinguishable and hard for user's to locate.

Issues with game display:

  • 5/5 stated that the display of games appeared, "Messy, unorganized, random, and overwhelming."

  • 5/5 stated that the games needed to be re-sorted into more clearly distinct genres in order to make navigating the site more efficient.

  • 4/5 mentioned that they disliked the random sizing of the game icons (found them distracting and not purposeful)

  • 3/5 said it was hard to infer which games were popular, recommended, etc., based on the layout and icon sizes


Game Search Related Issues:

  • The search bar/icon wasn't very distinguishable and hard for user's to locate.

Positive Responses to Poki.com

Positive Responses to Poki.com

  • 2/5 appreciated that there were suggested games in the search bar - as this reduced searching time and simplified decision making

  • 2/5 said that they liked the existence of a game description so user's can learn more about the games they're playing


  • 2/5 appreciated that there were suggested games in the search bar - as this reduced searching time and simplified decision making

  • 2/5 said that they liked the existence of a game description so user's can learn more about the games they're playing


User Requested Features based on findings and responses:

Towards the end of the interview - we asked user's directly what type of changes they'd want to see on Poki.com. Identifying these key responses will help us narrow down our focus and better understand which areas of improvement to target first.

User Requested Features based on findings and responses:

Towards the end of the interview - we asked user's directly what type of changes they'd want to see on Poki.com. Identifying these key responses will help us narrow down our focus and better understand which areas of improvement to target first.

User Requested Features based on findings and responses:

Towards the end of the interview - we asked user's directly what type of changes they'd want to see on Poki.com. Identifying these key responses will help us narrow down our focus and better understand which areas of improvement to target first.

User Requested Features based on findings and responses:

Towards the end of the interview - we asked user's directly what type of changes they'd want to see on Poki.com. Identifying these key responses will help us narrow down our focus and better understand which areas of improvement to target first.

General:

  • 5/5 user's requested more information on category types and games sorted into sections like popular, recommended, and newly added

  • 4/5 wanted more instruction on the game - (key binds, objective, tutorials)

  • 2/5 requested a log in feature so game data could be save and a leaderboard could be established to create a sense of competition

  • 2/5 wanted more information on the game icons/display to showcase what type of game the user's would be playing

General:

  • 5/5 user's requested more information on category types and games sorted into sections like popular, recommended, and newly added

  • 4/5 wanted more instruction on the game - (key binds, objective, tutorials)

  • 2/5 requested a log in feature so game data could be save and a leaderboard could be established to create a sense of competition

  • 2/5 wanted more information on the game icons/display to showcase what type of game the user's would be playing

General:

  • 5/5 user's requested more information on category types and games sorted into sections like popular, recommended, and newly added

  • 4/5 wanted more instruction on the game - (key binds, objective, tutorials)

  • 2/5 requested a log in feature so game data could be save and a leaderboard could be established to create a sense of competition

  • 2/5 wanted more information on the game icons/display to showcase what type of game the user's would be playing

General:

  • 5/5 user's requested more information on category types and games sorted into sections like popular, recommended, and newly added

  • 4/5 wanted more instruction on the game - (key binds, objective, tutorials)

  • 2/5 requested a log in feature so game data could be save and a leaderboard could be established to create a sense of competition

  • 2/5 wanted more information on the game icons/display to showcase what type of game the user's would be playing

Based on Competitors:

  • Video previews for ever game not just popular ones

  • organized display

  • shows percentage of user's playing that game for encouragement

  • Leaderboard for interactivity

Based on Competitors:

  • Video previews for ever game not just popular ones

  • organized display

  • shows percentage of user's playing that game for encouragement

  • Leaderboard for interactivity

Based on Competitors:

  • Video previews for ever game not just popular ones

  • organized display

  • shows percentage of user's playing that game for encouragement

  • Leaderboard for interactivity

Step 2: Define


Step 2: Define


Step 2: Define


Now that we're more knowledgeable on the potential issues and solutions to Poki's site, we have to bring our focus back into identifying our target users. This is to ensure our implementations have the most impact on the type of user's who actively or would potentially interact with Poki.com

Now that we're more knowledgeable on the potential issues and solutions to Poki's site, we have to bring our focus back into identifying our target users. This is to ensure our implementations have the most impact on the type of user's who actively or would potentially interact with Poki.com

User Persona

User Persona

User Persona

Visualizing our user persona allows me to keep the user in mind and empathize with them through every design decision.

Our user persona allows me to define who would essentially be using our product and what their needs and frustrations encompass. Having note of this allows me to keep the user in mind and empathize with them through every design decision.

Our user persona allows me to define who would essentially be using our product and what their needs and frustrations encompass. Having note of this allows me to keep the user in mind and empathize with them through every design decision.

Our user persona allows me to define who would essentially be using our product and what their needs and frustrations encompass. Having note of this allows me to keep the user in mind and empathize with them through every design decision.

Step 3: Ideate


Step 3: Ideate


Step 3: Ideate


Now by using my research data and putting myself into the shoes of our user persona, it's time to visualize the re-designs we want to implement onto Poki's site.

Now by using my research data and putting myself into the shoes of our user persona, it's time to visualize the re-designs we want to implement onto Poki's site.

Product Sitemap

Product Sitemap

Product Sitemap

Our interview participants as well as Poki.com's heuristic evaluation identified informational hierarchy as one of the larger problems across Poki's site.


Poki.com lacks proper information display as well as a meaningful way for user's to navigate the site. Therefore a sitemap was produced to help group together similar types of content and establish familiarity with content for the users.

Our interview participants as well as Poki.com's heuristic evaluation identified informational hierarchy as one of the larger problems across Poki's site.


Poki.com lacks proper information display as well as a meaningful way for user's to navigate the site. Therefore a sitemap was produced to help group together similar types of content and establish familiarity with content for the users.

Our interview participants as well as Poki.com's heuristic evaluation identified informational hierarchy as one of the larger problems across Poki's site.


Poki.com lacks proper information display as well as a meaningful way for user's to navigate the site. Therefore a sitemap was produced to help group together similar types of content and establish familiarity with content for the users.

Our interview participants as well as Poki.com's heuristic evaluation identified informational hierarchy as one of the larger problems across Poki's site.


Poki.com lacks proper information display as well as a meaningful way for user's to navigate the site. Therefore a sitemap was produced to help group together similar types of content and establish familiarity with content for the users.

User Flow

User Flow

User Flow

Having a site map allowed us a preview into the types of user flows our audience would potentially interact with and gives us sufficient means for usability testing later on.


These flows were based on real life tasks that our user's stated they would appreciate being incorporated into the site.

  1. Accessing the leader board - after logging in which made it easier for user data and game placements to be recorded, user's could see how others were playing Poki.com in comparison to themselves. (Giving the site a sense of community and competition).

  2. Using the search bar to sort for and quickly find games that they want to play or add to their favorites.

  3. Using the categories to sort through different types of games that they found interesting and would eventually play.

Having a site map allowed us a preview into the types of user flows our audience would potentially interact with and gives us sufficient means for usability testing later on.


These flows were based on real life tasks that our user's stated they would appreciate being incorporated into the site.

  1. Accessing the leader board - after logging in which made it easier for user data and game placements to be recorded, user's could see how others were playing Poki.com in comparison to themselves. (Giving the site a sense of community and competition).

  2. Using the search bar to sort for and quickly find games that they want to play or add to their favorites.

  3. Using the categories to sort through different types of games that they found interesting and would eventually play.

Having a site map allowed us a preview into the types of user flows our audience would potentially interact with and gives us sufficient means for usability testing later on.


These flows were based on real life tasks that our user's stated they would appreciate being incorporated into the site.

  1. Accessing the leader board - after logging in which made it easier for user data and game placements to be recorded, user's could see how others were playing Poki.com in comparison to themselves. (Giving the site a sense of community and competition).

  2. Using the search bar to sort for and quickly find games that they want to play or add to their favorites.

  3. Using the categories to sort through different types of games that they found interesting and would eventually play.

Having a site map allowed us a preview into the types of user flows our audience would potentially interact with and gives us sufficient means for usability testing later on.


These flows were based on real life tasks that our user's stated they would appreciate being incorporated into the site.

  1. Accessing the leader board - after logging in which made it easier for user data and game placements to be recorded, user's could see how others were playing Poki.com in comparison to themselves. (Giving the site a sense of community and competition).

  2. Using the search bar to sort for and quickly find games that they want to play or add to their favorites.

  3. Using the categories to sort through different types of games that they found interesting and would eventually play.

Step 4: Design


Step 4: Design


Step 4: Design


Now that I have a clearer idea of the user flows I want to build, it's time to search for inspiration. As Poki.com's website already has their own branding system the goal is to mainly focus on improving their informational architecture and site layout so that user's can complete their tasks in the most efficient way possible.

Now that I have a clearer idea of the user flows I want to build, it's time to search for inspiration. As Poki.com's website already has their own branding system the goal is to mainly focus on improving their informational architecture and site layout so that user's can complete their tasks in the most efficient way possible.

Design Pattern Research

Design Pattern Research

Design Pattern Research

One of Poki's main challenges is the site's portrayal of games and information in an inconsistent manner. I want to reduce the informational clutter that inhibits user's from staying on the site, or using it to it's full potential.


Therefore design patterns relating to our task flows as well as information display were explored to help us create a brand new site layout.

One of Poki's main challenges is the site's portrayal of games and information in an inconsistent manner. I want to reduce the informational clutter that inhibits user's from staying on the site, or using it to it's full potential.


Therefore design patterns relating to our task flows as well as information display were explored to help us create a brand new site layout.

One of Poki's main challenges is the site's portrayal of games and information in an inconsistent manner. I want to reduce the informational clutter that inhibits user's from staying on the site, or using it to it's full potential.


Therefore design patterns relating to our task flows as well as information display were explored to help us create a brand new site layout.

One of Poki's main challenges is the site's portrayal of games and information in an inconsistent manner. I want to reduce the informational clutter that inhibits user's from staying on the site, or using it to it's full potential.


Therefore design patterns relating to our task flows as well as information display were explored to help us create a brand new site layout.

Leaderboard display: Peloton

Leaderboard display: Peloton

Leaderboard display: Peloton

Leaderboard display: Peloton

Rank placement, user icon, and point accumulation displayed in a straight forward easy to read manner.

Rank placement, user icon, and point accumulation displayed in a straight forward easy to read manner.

Rank placement, user icon, and point accumulation displayed in a straight forward easy to read manner.

Rank placement, user icon, and point accumulation displayed in a straight forward easy to read manner.

Ranking is filterable displayed in clear hierarchy with specific categories.

Ranking is filterable displayed in clear hierarchy with specific categories.

Ranking is filterable displayed in clear hierarchy with specific categories.

Ranking is filterable displayed in clear hierarchy with specific categories.

Point system can be applied in a similar manner for Poki's games.

Point system can be applied in a similar manner for Poki's games.

Point system can be applied in a similar manner for Poki's games.

Point system can be applied in a similar manner for Poki's games.

Search and Favorited content: YouTube search and account data

Search and Favorited content: YouTube search and account data

Search and Favorited content: YouTube search and account data

Search and Favorited content: YouTube search and account data

Search bar is center and present and accessible at all times

Search bar is center and present and accessible at all times

Search bar is center and present and accessible at all times

Search bar is center and present and accessible at all times

Content is displayed in big cards with relevant information under for visual association and hierarchy.

Content is displayed in big cards with relevant information under for visual association and hierarchy.

Content is displayed in big cards with relevant information under for visual association and hierarchy.

Content is displayed in big cards with relevant information under for visual association and hierarchy.

Account portal lets users access saved content they interacted with or enjoyed.

Account portal lets users access saved content they interacted with or enjoyed.

Account portal lets users access saved content they interacted with or enjoyed.

Account portal lets users access saved content they interacted with or enjoyed.

Categories display:

Categories display:

Categories display:

Categories display:

Categories displayed within navigation bar making it easily accessible at any point on the site.

Categories displayed within navigation bar making it easily accessible at any point on the site.

Categories displayed within navigation bar making it easily accessible at any point on the site.

Categories displayed within navigation bar making it easily accessible at any point on the site.

Categories are displayed by relevancy to each other in some manner.

Categories are displayed by relevancy to each other in some manner.

Categories are displayed by relevancy to each other in some manner.

Categories are displayed by relevancy to each other in some manner.

Recommended categories displayed on the left side of panel for immediate access.

Recommended categories displayed on the left side of panel for immediate access.

Recommended categories displayed on the left side of panel for immediate access.

Recommended categories displayed on the left side of panel for immediate access.

Low/Mid Fidelity Wireframes

Low/Mid Fidelity Wireframes

Low/Mid Fidelity Wireframes

After conducting research on platforms which provided examples for better content display, I was then able to move forward with mapping out potential way we could reorganize the site's content.

After conducting research on platforms which provided examples for better content display, I was then able to move forward with mapping out potential way we could reorganize the site's content.

After conducting research on platforms which provided examples for better content display, I was then able to move forward with mapping out potential way we could reorganize the site's content.

After conducting research on platforms which provided examples for better content display, I was then able to move forward with mapping out potential way we could reorganize the site's content.

Sketches:

Sketches:

Sketches:

I first started off with sketches to test the different potential user interface possibilities that would most effectively aid my user's goals.

I first started off with sketches to test the different potential user interface possibilities that would most effectively aid my user's goals.

I first started off with sketches to test the different potential user interface possibilities that would most effectively aid my user's goals.

I first started off with sketches to test the different potential user interface possibilities that would most effectively aid my user's goals.

Mid-Fidelity wireframes:

Mid-Fidelity wireframes:

Mid-Fidelity wireframes:

Once the sketches did well at representing the potential layout of our product, I moved onto mid fidelity wireframes.

Once the sketches did well at representing the potential layout of our product, I moved onto mid fidelity wireframes.

Once the sketches did well at representing the potential layout of our product, I moved onto mid fidelity wireframes.

Once the sketches did well at representing the potential layout of our product, I moved onto mid fidelity wireframes.

Changes implemented to the mid-fi:

Changes implemented to the mid-fi:

  1. Game card layout:

  1. Game card layout:

  1. Game card layout:

  1. Game card layout:

  • Took out arrow scrolls to maximize space for additional game display.

  • Narrowed game cards sizes to allow more space for a fifth card to bleed out off screen and imply scroll ability.

  • Took out arrow scrolls to maximize space for additional game display.

  • Narrowed game cards sizes to allow more space for a fifth card to bleed out off screen and imply scroll ability.

  • Took out arrow scrolls to maximize space for additional game display.

  • Narrowed game cards sizes to allow more space for a fifth card to bleed out off screen and imply scroll ability.

  • Took out arrow scrolls to maximize space for additional game display.

  • Narrowed game cards sizes to allow more space for a fifth card to bleed out off screen and imply scroll ability.

  1. Game Info/Tutorial card:

  1. Game Info/Tutorial card:

  1. Game Info/Tutorial card:

  1. Game Info/Tutorial card:

  • Rearranged content to put priority items such as controls and tutorials first.

  • Added icons/imagery for controls to assist users in better efficient learning.

  • Reduced game background content to be more concise.

  • Rearranged content to put priority items such as controls and tutorials first.

  • Added icons/imagery for controls to assist users in better efficient learning.

  • Reduced game background content to be more concise.

  • Rearranged content to put priority items such as controls and tutorials first.

  • Added icons/imagery for controls to assist users in better efficient learning.

  • Reduced game background content to be more concise.

  • Rearranged content to put priority items such as controls and tutorials first.

  • Added icons/imagery for controls to assist users in better efficient learning.

  • Reduced game background content to be more concise.

High Fidelity Wireframes

High Fidelity Wireframes

High Fidelity Wireframes

High Fidelity Wireframes

Incorporating everything we've learned and created from our sketches, mid-fidelity, and Poki's brand elements - I'm now able to develop our high-fidelity wireframes which allow us to not only visualize our product, but eventually test it's functionality. Besides successfully completing the task flows, we also wanted to ensure the site's re-design would positively impact it's usability.


Task Flows:

Incorporating everything we've learned and created from our sketches, mid-fidelity, and Poki's brand elements - I'm now able to develop our high-fidelity wireframes which allow us to not only visualize our product, but eventually test it's functionality. Besides successfully completing the task flows, we also wanted to ensure the site's re-design would positively impact it's usability.


Task Flows:

Incorporating everything we've learned and created from our sketches, mid-fidelity, and Poki's brand elements - I'm now able to develop our high-fidelity wireframes which allow us to not only visualize our product, but eventually test it's functionality. Besides successfully completing the task flows, we also wanted to ensure the site's re-design would positively impact it's usability.


Task Flows:

Incorporating everything we've learned and created from our sketches, mid-fidelity, and Poki's brand elements - I'm now able to develop our high-fidelity wireframes which allow us to not only visualize our product, but eventually test it's functionality. Besides successfully completing the task flows, we also wanted to ensure the site's re-design would positively impact it's usability.


Task Flows:

Log in and explore the leaderboard

Log in and explore the leaderboard

Log in and explore the leaderboard

Log in and explore the leaderboard

Search for game and add to favorites

Search for game and add to favorites

Search for game and add to favorites

Search for game and add to favorites

Sort for a game through categories and play the game

Sort for a game through categories and play the game

Sort for a game through categories and play the game

Sort for a game through categories and play the game

Updates to Poki.com's UI

Updates to Poki.com's UI

Updates to Poki.com's UI

Updates to Poki.com's UI

Home page/Game display

Home page/Game display

Home page/Game display

Home page/Game display

Original Site:

Original Site:

Redesign:

Redesign:

To directly tackle the usability issues identified in our heuristic evaluation and our user's negative responses to Poki.com. The key updates related to the site's homepage and game display involved:


  1. Making the search bar more visible and accessible. (User's stated in the user interview of having difficulty distinguishing the location of the search bar)


  2. Adding a navigation bar (To provide higher user control and freedom)


  3. Redesigning the icons to be more consistent in order to reduce visual overload. (4/5 user's found the random sized game icons "distracting and not purposeful")


  4. Provided more game information on the display cards. (User's had a hard time deciphering game type and popularity.)


  5. Allowing user's personalized game recommendations sorted into genre's on the home/explore page. (Aids in sorting through the site more efficiently)


To directly tackle the usability issues identified in our heuristic evaluation and our user's negative responses to Poki.com. The key updates related to the site's homepage and game display involved:


  1. Making the search bar more visible and accessible. (User's stated in the user interview of having difficulty distinguishing the location of the search bar)


  2. Adding a navigation bar (To provide higher user control and freedom)


  3. Redesigning the icons to be more consistent in order to reduce visual overload. (4/5 user's found the random sized game icons "distracting and not purposeful")


  4. Provided more game information on the display cards. (User's had a hard time deciphering game type and popularity.)


  5. Allowing user's personalized game recommendations sorted into genre's on the home/explore page. (Aids in sorting through the site more efficiently)


To directly tackle the usability issues identified in our heuristic evaluation and our user's negative responses to Poki.com. The key updates related to the site's homepage and game display involved:


  1. Making the search bar more visible and accessible. (User's stated in the user interview of having difficulty distinguishing the location of the search bar)


  2. Adding a navigation bar (To provide higher user control and freedom)


  3. Redesigning the icons to be more consistent in order to reduce visual overload. (4/5 user's found the random sized game icons "distracting and not purposeful")


  4. Provided more game information on the display cards. (User's had a hard time deciphering game type and popularity.)


  5. Allowing user's personalized game recommendations sorted into genre's on the home/explore page. (Aids in sorting through the site more efficiently)


To directly tackle the usability issues identified in our heuristic evaluation and our user's negative responses to Poki.com. The key updates related to the site's homepage and game display involved:


  1. Making the search bar more visible and accessible. (User's stated in the user interview of having difficulty distinguishing the location of the search bar)


  2. Adding a navigation bar (To provide higher user control and freedom)


  3. Redesigning the icons to be more consistent in order to reduce visual overload. (4/5 user's found the random sized game icons "distracting and not purposeful")


  4. Provided more game information on the display cards. (User's had a hard time deciphering game type and popularity.)


  5. Allowing user's personalized game recommendations sorted into genre's on the home/explore page. (Aids in sorting through the site more efficiently)


Category Display

Category Display

Category Display

Category Display

Original Site:

Original Site:

Redesign:

Redesign:

Poki's original method of displaying categories showcased usability issues for a variety of reasons.


  1. It did not assist in maintaining consistency and standards. (Heuristic #4)


  2. Contributed to the site's lack of recognition and recall. (Heuristic #6)


  3. Prevents the site from having an aesthetic or minimalist design. (Heuristic #8)


User Complaints also heavily focused on the site's Category display. 100% of users showcased some form of dislike and want for improvement regarding it's visibility, accessibility, and relevancy.


The categories were displayed randomly in different places across the screen after clicked on. Otherwise usually at the bottom of the screen.


To address these issues a more concise category layout was designed that follows modern design trends for this feature. Allowing users to more efficiently navigate the site, without performing extraneous other steps like excessive scrolling.

Poki's original method of displaying categories showcased usability issues for a variety of reasons.


  1. It did not assist in maintaining consistency and standards. (Heuristic #4)


  2. Contributed to the site's lack of recognition and recall. (Heuristic #6)


  3. Prevents the site from having an aesthetic or minimalist design. (Heuristic #8)


User Complaints also heavily focused on the site's Category display. 100% of users showcased some form of dislike and want for improvement regarding it's visibility, accessibility, and relevancy.


The categories were displayed randomly in different places across the screen after clicked on. Otherwise usually at the bottom of the screen.


To address these issues a more concise category layout was designed that follows modern design trends for this feature. Allowing users to more efficiently navigate the site, without performing extraneous other steps like excessive scrolling.

Poki's original method of displaying categories showcased usability issues for a variety of reasons.


  1. It did not assist in maintaining consistency and standards. (Heuristic #4)


  2. Contributed to the site's lack of recognition and recall. (Heuristic #6)


  3. Prevents the site from having an aesthetic or minimalist design. (Heuristic #8)


User Complaints also heavily focused on the site's Category display. 100% of users showcased some form of dislike and want for improvement regarding it's visibility, accessibility, and relevancy.


The categories were displayed randomly in different places across the screen after clicked on. Otherwise usually at the bottom of the screen.


To address these issues a more concise category layout was designed that follows modern design trends for this feature. Allowing users to more efficiently navigate the site, without performing extraneous other steps like excessive scrolling.

Step 5: Test & Iterate


Step 5: Test & Iterate


Step 5: Test & Iterate


After designing the first version of high fidelity screens, we are going to examine the screens and their functionality by using a prototype and moderated "click-through" testing. Our goal is to identify if there are any usability issues or pain points are users face, and reiterate our screens based on our findings.

After designing the first version of high fidelity screens, we are going to examine the screens and their functionality by using a prototype and moderated "click-through" testing. Our goal is to identify if there are any usability issues or pain points are users face, and reiterate our screens based on our findings.

After designing the first version of high fidelity screens, we are going to examine the screens and their functionality by using a prototype and moderated "click-through" testing. Our goal is to identify if there are any usability issues or pain points are users face, and reiterate our screens based on our findings.

After designing the first version of high fidelity screens, we are going to examine the screens and their functionality by using a prototype and moderated "click-through" testing. Our goal is to identify if there are any usability issues or pain points are users face, and reiterate our screens based on our findings.

Prototyping in Figma

Prototyping in Figma

Prototyping in Figma

Prototyping in Figma

I set up my screens to be tested based on the task flows we created. Usability testing was conducted with 5 participants that match our persona.

I set up my screens to be tested based on the task flows we created. Usability testing was conducted with 5 participants that match our persona.

I set up my screens to be tested based on the task flows we created. Usability testing was conducted with 5 participants that match our persona.

I set up my screens to be tested based on the task flows we created. Usability testing was conducted with 5 participants that match our persona.

Tasks being tested:

  1. Log-in and explore the leaderboard,

  2. Search for a game and add to favorites.

  3. Sort for a game through categories and play the game.

Tasks being tested:

  1. Log-in and explore the leaderboard,

  2. Search for a game and add to favorites.

  3. Sort for a game through categories and play the game.

Tasks being tested:

  1. Log-in and explore the leaderboard,

  2. Search for a game and add to favorites.

  3. Sort for a game through categories and play the game.

Tasks being tested:

  1. Log-in and explore the leaderboard,

  2. Search for a game and add to favorites.

  3. Sort for a game through categories and play the game.

Synthesizing Our Test Results

Synthesizing Our Test Results

Synthesizing Our Test Results

Task 1: Log-in and explore the leaderboard

Task 1: Log-in and explore the leaderboard

Task 1: Log-in and explore the leaderboard

Task 1: Log-in and explore the leaderboard

Success Metric

Success Metric

Success Metric

Success Metric

Testing Results

Testing Results

Testing Results

Testing Results

Goal Met?

Goal Met?

Goal Met?

Goal Met?

User's ability to complete task in a short amount of time.

User's ability to complete task in a short amount of time.

User's ability to complete task in a short amount of time.

Under 1 minute for 5/5 users

Under 1 minute for 5/5 users

Under 1 minute for 5/5 users

Little to no error or tension while attempting to complete task.

Little to no error or tension while attempting to complete task.

Little to no error or tension while attempting to complete task.

0# of errors displayed by 5/5 users

0# of errors displayed by 5/5 users

0# of errors displayed by 5/5 users

User's positive experience with the design.

User's positive experience with the design.

User's positive experience with the design.

5/5 users showcased fast understanding and positive reactions with words such as organized, and interactive.

5/5 users showcased fast understanding and positive reactions with words such as organized, and interactive.

5/5 users showcased fast understanding and positive reactions with words such as organized, and interactive.

Task 1: Search for a game and add to favorites

Task 1: Search for a game and add to favorites

Task 1: Search for a game and add to favorites

Success Metric

Success Metric

Success Metric

Success Metric

Testing Results

Testing Results

Testing Results

Testing Results

Goal Met?

Goal Met?

Goal Met?

Goal Met?

User's ability to complete task in a short amount of time.

User's ability to complete task in a short amount of time.

User's ability to complete task in a short amount of time.

Under 1 minute and 30 seconds for 5/5 users

Under 1 minute and 30 seconds for 5/5 users

Under 1 minute and 30 seconds for 5/5 users

Little to no error or tension while attempting to complete task.

Little to no error or tension while attempting to complete task.

Little to no error or tension while attempting to complete task.

3/5 users described the process as straightforward but wanted an accelerator feature added to make this more efficient.

3/5 users described the process as straightforward but wanted an accelerator feature added to make this more efficient.

3/5 users described the process as straightforward but wanted an accelerator feature added to make this more efficient.

User's positive experience with the design.

User's positive experience with the design.

User's positive experience with the design.

5/5 users described the task flow as still overall easy to navigate and aesthetic.

5/5 users described the task flow as still overall easy to navigate and aesthetic.

5/5 users described the task flow as still overall easy to navigate and aesthetic.

Task 1: Sort for a game through categories and play the game

Task 1: Sort for a game through categories and play the game

Task 1: Sort for a game through categories and play the game

Success Metric

Success Metric

Success Metric

Success Metric

Testing Results

Testing Results

Testing Results

Testing Results

Goal Met?

Goal Met?

Goal Met?

Goal Met?

User's ability to complete task in a short amount of time.

User's ability to complete task in a short amount of time.

User's ability to complete task in a short amount of time.

Under 2 minutes for 5/5 users

Under 2 minutes for 5/5 users

Under 2 minutes for 5/5 users

Little to no error or tension while attempting to complete task.

Little to no error or tension while attempting to complete task.

Little to no error or tension while attempting to complete task.

5/5 users were able to complete the task without any frustration

5/5 users were able to complete the task without any frustration

5/5 users were able to complete the task without any frustration

User's positive experience with the design.

User's positive experience with the design.

User's positive experience with the design.

5/5 user's described the experience as simple, and showed approval for the newly added tutorial/game key feature.

5/5 user's described the experience as simple, and showed approval for the newly added tutorial/game key feature.

5/5 user's described the experience as simple, and showed approval for the newly added tutorial/game key feature.

Key Iterations

Key Iterations

Key Iterations

Key Iterations

  1. Iterate the adding a game to favorites flow - create a shortcut so that players don't have to fully click on a game just to add it to favorites.

    • 3/5 expressed that if they already played a game before, felt it redundant to have to click on the game page just to add to favorites. Especially if they didn't want to play that game at that moment but just wanted to save for later

  1. Iterate the adding a game to favorites flow - create a shortcut so that players don't have to fully click on a game just to add it to favorites.

    • 3/5 expressed that if they already played a game before, felt it redundant to have to click on the game page just to add to favorites. Especially if they didn't want to play that game at that moment but just wanted to save for later

  1. Iterate the adding a game to favorites flow - create a shortcut so that players don't have to fully click on a game just to add it to favorites.

    • 3/5 expressed that if they already played a game before, felt it redundant to have to click on the game page just to add to favorites. Especially if they didn't want to play that game at that moment but just wanted to save for later

  1. Iterate the adding a game to favorites flow - create a shortcut so that players don't have to fully click on a game just to add it to favorites.

    • 3/5 expressed that if they already played a game before, felt it redundant to have to click on the game page just to add to favorites. Especially if they didn't want to play that game at that moment but just wanted to save for later

Before

Before

Before

After Iteration:

After Iteration:

After Iteration:

Step 4: Results and Next Steps


Step 4: Results and Next Steps


Step 4: Results and Next Steps


Usability testing validated the success of this redesign of Poki.com. Despite this, there are still many more ways we could enhance the site's usability and explore new features.

Usability testing validated the success of this redesign of Poki.com. Despite this, there are still many more ways we could enhance the site's usability and explore new features.

Usability testing validated the success of this redesign of Poki.com. Despite this, there are still many more ways we could enhance the site's usability and explore new features.

Usability testing validated the success of this redesign of Poki.com. Despite this, there are still many more ways we could enhance the site's usability and explore new features.

Further exploration

Further exploration

Further exploration

We managed to successfully tackle many prominent issues pertaining to Poki's usability. By following successful design patterns established and well used by the general public in intersecting industries.


But to further improve Poki.com's user engagement there's a couple things we could try:


  • Piggyback off the leaderboard and explore more ways Poki.com could potentially explore it's user engagements. Many user's mentioned that they like using the site with friends or in a competitive manner. How can we increase the level of community engagement


  • Further test our design to see if there are any other pain points or frustrations user's might encounter and figure out how to modernize Poki.com's site in a familiar way that tackles these issues.



We managed to successfully tackle many prominent issues pertaining to Poki's usability. By following successful design patterns established and well used by the general public in intersecting industries.


But to further improve Poki.com's user engagement there's a couple things we could try:


  • Piggyback off the leaderboard and explore more ways Poki.com could potentially explore it's user engagements. Many user's mentioned that they like using the site with friends or in a competitive manner. How can we increase the level of community engagement


  • Further test our design to see if there are any other pain points or frustrations user's might encounter and figure out how to modernize Poki.com's site in a familiar way that tackles these issues.



We managed to successfully tackle many prominent issues pertaining to Poki's usability. By following successful design patterns established and well used by the general public in intersecting industries.


But to further improve Poki.com's user engagement there's a couple things we could try:


  • Piggyback off the leaderboard and explore more ways Poki.com could potentially explore it's user engagements. Many user's mentioned that they like using the site with friends or in a competitive manner. How can we increase the level of community engagement


  • Further test our design to see if there are any other pain points or frustrations user's might encounter and figure out how to modernize Poki.com's site in a familiar way that tackles these issues.



We managed to successfully tackle many prominent issues pertaining to Poki's usability. By following successful design patterns established and well used by the general public in intersecting industries.


But to further improve Poki.com's user engagement there's a couple things we could try:


  • Piggyback off the leaderboard and explore more ways Poki.com could potentially explore it's user engagements. Many user's mentioned that they like using the site with friends or in a competitive manner. How can we increase the level of community engagement


  • Further test our design to see if there are any other pain points or frustrations user's might encounter and figure out how to modernize Poki.com's site in a familiar way that tackles these issues.



Explore my Other Projects:

Explore my Other Projects:

Explore my Other Projects:

Netflix

Netflix

Netflix

Explore Netflix like you've never have before.

Explore Netflix like you've never have before.

Explore Netflix like you've never have before.

PetPal Ai

PetPal Ai

Work smarter not harder to be the best pet parent you can be.

Work smarter not harder to be the best pet parent you can be.

Thuy vi Hinh

© 2024 Framer, Inc.

| Designed and Crafted by Thuy vi Hinh