A PIECE OF THE PAST
Redesigning Verpets
Most of my early socialization, like many other people my age, happened online on pet game and chat sites like Neopets and Verpets.
In my 20s, I’ve been drawn back to Verpets, a much nicer alternative to the more popular site. However, due to its smaller user base, the site has not had a face lift in many years - and its dated interface isn’t helping their signup rates.
For this case study, my goal was to envision a transformation of the site into something that people of all ages would would want to try in 2020. Mobile games are huge and Tamagotchis are trending again, so why can’t this be too?
What are we starting with?
This is Verpets as of January 2020. Here are some initial evaluations we can make of the site:
The site is not responsive; mobile users simply see that middle chunk without the whitespace margins.
There is almost another full page of content below where the screen cuts off; the space of that top bar and the sides could be used more efficiently.
The navigation is a menu list reminiscent of blogs and websites of 10+ years ago.
If we take a look at its competitor sites, they’re all designed relatively similarly… for a generation that grew out of game sites with early 2000s designs long ago. None of these have had a UI overhaul in years. All of them use a side bar and top bar in conjunction in some way.
USER RESEARCH
Who still plays these games?
Since I have been active in the Verpets community since 2017, I was able to interview some users of the site about their experiences, when they started playing, and why they still do.
In this section I will place data on user interviews.
PROBLEM IDENTIFICATION
What do we need to fix?
In this section I will identify the problems with the site.
INTERACTION MAPPING
Where do users go most?
The next step was to identify the hotspots of the website, AKA the most frequently accessed areas. Using data from the user interviews, I configured an Interaction Map of the site. Then, the next step was to take that IX flow, and transform it into a native app format. Both are below.
This section will hold the Verpets IX map and the updated app map.
WIREFRAMING
Let’s build a skeleton
With the IX map fleshed out and user research to support my ideas, it was time to begin the process of figuring out how the app version of Verpets would look. The first step was to start with the basic building blocks of wireframes.
In this section I will show my wireframes.
FIRST ROUND OF USER TESTING
What do the people think?
Next up, it was time to user test the wireframe flows using an online clickable prototype. I tested with a mix of people who had used pet game sites before and who had no experience with them.
It would be great to add a video of usability testing highlights, but a text or graphic summary would do.
UI DESIGN
Let’s make it pretty.
With a round of users’ opinions in mind, I set off on the journey to update the visual and design language of the site into something that would be app-friendly. Here’s what I came up with:
Here I will post mocks.
USER TESTING, ROUND 2
The stakes are high.
With so much time and effort invested into the mockups, it was time to take my designs back in for more user testing. I needed to make sure users’ needs were accounted for and ensure the app’s usability.
Here I will post user testing round 2 results.
FINAL DESIGNS
We’ve come such a long way.
After much investment of time and effort, I finally had the final designs for the Verpets app.