“Where Are You Going” Web App

A part of the Defense Health Agency, Military Kids Connect (MKC) is a website aimed at military youth and provides resources for coping with military-specific struggles. With the outdated website’s redesign upcoming, the MKC product team wanted to know how its web apps could be updated and refreshed as well.

The Problem

The Military Kids Connect had a lot of fun web applications visitors could play. However, MKC would soon have a new website and Flash web apps would be removed altogether. The stakeholder and product team wanted to know how some of the apps could be redesigned after the website would launch a new layout. (This was a project I would later take on – you can read about that here.)

I focused on how the web app Where Are You Going (WAYG) could be redesigned and rebuilt for the modern web. It teaches military kids about common deployment locations, such as Panama.

A screenshot of the original WAYG Flash web app.
A screenshot of the original WAYG Flash web app.

The Process

User persona created for the WAYG prototype, a 10-year-old girl named Mandi Jackson whose mother will deploy to Panama.
Journey of the user persona as she uses the new WAYG web app.
User persona created for the WAYG prototype, a 10-year-old girl named Mandi Jackson whose mother will deploy to Panama.

The user persona and journey.

Persona Design

I completed a heuristic analysis of the existing site and WAYG web app, competitive analysis of similar children’s websites, and researched the target audience (military children aged 6-17).

Based on information gathered at my workplace, I created a user persona named Mandi, a 10-year-old girl who is worried about her mother being sent to Panama for 6 months. Mandi would play through WAYG to learn about the country in a fun and age-appropriate way.

I used these resources to create a new design for Where Are You Going, which would retain the existing content but present it in a more modern way.

A Little Game

I had time to experiment with this project, and chose to try something more creative than just a simple redesign.

I drafted a concept for a new interactive mini-game within WAYG that I called Animal Playground, which teaches kids about animals in the countries featured in the app.

These mid-fidelity wireframes that would show how “Mandi” would start from the global map and end up on the Animal Playground minigame, focused on Panama’s animals.

I referenced the navigation design for the Military Teens Connect sub-site, since that was the only section of MKC that was mobile responsive. Otherwise, most of this concept was very new.

With the high-fidelity concepts next, I restricted my color pallette to what was currently online for Military Teens Connect, but the product team did not like the look and asked if it could be reconsidered in the future. This is something we could revisit when the new MKC website would eventually be created.

A collection of animal studies I did for the Animal Playground mini game concept.
A collection of animal studies I did for the Animal Playground mini game concept.

Young At Heart

It was fun to put my mind in child mode again as part of creating a user persona and writing her journey. It’s why I decided  to create a new mini-game concept featuring wild animals – because kids love ‘em!

I also added new features to the main map: random objects and animals would animate in response to being interacted with. I was surprised when I clicked on the penguins in the original app and did not see them respond. Kids are curious, and micro-interactions like those would reward the adventurous world explorer using the app.

The Solution

The product team was really excited by the potential in these concepts, and the full end-to-end UX design process for this project was a major learning experience for me. It was also super fun! I especially enjoyed having an excuse to draw animals and show off more of my artistic skills.

Some images of high-fidelity concepts.
Some images of high-fidelity concepts.

WHAT’S NEXT
I would later work on the new website for Military Kids Connect, which launched in early 2019 but without a games section. I left DHA soon after, but someday I hope they add some games to it and I get to play this one myself!

IV Admixture app for Android Usability Research
DHA Usability Lab Logo Design Concepts
Menu