top of page

▼ Step One: Research

I didn't start my research right away but played the game for 15+ hours first. Afterwards, I began taking screencaps and organized them according to the game's system. I marked some screens with my thoughts and did a color scheme analysis in the end.

step1.png

▼ Step Two: Scoping

Initially, my plan was ambitious: a high-fidelity UI prototype for all screens with animation. However, after doing the research I realized how impractical my previous plan was, thus I adjusted my goal for feasibility:

Make a low-fidelity interactable prototype for the main screen and one screen from each important system (9 screens in total).

▼ Step Three: Drafts

After I chose which 9 screens I was going to work on, I analyzed them through a very "primitive" method: tracing out the UI elements like how we copied an interesting pattern on tracing paper in our childhood. In this way, I noticed things I didn't notice first and started building connections between different UI elements.

step2A.png
step2B.png

▼ Step Four: Wireframe

This step was more like manual work, I transferred the design drafts to Figma and build the layout with spacing and shape consistency.

step3.png
Step3_comp.png

▼ Step Five: Final Prorotype

The final step was to update the wireframe with assets and build the interactable prototype. Since it is a UX redesign, I didn't plan to spend much time creating assets, most of them are directly from the game or the internet.

For the prototype, I had a script in mind about how to show the screens step by step, which can be seen in the demo video attached below.

step4B.png
step4A.png

▼ What I Learnt

  • Don't be afraid to think big - the grand ideas will be shrunk anyways :)

  • Use Figma components more to make overall changes much easier.

  • Use the final fonts in the wireframes to measure the UI elements' sizes more precisely

bottom of page