MYSTERY PORTAL

Many indie game service platforms are already providing game previews, however users are willing to see those games altogether for easier comparison, simplified visuals, and clearer contexts.
Goal
Creating an unified platform service that can connect users and the indie games.



‍
Cross-platform in-die game research service
App Design I 2 Months
Mystery Portal is an application that were designed for a users who are willing to preview the games before they purchase & play.
Methods
User research, user interviews, wire-framing, prototyping, UI design, and usability testing.
Tools
Adobe Illustrator,
Adobe Photoshop,
Figma
‍
My role
UI/UX designer, researcher.
Overview‍
Have you ever experienced frustration when trying to find a specific indie-game that excites you to play?
The product:
“Mystery Portal” is an application that were designed for a users who are willing to preview the games before they play."
The problem:
Many indie game service platforms are already providing game previews, however users are willing to see games from the different platforms altogether for easier comparison, simplified visuals, and clearer contexts
The Goal:
Creating an unified platform service that can connect users and the indie games.
Project timeline:‍
Process‍
User research summary:
Finding common behaviors between users while searching game.
Conducted user interviews, observations, and competitive analysis to figure out patterns, pain points, and needs.
User interview questions:
  • How often do you spend money on a game?
  • How long does it take for you to research a game to purchase?
  • Do you have any frustration during the process?
  • What part do you think it’s most important when it comes to searching and finding a game that you would like to purchase?
User interview pain points:‍
User interview insights:‍
User Persona:
Bella's problem statement:
Bella is a beginner who needs clear designed application with better game preview contents because the current platforms are too cluttered but the game preview contents are not enough.
‍
Gerald's problem statement:
Gerald is a gamer who needs unified indie game platform because he wants to save time, and effort.
‍
Define: Competitive audit + report
Competitive audit to see what's in the market, and looking for opportunities.

Competitive audit
Competitive audit report
‍
User Journey map:
Empathize: Storyboards
Imagining usage of app and brainstorming how it can support the users.
‍
Starting Design‍
Objectives:
  • Offer a seamless and personalized homepage itemization for the users.
  • Offer a smooth, effortless video preview watching experience for the users.
  • Offer an recommended outside sources for users to reduce extra research.
  • Offer a quick cross-platform search tools such as multi search & Ai search.
  • Offer a q game comparison tool for users to make easier decisions.
Key path scenarios:
User flow:
After finalizing the user scenarios, I began sketching the foundational framework for Mystery Portal. During this phase, I focused on brainstorming the most effective methods for organizing multiple information. My goal was to ensure that users could access, view, compare, and make purchases with ease.
Paper wireframes:
After finalizing the user scenarios, I began sketching the foundational framework for Mystery Portal. During this phase, I focused on brainstorming the most effective methods for organizing multiple information. My goal was to ensure that users could access, view, compare, and make purchases with ease.
Digital wireframes:
Low-fidelity prototypes:
Low-fidelity framework:
A step to confirm the user flow before conducting a usability test.
‍
Usability testing planning:
Research goals:
  • ‍Assess the ability of users to successfully perform essential tasks within the Mystery Portal app lo-fi prototype.
  • Evaluate the overall user-friendliness of the app, including user navigation through its UI/UX design.
  • Verify if it adequately provides users with the necessary information.
Usability testing:
Feedback from 5 users helped refine the design.

Data:
  • 4 out of 5 participants had hard time navigating a cart location.
  • 4 out of 5 participants had trouble recognizing a menu icon.
  • 3 out of 5 participants demand more simplified multi-search bar.
  • 2 out of 5 participants were frustrated with complicated user navigation.
Insights:
  • Users need a better location for the cart icon location to sit on the page.
  • Users need a clearly designed app icon that can be recognized as it’s function by a glance.
  • User need a simplified version of a multi-search. Break down to two steps and iterate the layout .
  • Users need a more intuitive way to navigate around the app without repeatedly going back to the homepage.
Refining the Design‍
Mockups:
Insights:
  • Users need a better location for the cart icon location to sit on the page.
  • Users need a clearly designed app icon that can be recognized as it’s function by a glance.
Solutions:
  • Implement a static menu bar at the top of the app, utilizing a user friendly tech design language.
  • Provide a well-designed UI system accompanied by an icon system that aligns with the style guide.
Insights:  
  • User need a simplified version of a multi-search. Break down to two steps and iterate the layout .
  • Users need a more intuitive way to navigate around the app without repeatedly going back to the homepage.
Solutions:
  • Give each category of the multi-search a page, and break down to steps so users don’t get too overwhelmed by the first sight of the scene.
  • Offer organized menu system and logo as a home button to enhance user navigation.
High-fideility prototype‍
Log-in Screen:
Game detail:
Ai Search:
Purchase Process:
Accessibility considerations:  
Wireflow:  
Style Guide:
By incorporating vibrant colors and playful elements, the visual style of Mystery Portal draws inspiration from sci-fi color palettes. Utilizing a combination of Hero and Voces typefaces, the design conveys excitement, friendliness and a sense of reliability.
Going Forward
Takeaways:  
Impact:
The app makes users feel Mystery Portal really thinks about their convenience, entertainments and needs.
“The app is very considerate in a way how it always tries to accompany users with different kinds of preference. I would try this app out to narrow down my research lists if I am ever looking for a indie-game to play.”
— Participant A (Male, age:30)
Learnings:
In designing the Mystery Portal app, I realized that initial ideas are just the starting point. Despite incorporating creative features, some didn't perform as expected, which taught by the valuable insights with usability studies and feedback.Interacting with testers, potential future users, was enjoyable and enlightening.

I learned that transforming user insights to the intelligences are one of the most important steps of the product building journey. I am willing to continually work close with users to offer satisfying, convenient, and joyful user experiences.
Next steps:  
gracesooyeun.kim@gmail.com
© reserved by Grace Kim 2022