Double Or Nothing
In order to improve the mobile experience of the sign up and login pages to the Neopets website, I focused my re-design on user-centered design principles and research to ensure usability and accessibility.
Through that research, my design decreases the cognitive load and frustration users may feel when signing up for Neopets. By easing this process, more users will be able to create their pets and the company's sign up KPI will rise as a result.
Disclaimer: This is an unsolicited redesign, and all star design elements and the Gelert species are trademarks of and copyrighted by Neopets, Inc., © 1999-2021.
In 2000, I walked into the lands of Neopia with a blue Polypup at my side. It's been 21 years and that boy is long gone, but I never left Neopets, gaining a wealth of pets through the years.
In late 2020, Jumpstart made the highly anticipated decision to adapt Neopets into a mobile experience. I was excited as you can imagine, but in discovering and utilizing my phone as a means of caring for my many pets, I found the experience to be taxing.
It was a problem. A lot of problems, according to the large and active community within the Neoboards. The loudest spoke of the following:
- A plea to improve the relationship between the mobile and desktop experiences, as mobile elements were stepping on the toes of desktop features, causing users to give up outside of doing their dailies.
- Asking for a better flow in navigation to get from Point A to Point B, no matter if they're using a phone or desktop.
- Consistency and coherency with related content, such as individual parts of the signup process.
The Daily Dare
My goal was to stream-line the process through improving accessibility and usability during sign up while maintaining the personality and fun Neopets has always been known for.
Within a week.
UX Research, UX Design, UI Design (Wireframes, Mockups, Prototypes)
Clip Studio Paint, Figma
The tried and true Neoboards and the Neopian Reddit communities.
Spinning The Wheel of Knowledge
Utilizing design heuristics, I focused on preserving screen space in the initial wireframes. In its original state, it required the user to scroll due to the double footer from the desktop version blocking access to the remainder of the container and next button.
To keep with the playfulness of the Neopets brand, I opted to include a yellow Lupe delivering the ever important message of never revealing your password to anyone. This is a common random event a user can obtain on site, and it seemed fitting to deliver that information during sign up.
I moved the support links to the hamburger menu in order to remove the double footer created by the desktop version, freeing up the screen space so that a user can see everything they need to submit in one space.
As a final measure, I removed the sign up and login buttons located on the bottom footer of the screen. Not only did they cause the 'Sign Up' title to be mistaken as a button due to the same styling, but if a user has chosen whether to sign up or login, this is the point where they are sure that it is what they want to do, and to prevent a user from leaving their current progress on accident.
I was happy with some changes but felt they could be improved.
After receiving feedback from the community, I made the decision to move the hamburger menu to the right side of the screen. The majority of mobile users are right-handed and this prevents them from straining to reach any necessary links they need in the event they can only use one hand.
The same feedback suggested I change the styling of the sign up banner. In previous wireframes, the sign up looked more like a clickable button, similar to the official version used by Jumpstart. I extended the current style to reach both edges of the screen for a more obvious banner-like look.
While the dialogue of the pet gave personality to the process, I removed it as it prevented me from compensating for error messages with additional space. Regarding accessibility, having text within the text boxes often cannot be read by screen readers, which can make a user unaware that an error has happened.
I was happy with some changes but felt they could be improved.
The basic structure was already there, and only needed to compensate for the extra links removed from the double footer. I also changed the social media icons to a consistent color and enlarged them to ensure they were easily readable on a mobile screen.
Guidance from the Fountain Faerie
The Create-A-Pet section is seen as an extension of a new user's experience despite it's accessibility at all times. In order to access the majority of the site, a pet is needed after all! As a result, I naturally aimed to solve the problems with its current state.
The main goal was to ensure the pets were extremely large and visible for a mobile user.
The best part of the creation process is seeing the species after all, and I wanted to make sure the users knew what they were creating, so for the first pass, I opted for the single page option.
Unfortunately, I discovered very quickly that a pet carousel would cause a slow down in the users actions, having to sit and swipe through each individual pet until they found the one they want. After I made the decision to break up the pages for consistency with the sign up process as well as minimizing the information processing, I opted to make the carousel a similar menu to the one already currently in action in the official design.
I was aware that the page is meant to be set up for both new and current users, however I felt that the page could evolve based on the user's needs. A current user would have the native navigation within the site, whereas a new user would still be subject to the new user menu that offers merchandise and support links.
I received feedback from other users that was similar to the sign up suggestions they offered.
The pet menu has a visible selector to show which pet is currently chosen and I added a scroll indicator to show that the menu can be swiped vertically. The indicator is not the exclusive space a user can scroll. It is just there to inform the user that the entire container is swipeable. For the bandana, a cancel button was added to whatever is currently selected. In the official design, the cancel button has its own space and the icon chosen to represent it doesn’t fit well with Neopets’ iconic style.
Grab Some Kaussants for the Road
My goal with any design is to ensure accessibility and a user-centered, intuitive experience without sacrificing the creativity and personality of the product and its brand.
This was extremely hard to balance with a site like Neopets. While I've been a user since 2000, I had to take into consideration its evolution over the years and its appeal to a much wider audience than was intended at the beginning.
Even after completing these designs, I still see where improvements can be made.
In the end, while this study focused on the problem-solving regarding a user's first experience delving into the world of Neopia, my ultimate goal is to re-define that experience across the entire site, one piece at a time.
With that being said, for the sake of completion, I've also developed the sign up and create-a-pet mockups for desktop viewers in order to keep the intention of responsive design in the forefront of my mind. These are surely not final designs. Like my work with the mobile edition, there is much to address to ensure an equally enjoyable experience for users.