Last fall I set myself the challenge of learning the location of every country in the world.
Geography apps helped me ace quizzes, but the knowledge didn't stick. What I needed was an app that could tell me something cool about each country - a reason to remember it.
The best resource I could find was a website called "Country A Day." I decided to redesign it into an app to teach people a little bit about every country in just a few minutes per day.
The original Country A Day website.
Helpful, but not very exciting.
It also lacked key features such as daily reminders and a way to test what was learned.
User Research
I established the following questions to guide my initial research:
A quick assessment of other educational apps provided some key insights:
Notifications, progress indicators and sensory rewards (sounds and images) such as those used by language app Duolingo keep users engaged in the learning process.
A clean aesthetic and intuitive navigation can make the difference between education being a fun game or a chore.
Duolingo app with fun progress indicators
Interviews & Survey
Interviews, including observation of participants with the old site, revealed the following user wishes:
A survey conducted via the online platform Typeform helped establish what content was most interesting to users.
Personas, Empathy Maps & User Stories
Who would use the app, and how might they use it?
Interview and survey data suggested that most app users would be seeking:
The three personas I imagined informed the design process as I considered how each would meet their specific goals of edification, travel or geography.
I had to reign in the temptation to build a comprehensive travel app. Instead I focused on using people's interest in travel as a way to get them excited about learning and inspire future adventures.
With personas in mind, I created empathy maps to consider each user's problems and goals, and brainstormed several user stories to determine the needs and wants for each task. Putting myself in the shoes of the user uncovered these desires:
Content Strategy
Card sorts helped organize the content into intuitive categories.
Two in-person card sorts established the five main content categories.
Participants suggested there was too much information in the Overview section, an insight that later guided the design decision to exclude some data and “hide” other data on the back of flip-cards as an option for those wishing to delve deeper.
User flows helped to sort out obstacles in user paths before delving into the wireframing process:
A key finding was that the Travel Tips section would need a uniquely flexible structure to accomodate travel-oriented users. This led to the design of expanding accordion portions to allow users to find specific types of data, rather than encumbering them with the swipe-through path used in the rest of the app.
Interface Design
Wireframes
Throughout the wireframing process, which included both sketches and digtal wireframes made in Sketch App, several navigation choices were refined.
The five-icon navigation bar doubles as a progress indicator by changing color as each section is completed. This immediate visual feedback encourages users to continue, a premise confirmed during user testing. It also allows experienced users to easily locate desired content.
Click on any image below to scroll through the wireframes.
Style Guide
Bright global blues and greens give the app a fun and approachable game-like appeal. Canary yellow as an accent complements this palette as a cheerful highlighter to draw attention to selected answers and success pages.
Gil Sans is a clean, friendly and warm font perfectly suited to learning apps.
Design Solutions
To make the app more approachable than the original text-heavy website, I decided each screen should have a striking image showing something unique about the region or inhabitants.
This content-first approach gives users a more memorable touchstone for a country even if the only thing they do each day is open the app and see the location and image.
The icon navigation structure is meant to encourage exploration while giving users a clear path through each day’s lesson.
To mark progress and make the app easy to return to if interrupted, the app’s navigation changes color when a section is completed.
Prototype Testing
Prototype
Using InVision to display my digital wireframes on users' cell phones, I created several iterations of clickable prototypes and rigorously tested each with users.
Using wireframes rather than color mockups in the prototype ensures testers focus on function, not color and style. The prototype can be accessed on InVision here.
User Testing
Testing the prototype revealed:
While it was humbling to discover the shortcomings of the first iteration, user testing was an extremely useful process. The insights gained drastically improved the usability and overall experience of the app.
Researching, designing and testing the Country A Day app demonstrated important concepts that can be applied to all software design. Minimizing information to make it digestible, considering the context in which an app is used, and providing the user with sufficient customization options are all best practices that can be incorporated into future projects.