The Population Project
The Population Project is a non-profit organization whose purpose is to compile a list of the full name and date of birth of every human alive. Nearly 12% of the world population has no legal identity and this project seeks to give these people a place that recognizes their existence. Anyone can create, edit, or suggest the deletion of a record so requires a mix of quality user interactions and data visualizations.
I was tasked to research and design The Population Project website which consisted of approximately 25 pages for desktop and mobile.
- Research & Strategy
- Interface Design & Developer Hand-off
- Post-Deployment User Testing
Sole Product Designer
6 Months
Design Tools
User Research
Research Strategy
It was clear from the beginning that this project not only had no established user base, but the target user base was quite vague (i.e. it included everyone in the world). Since I didn't have much to gain from specifying a demographic through user interviews as that would be beside the point, my main strategy for research was then to learn as much as I could about community-run organizations, the people who volunteer their time to those organizations, and, perhaps most importantly, the goals of the client I was working with.
Through my research, I wanted to:
- Learn about community-focused business and how they successfully attract volunteers
- Understand the motivations and kinds of people who spend their time contributing to open source projects
- Identify websites with similar goals and evaluate their strengths and weaknesses
- Learn more about making a website that is accessibility to anyone around the world
- Understand the business goals, needs, and major obstacles
Competitor Analysis
I next conducted extensive research on websites and projects with similar goals to The Population Project. Wanting to avoid designing a government-like website (e.g. census.gov) I decided to look at websites that had open content, meaning the community can edit and create content on the site. I also looked at modern dashboard designs and other data-heavy sites to see how they display their information. Here's what I found:
Strengths:
- Popular information source that's used all around the world
- Community vetted information that's transparent
- The simple design puts emphasis on the quality content
Weaknesses:
- Took many years to become a trustworthy source of information
- No rating scale to see how trustworthy an article is
Strengths:
- Bare-bones design makes the content the hero
- Easy to navigate with a low barrier to entry
- Wide range of possible uses from personal to professional
Weaknesses:
- Minimal designs can mean limited features and functionality
- Overuse of icons can make this look unprofessional
Strengths:
- Large amount of interesting data
- Modern look with animated data visualization that encourages exploration
- Interface is customized to you
Weaknesses:
- The large amount of data on the screen makes it difficult to know what to focus on
- No incentive to return to the website after you leave
Research Results
Business Goals vs User Goals
One of the first steps I wanted to take was establishing the business goals and the user goals and deciding where they intersect. After extensive interviews with the team, this was what we found.
Personas
Though it was clear the general persona for this project included (ideally) everyone in the world, through my research I was able to distinguish two separate persona's that helped me eventually build out more concise user journeys. Meet Ali, the researcher, and Günter, the contributor/volunteer.
.jpg)
-1.jpg)
Site Map
Finally I wanted to build out a site map of all pages to help the client and developer visualize how the site would look from a designer's perspective. This site map went through many iterations as we discovered some pages were buried too deeply within the site and new connections had to be made so users could access the data they needed. This proved to be the most valuable graphic I produced for this project in improving the overall structure of the site.
Design Decisions
The home page holds the large map that represents the bulk of the data collected by The Population Project. The color gradient of the map shows how many people have been recorded in each country and each country is linked to its own page. Here are some major components that changed from the initial design to the current design:
- The search option in the nav bar changed from individual inputs to a single input. This gave the user more context on what exactly they would be searching for.
- A search bar was added to the drawer on the left side of the map to give users a second option for choosing a country.
- A zoom option was added to the map so users can more easily view smaller countries.
- The design of the information below the map developed into a more modern design that broke up longer paragraphs into information that was more digestable.
Initial Design
Current Design
Users can search for any person's name and the results page lists all of the people the Population Project has recorded. The important elements included were the ability to filter your search, a display of results, and links to the first/last name pages. Here are a few of the design elements that changed from the initial design to the current design.
- The initial design had inconsistent sizing. For the current design, I decreased the font sizes, rebalanced the spacing, and took out outlines that made the design look too cluttered.
- The bookmark icon went from always being visible on every record listing to only being visible when you hover over a record. This decluttered the results and minimized redundancy. I also replaced the "See more details" text with a down arrow for the same reason.
- I added more consistent margins to the page so it looked more balanced.
Initial Design
Current Design
The create record page was an important and complicated page because there was a lot of potential for user error and confusion that had to be thoroughly thought through. The initial design didn't display an error until the user clicked the submit button. I knew there was a more user-friendly and efficient way of explaining errors in real time. Here are a few of the design changes.
- In order to show that the record the user created has a duplicate we initial thought of displaying an error message along with the duplicates once a user clicks submit. Once we established that the information could be displayed as the user was filling out the form, I decided to show that updating information to the left side of the form and grey out the submit button until "similar records" was 0.
- The form itself was reformatted so that the "similar records" display could sit to the right. A maiden name input field was also added and would display when a user chose "female at birth".
Initial Design
Current Design
Every country on the Population Project website has a dedicated page that displays that country's progress and data. My biggest challenge while designing this page was to figure out the best way to display a bunch of data in an organized and compelling way. Here are some of the elements that evolved during the redesign.
- I wanted to add some interactivity to this page so I added a hover effect to the progress bar (which represents the number of people recorded vs. the total population). When a user hovers over a milestone dot, it reveals the date that milestone was achieved.
- I initially experimented with formatting and graphs to add some visual intrigue to the page. The client in this case preferred the the cleaner version where statistics were organized horizontally.
Initial Design
Current Design
The first/last name pages show how common certain names are around the world. This page was initial meant to include more interactions where a user could choose any country and find data on any name in that country. This, the client felt, was too complex and they would rather display global data for each name and allow the user to only change the name.
- Because the first/last name was simplified, I felt the best display would be the same one used on the home page. This gave more room for the map and decreased the overload of data the user could see.
- A user can no longer interact with the map on this page. We agreed that an interactive map may overload the backend and increase load times by too large a margin. The map in the current design is purely there to help visualize the data.
Initial Design
Current Design
Design System
The client and I had multiple meetings trying to settle on the messages we want the design to convey. These are the points we settled on.
- Lightweight and universal. Accessible even for people with poor internet connection. Simple color and formatting that is usable in any country. Language translations. Minimal photos. No videos.
- Let the data speak for itself. The data we show is all the data we have.
- Elegant and classy. Let the focus be on the content. Complicated interactions can confuse people who aren't used to them so keep them to a minimum.
- Transparency. People will be wary about giving away their information so it's important to make it clear what our mission is, what the data will be used for, and why it's important.
- Enjoyable. Keep people engaged and wanting to explore by making the experience enjoyable. Interactive elements when necessary and data visualizations.
