top of page

Love Nikki - UI/UX Improvements

  • Writer: Jenny Luu
    Jenny Luu
  • Jan 23, 2020
  • 3 min read

Hi, it's been a while! Honestly, I've been wanting to do this for a while so here we go.


If you're not aware of Love Nikki-Dress Up Queen by Elex, it's exactly as it sounds. I have been playing this mobile game for about 2-3 years now and in that time, there hasn't been a lot of updates to improve the UI/UX.

I would like to focus specifically on the main dressing feature. As you can see on the right, the more the user amasses, the longer it takes for them to scroll through their inventory. The user can grab the scroll bar and navigate it that way but it's not very effective. Besides the Search and Tag functions, there is very little the user can do to filter through their inventory. I find that very strange considering this is the main attraction of the game...


Upon researching on Reddit, I found that I wasn't the only one hoping for improvements. I have decided to improve the user experience myself, based on some user suggestions.


Here is the wireframe of what I came up with. I did not change the general design or layout that users are familiar with. I only rearranged buttons and added more ways to navigate.

This is a little hard to read so lets break it down, starting from the first screen.

Screen #1

#1: First, I rearranged some of the side tabs. I switched the Summon Image with View Mode and then removed the Share and Photo tabs. They would be placed within View Mode to make the screen less busy.


#2: I separated the Tags from the Search tab. A new section would be added for sorting items by colour, probably the most requested addition that users wanted.


#3: This is a new tab for unique items that are different from the default, like items with special poses or animations.


#4: This is basically a "Shopping Cart" tab which would allow the user to bookmark items for quick access. This way, the user wouldn't have to scroll all the way back to a previous item to try it on again.


#5: The arrow in the original screen allows the user to swap between different saved suits. Unfortunately, the user cannot move backwards so they are forced to cycle through every suit to return to the original. This arrow would be replaced with tabs for quicker and easier navigation.


#6: The Custom tab would hold user-created categories. The Chinese server already has custom folders implemented but it hasn't been ported to the western servers yet. I'm not sure how it works in that version but for this redesign, it would be placed here as a main category. Custom-made folders would be found under it.

Screen #2

All categories would be sorted into subcategories to avoid endless scrolling. Previously, only Accessories and Hosiery had subcategories.

#1: Navigation arrows would be placed at the bottom so the user wouldn't have to use as many gestures to navigate.


#2: The arrow to the side indicates a collapsible item. Users would find all customized and devolved versions of this item under here.


#3: Previously, long tapping an item would bring up a description window and disappear on release. The main reason I would remove this is to allow the user to "bookmark" the item. Here are some differences added to the description window.

All related tags would be listed to the side, including the main colour associated with the item. Sometimes, the item's nation isn't listed so that would be added to every item as well. The bookmark icon would be to the top left.


...And that's everything! Eventually, I'd like to add an interactable wireframe but I hope this makes sense even without it.


Thanks for reading!


© 2019 Jenny Luu

bottom of page