The Name Game
a baby naming website case study
The Challenge
The Name Game is a name ranking game website. At the time I joined, it was a bare bones but functional site in need of a UX/UI redesign. It consisted of a login screen, basic list creation and editing page, the main game playing page, and an admin page for theme selection.
My Role
I wore multiple hats for this project: UX researcher and UX/UI designer. I was also pregnant at the time I joined, so I had the unique perspective of being a potential user as well, while helped me further empathize and relate to our target demographic. The goal for this initial redesign was to research additional features that would improve the overall user experience and a compelling visual user interface. I worked in tandem with a software engineer, meeting for twice weekly stand-ups and keeping each other up to speed via Trello. Keeping to-do lists and labeling tasks on Trello helped me manage my task and progress, as well as ensure open lines of communication.
Project duration: 12 weeks
The original Name Game user interface:
PHASE 1: RESEARCH
Competitor Analysis
I began by conducting a competitor analysis to get a better idea of what other baby naming tools exist, what they offer, and how they compare to The Name Game.
Competitor # 1: BabyName
Basically Tinder for baby names. The user and their partner both download the app and can separately swipe right and left on names that are generated by the app. When they both swipe right, it’s added to a shared list. Users cannot add their own names nor does it support single player use. Each name comes with the meaning and origin.
Competitor 2: Namly
Another Tinder style app and similar in function to Babyname. It has a list view in addition to a card view, it shows name meanings and has a pronunciation feature. It allows users to add their own names, but they need to be approved and added by the developer.
Competitor #3: Baby Name Together
Yet another Tinder style app! Overall, similar to the previous two apps. A search feature allows you to search for names based on certain criteria (beginning letter, end letter, length). The app allows users to add names but they don’t seem to be added to the shuffle of cards, just to the favorites list. Can link partner account to see how their list compares.
Competitor #4: Kick to Pick
Kick to Pick lets the user’s unborn baby choose their own name! Users can generate their own list of names, place your phone on your baby bump and then press start on the app and wait for the baby to kick the name it likes best.
There were dozens of others, all variations on the same thing, but these seemed to be the most popular.
User Interviews
Equipped with a good sense of the current baby naming app market, I interviewed 11 current/prospective parents to find out:
How they approach naming a child
If this kind of website would appeal to them (or why it wouldn’t)
What features they would want in such a website
If they’ve used any baby naming apps previously and whether or not they had a positive experience with them
General demographic info about survey participants
I also interviewed 3 expectant couples who played the website in its current state to learn about their experience with the product. In addition to the initial questions and research goals, I wanted to determine:
If this product was helping them in their name picking process. If not, why not?
What do they like about the website?
What isn’t working?
What other features does it need?
Interview Findings
I analyzed the data from my interviews by creating an affinity map and organized my key findings into the following categories:
Failures and flaws of existing apps/sites/resources
Shortcomings of current methods people have tried
How people go about choosing names
Naming for relatives
Disagreements with partners
Game play feature requests
Other feature requests
What people like/don’t about the website in its current state
Name input
Master list features
Organizing my data into affinity maps helped me find trends and patterns in my user interviews.
Below are the findings that I found to be most valuable in determining how best to proceed:
The most commonly reported failures and flaws of existing name resources were:
Not being able to input your own names in apps, only used prepopulated lists that were often useless
Online lists are by no means comprehensive and you need to look at quite a few to be thorough, coming across many repeat names from list to list along the way
The most commonly reported challenges of people’s current/previous approaches to naming were:
People didn’t feel like their approach was exhaustive enough - that there were names out there they didn’t think of and would have considered
It’s hard to select contenders to begin with
The most commonly requested feature requests were:
In addition to being able to input your own lists of names, users also want master lists that are organized by category (e.g. botanical, popular girls names 2020) to help them out
Users want to be able to link their game with their partner to compare results as well as share with other participants
What people like/don’t about the website in its current state:
Not every name pairing needs to be made - once it’s clear that one name keeps losing, it should stop appearing
Scores are only viewable from the game page and that feels limiting and inconvenient to users
There’s no undo function
Not a dislike per se, but users would like it even better if it had master list/suggested name features
PHASE 2: SYNTHESIS
Personas
Using the information I gleaned from my interview participants, I crafted 3 personas that represented my key user’s needs, goals and pain points to help me determine appropriate design solutions and understand them in context.
User Journeys
I created user journeys for each of my personas to illustrate their current mindset and their path to a solution. This process helped me better visualize their struggles and understand how this website would help them.
Rachel & Jason
Jon & Tamir
Steph
Now that I had a much deeper understanding of my users, I could finally create a problem statement, allowing me to hone in on my designs and improve The Name Game:
Choosing a baby name can be overwhelming and challenging. Our users need a tool that will help them source, view and rank name options in order to make the name picking process more organized and enjoyable.
PHASE 3: UPDATED SITE DESIGN
Creating a site map allowed me translate a list of feature requests into something visual and tangible. This process helped me determine how best to organize everything and understand how the website would function. I took this a step further by creating user flows that focused on first time use, playing The Name Game and using the share feature. This helped me visualize the steps my users would need to take to complete an action and made sure I accounted for everything.
PHASE 4: WIREFRAMES & PROTOTYPING
Low-fidelity wireframing
With a clear sense of my users needs and site map to guide me , I created a series of lo-fidelity wireframes for mobile and desktop to begin visualizing the website’s interface and how my users might interact with it. Here’s a selection of them:
Mid-fidelity wireframing
Next, I re-created my wireframes in Figma and started conceptualizing basic UI components such as buttons and icons.
As this was my first time using Figma, I fell down the rabbit hole of tutorial videos on creating components and before I knew it, I had ended up turning my mid-fi wireframes into something resembling high-fi wireframes. I suppose it’s not the worst thing that my usability testing participants got to interact with a more polished prototype, alas.
PHASE 5: USABILITY TESTING & ITERATION
Usability testing
I created an interactive prototype using Figma and recruited 9 subjects to participate in usability testing over Google Meet. 4 of them tested a mobile prototype and 5 of them tested a desktop prototype. I gave each participant several tasks to perform on the website and I had them share their screens so that I could see what they were doing as they thought out loud:
Login/sign up
Create a new list
Play The Name Game
Share list/game
Contact site creators
I also let my users poke around and explore the prototype and invited all comments and criticisms. I got some really great feedback and some interesting suggestions, here are some of the most important takeaways:
Icon meaning was ambiguous - Apple and Android have different “share” icons and some other icons I used in lieu of a text button were not clear either.
Having “stars” (for bookmarking) on the list label doesn’t really make sense - users want to favorite/bookmark individual names within the pre-made lists, not the entire list
Indicate that your invitation to share was sent
Add a home page to the hamburger menu, not everyone will know to click The Name Game logo
Add a “create list” option to the view lists page
Add an “add” button where users type names/email addresses on create list page and share page, it might not be intuitive for everyone to hit enter
Onboarding/tooltips would be helpful to explain all the features
The conversations I had with my testing participants helped shape many design decisions that I made to produce the final product which you can see below!
High-fidelity wireframes
I wanted the UI to be playful, so I leaned into traditional baby colors and designed a sparkler inspired logo. I used Android Material Design icons for consistency, made the buttons and text boxes rounded for visual softness and kept the design simple and minimal overall.
First time users will be greeted by a sign up page.
Returning users will be given the option to log back in.
First time visitors will encounter a welcome screen that will assist them in getting started.
When creating a list, users can enter multiple names at a time, separated by comma and add them either by tapping the plus sign or using the enter button on their keyboard.
There is also an edit functionality so users can add or remove names from existing lists.
Each list page displays the names alphabetically. This page has buttons that allow the user to play, view scores, compare scores, edit and share their list/game. There is also an alphabet scroller to allow the user to quickly jump to the letter of their choice.
The main game interface displays a completion progress bar, gives the user the option to undo their last move or draw (neither name receives a point). Users also have the option to switch to a different game, view their scores or compare scores if they have shared this game with other players.
When the user chooses to view scores from the game playing page, there is a back button that allows them to return to where they left off. The scores and matches are collapsible to minimize excessive scrolling.
The compare scores option features drop down menus so they can select which participant's scores they want to compare. Again, there is a back button that allows them to return to the game and continue from where they left off.
When accessing scores from the main menu, there is a drop down menu allowing the user to select the game of their choice. In lieu of a back button, the user can return to the main menu by tapping the logo on the top of the screen.
A drop down allows the user to choose which list they wish to share and a second drop down allows the user to choose what level of permissions they want to share. This drop down also has the option to remove a participant entirely.
The user will see a version of the sharing page with a back arrow when they access sharing from any page other than the hamburger menu. This allows them to return to the previous page effortlessly.
The main menu can be accessed from any page by tapping the logo at the top of the screen.
The hamburger menu has a home button so that users for whom tapping the logo isn't intuitive, have a way to easily return to the main menu.
The view lists button on the main menu takes the user to this screen.
Tapping the view all button on the previous screen takes the user to a page with all their lists.
As seen previously with the girls first names list, this is the format for user-made name lists.
The user is taken to this page when they tap "view all" button underneath "Names by category" on the view lists page.
Users have the option to filter by gender, number of syllables, number of letter and first letter when browsing the suggested name lists. When the user taps a filter, a min/max slider appears beneath the buttons allowing the user to set their criteria.
SOME CONCLUDING THOUGHTS
At this time, I’ve handed off my deliverables to the dev team and The Name Game will have a sparkly new user interface and intuitive design in a few months.
There were some feature requests that didn’t make it into this iteration, but I plan to implement them in the next round. Users want suggestions based on already inputed names (even based on just one single name), voting capabilities (for people with whom users share their list) and a pronunciation feature.
On a personal note, when my husband and I found out we were expecting, we had 150+ names we attempted to make sense of. Going through our lists, there were obvious yes’s and no’s but yes/no felt too binary. The Name Game gave us the nuanced approach we needed that allowed us to see how much we liked a given name relative to the other names on our list. Not to mention it made the process fun and way less stressful, while helping us clarify our name preferences. We ended up playing 4,156 rounds of The Name Game and went with the number one name for our daughter.