“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.

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 that knowledge, I created a new concept for Where Are You Going that retained the content but presented it in a more modern way. I also created a concept for a new interactive mini-game within WAYG called Animal Playground, which teaches kids about animals in the countries featured in the app.

Based on research 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 referenced some of the existing infrastructure on the Military Teens Connect sub-site, since that was the only section of MKC that was mobile responsive. I designed a set of wireframes that would show how a user – Mandi – would start from the global map and end up on the Animal Playground minigame, focused on Panama’s animals.

With the high-fidelity concepts, 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.

Images of rough digital screens, built in Adobe XD for prototyping.
Some of the wireframe pages for the WAYG app redesign, created in Adobe XD.
Images of rough digital screens, built in Adobe XD for prototyping.
Some of the wireframe pages for the WAYG app redesign, created in Adobe XD.

I referenced some of the existing infrastructure on the Military Teens Connect sub-site, since that was the only section of MKC that was mobile responsive. I designed a set of wireframes that would show how a user – Mandi – would start from the global map and end up on the Animal Playground minigame, focused on Panama’s animals.

With the high-fidelity concepts, 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.

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: non-key objects and animals would animate in response to being clicked on. This was something I was surprised was not already present in the original application. 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