Lady Popular
Web and Mobile Redesign
User Centric Design(UCD) = Player Centric Designs
The software that I used for this project:
Adobe XD
Figma
GIT
HTML
CSS
JavaScript
VS Code
Photoshop
Illustrator
Keynote
It's strange how behind the seemingly "non-serious" appearance of a game there are many structural hierarchy menus, logical paths, and processes, whose purpose is to make the experience so captivating that it holds the player's attention and makes him part of a virtual world. The User Experience of a game is intended to spice up the otherwise gray everyday life. The casual nature of the product causes the users to have low tolerance for inconsistencies and logical issues of the designs.
Design Role: UX Design, UI Design, Front-End Development, Illustrations and Printables
Deliverables: Competitive Research, User Research, Concept Ideation, Prototyping, Interaction design, Animation design, Front End Development, HTML (embedded in PHP), CSS, Vanilla JavaScript. You could test prototypes here.
What follows is a case study describing the process of enhancing the User Experience for the web version of the game Lady Popular.
Building good gameplay ensures a better game experience
Problem: In order to preserve existing user familiarity with the core of the game and not start a community backlash, a facelift approach was taken. The design of the feature/module "Taking a Picture" pop-up is almost 10 years old. Most of the menus don't have modern visual representation as you choose who will be in the photo from an old-fashioned drop-down text menu. From UX point of view, there was a scope for some major changes in module's usability and menu intuitiveness, as well as overall appearance.
Solution: The final decision was to bring the design of the web-based game closer to the design of the mobile app. I created five buttons that send players to selectable backgrounds, add animals and a fiance, and flip images horizontally. The action button is positioned in the middle. The screenshot above is taken from the actual game, and to my delight, the players reacted positively to the change.
Research
Research began with analyzing the existing "Take a Picture" features in "Lady Popular: Fashion Arena" and all previous versions, other competitors, and popular titles, as well as the mobile app. While innovation is important, Lady Popular has dedicated players with a long history playing the game. I wanted to ensure that our research kept these players in mind so that their experience still felt familiar. The research allowed our small team to adopt the industry's best practices, as well as areas that we felt we could improve.
Ideation & Sketching
After research, the next was the wireframing phase, where I explored several potential solutions to players' pain points and looked at scenarios during which the player will try to Take A Picture. The UX explorations helped the team to better understand the information architecture of the ideas we wanted to implement, as well as how we could entice the players to stay engaged and enjoy Lady Popular over their journey with the game. The overall UX and UI of the project were being developed simultaneously during this period, so it was critical to keep the design cohesive with the rest of the features in the mobile and web versions. I created a few basic user flows in order to cover all the cases. Lo-Fi prototypes helped stakeholders to visualize the features without distracting them with more colorful and detailed prototypes.
Hi-Fi Prototypes
During this phase, I've developed 26 separate medium-fidelity prototypes to cover many of the ideas suggested during the meetings, as well as aligning the prototypes to the already existing functionality we had in the backend. This significantly shortened the time to redesign the module and release it into the game, as large number of corner cases were covered.
Design Trade-Off When Something Needs To Be Sacrificed
When I started working on this project, the first thing that struck me was the lack of secondary buttons in the style guide. During my work, I kept trying to introduce the concept of another type of button, but unfortunately, it was constantly rejected. This is the compromise I made to get this prototype into the real game, which was important to me, to the stakeholders, and last but not least - to the players. We decided to remove the photo name field to reduce the cognitive load to the player. The photo is given a default name that can be changed in the Gallery.
Adding Visual Clues
In games, feedback can indicate whether an action was successfully completed or not. I saw the need to add feedback to the players in order to improve the gameplay while bringing more player immersion into the story, while showing them what was actually happening during the process of taking a picture. Design hints and clues to indicate what action is available gives you an idea where you could find the photos.
Final Design
Just like with any other digital product, it is crucial to maintain consistency of its elements and interactions while avoiding contradictions, that could confuse the player. Harmony between the components helps to create a sense of unity and cohesiveness in the game, making it feel more polished and professional. In the final prototype, we chose the model that most closely resembled the user flow of the mobile application and adapted it to the web version. This served as my main inspiration for choosing this mockup and my motivation to follow this pattern through all of my projects. I tried not to change the way players interact with the game in order to keep them satisfied no matter what platform they use.
Deliverables & Front-end
Digital assets are integral part of any game. For example, the phone case assets are generated only with CSS code. I created images and vector icons to decorate phone buttons. Within PHP there are HTML elements with lots of <div>s and <span>s to handle the complex graphics and all the popups. Then I styled everything with CSS and added animations. For me, animations are challenging and satisfying at the same time. I had to learn some additional JavaScript skills to implement the prototype. There are many elements that are dynamically generated by the backend.
User and Quality Assurance Testing
The hardest part for me was the Front-end aspect of making the Hi-Fi prototype a fully functional in-game feature. This was done using advanced CSS and JavaScript for my current level at the time. Luckily, on my side there was a front-end development team who supported me with mentorship and help when I had obstacles that were plain impossible to solve with my current level of understanding. I learned a lot during this process and I am always grateful for the practical knowledge and experience collected through the practice. The QA team showed me their test cases and explained all the places where "Take a Picture" pop-up is used in the game in order for me to be able to check in advance the places where it is and the way it behaves so that I can make the necessary corrections.
2D Graphics and Illustrations
One of the best things about Lady Popular was getting to know the illustrators and how they work, and taking a few quick lessons. They gave me the opportunity to experience the simple joy of drawing things. Here are some illustrations that I've drawn during these times of inspiration.
The project is protected by a Non-Disclosure Agreement (NDA). This prevents me from showing parts of the project that still need to be released.