Mythical Odyssey

Created on .Last updated on .

Mythical Odyssey is an idle-battler mobile game developed by a company that I worked at in 2025.

At the time, the game had just been released, and the company wanted to bypass in-app purchase fees. As the web frontend engineer, I was tasked to build a web store for players to purchase in-game items.

Defining requirements

To start off, I asked, “What is the happy path of the web store?” I then mapped it out as a flowchart to visualize the primary use case.

Figure 1: Diagram showing the happy path of the web store

From the happy path, I identified two core flows: the login flow and the purchase flow. With these key features, I drilled deeper into the web store’s functional requirements.

Functional requirements

  1. Player can view all products
  2. Player can view product information
  3. Player can view terms of purchase
  4. Player can switch between 17 different locales, covering
    1. 12 regions
    2. 4 languages
  5. Player can sign in to their in-game character, involving
    1. Email or third-party account login
    2. In-game character selection
  6. Player can switch to another character after account login
  7. Player can sign out of their account
  8. Player can order a product for a character
  9. Player can view the status of an order
  10. Player can pay for an order through the PayerMax portal
  11. Player can view past orders for a character
  12. Player can filter past orders by date range
  13. Admin can configure store content easily

Next, I asked, “What are some nice-to-haves?” and “What other aspects should we consider?” These questions helped steer the conversation toward the web store’s non-functional requirements.

Non-functional requirements

  1. Strong SEO and web performance
  2. Responsive and mobile-first interface
  3. Smooth and user-friendly payment flow
  4. Privacy and security, including
    1. Not leaking player credentials
    2. Not exposing the backend URL

After defining the requirements of the web store, I began thinking about how to design a user interface to support these goals.

Shaping the UI

To get a better understanding of existing products in this space, I conducted some market research, and found inspiration from the web stores of Journey Renewed and AFK Journey.

I sketched a quick low-fidelity prototype to test ideas and gather feedback from the creative designer and product manager. After several rounds of iteration, we settled on a design that met all requirements.

Figure 2: Mockup of the web store login flow
Figure 3: Mockup of the web store purchase flow

As we progressed, I partnered with the creative designer to develop a component library for the design system. This strengthened our collaboration and ensured the user interface remained consistent and cohesive.

As the user interface began to take shape, I shifted gears to the engineering side of the web store, working through the data and planning the high-level architecture.

Modeling the data

todo

Tech stack

Showcase

More information will be added in the near future. Stay tuned!