Mobile store UI & UX concept
Team Size
Solo Development
Role
UX & UI Designer
Duration
2 weeks
Tools
Figma, illustrator, Photoshop, Maze.
Anticipating Challenges
In this project, I began by formulating a goal that would serve as the guiding point and provide an outline of the potential challenges the product might currently be facing. I utilized and developed personas to gain an understanding of the intended target group, and to cultivate empathy for the challenges users may encounter. An Ideal Journey Map was also employed as a tool to identify opportunities, as well as to validate and cross-reference for a satisfactory customer shopping journey.
It's important to note that this project is purely conceptual and educational (I have no affiliation with Rainbow Six Siege Mobile or Ubisoft), which is why an abstract goal and problem were defined.
Flow Map & Greyboxing
After establishing a solid understanding of the users' end goals and motivations, it's time to design the pathway to reach them. I began by outlining a flow map and later started sketching (Greyboxing) layouts that could represent these pathways through the store and purchases. Building and working together with a mood board to reference and find solutions for some potential challenges.
I spent a significant amount of time comprehending the existing Rainbow Six Siege visual language, alongside familiarizing myself with conventions for mobile game layouts. This was essential to craft an intuitive navigation design for users while preserving a consistent visual identity with the IP. I aimed to not only capture the essence of the current visuals but also introduce a fresh approach that would distinguish the mobile experience from the PC version.
Style Guide
Developing an appropriate style was a challenge. I needed to mold a design language that could both reflect and complement the game's original visual narrative. I made every effort to create something that feels fresh for newcomers while remaining comfortably familiar to seasoned players.
Staying loyal to the original IP's color palette allowed me to encapsulate its visual language. Using clean, straight lines further injected a sense of modernity into the menus.
Using Maze, Finding & solving design conflict
I used the MAZE prototype tool to observe user navigation, identify potential design biases and points of conflict in the shopping experience. One key issue that surfaced was users' difficulty in finding specific weapon skins.
To address this issue, I explored various solutions, taking into account the deadline and attempting to simulate a real-world scenario. Instead of implementing complex changes, I opted for a simple solution: adding specific weapon names. This approach would allow for an efficient solution to the problem without imposing additional work on a design and programming team — a low-cost solution.
Takeaways
This project was both challenging and exciting, pushing my creative boundaries and deepening my understanding of design bias. I faced challenges related to design bias, mobile layout, mobile game menu conventions, and maintaining the essence of the visual identity. Surveys and prototype testing proved invaluable, revealing hidden insights, especially when using tools like MAZE for user data analysis.
I also learned that simplicity often leads to better results. In the future, I plan to use testing earlier and more frequently. Additionally, I aim to move away from hypothetical personas, opting for updated ones based on real human data to establish a more accurate starting point and better connect with potential users. All and all I grew a lot in my design thinking and pretty proud with the result.
