UX Redesign: Genshin Impact
This is a "just-for-fun" type of personal project. I was playing Genshin Impact for the past 50 days and thought it would be exciting to build my own version of its UI layout.
▼ 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.
▼ 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.
▼ 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.
▼ 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.
▼ 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