top of page
Toucan%20masthead%201_edited.jpg
handset white.png
ARk Logo Motion V1 _Vid_timeline_V4 - co
Artboard 1 - UI Style Guide ARk'a.png

Ark Children's AR Learning App

Digital Designer/Developer
My Roles
Producer
Production Designer
Location Manager
Post Production Supervisor
Marketing & Distribution
pexels-sevenstorm-juhaszimrus-891030.jpg

UX/UI Design

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras tellus sapien, lobortis eu efficitur et, hendrerit vitae ligula. Aenean ornare maximus turpis, eu tempus massa placerat eu. Integer velit sem, efficitur ullamcorper mollis ac, auctor at enim. Donec et risus in ante suscipit aliquet a ut justo. Aenean tincidunt erat lacinia, commodo felis at, porttitor tortor. Vestibulum lacinia placerat augue in pharetra. Cras interdum lorem est, eu egestas justo sollicitudin id. Aliquam at ornare tellus. Maecenas mattis tincidunt pellentesque.

Nunc nec scelerisque augue, non sodales est. Donec egestas velit neque, quis suscipit justo ultrices at. Suspendisse potenti. Maecenas nec condimentum ante. Sed posuere neque vel sollicitudin pulvinar. Sed et est vel magna accumsan tincidunt. Sed id mauris in massa maximus pharetra. Proin semper sem eget arcu ultricies, a laoreet sapien sollicitudin. Phasellus quis euismod ante. Phasellus at aliquet nisl. Cras at neque ultricies, tincidunt sapien et, sollicitudin est. Curabitur purus est, eleifend et dapibus id, ullamcorper ac urna. Fusce pulvinar, justo eu mollis vehicula, lectus tortor mattis risus, molestie sagittis metus elit id neque. In hac habitasse platea dictumst.

ARk

Nature in Your Pocket

pexels-wesley-carvalho-4127923.png
handset white.png
handset white.png

          ARk intends to inspire future generations, creating a global network of  tuned in explorers, illuminated and willing to protect the wonders of the natural world. 

"

"

One of the most powerful ways we can create an impact in conservation is to inspire new generations in the beauty and importance of nature.  In our modern world, many children and even adults have not the opportunity to experience our natural world.  If we want to save our planet it is of the utmost importance that we aim at educating everyone about the importance of conservation and inspiring engagement in the real world.  And now with the use of immersive technology and some clever design we can.

ARk app the amazing animal tracker app adds an extra dimension to e-learning through the use of augmented reality gaming. Using the fable of Noah’s ark as a vehicle for a scavenger hunt, ARk gets kids out of the house, exercising and collecting virtual animal cards ‘two by two’.  Once the cards are collected and stored in your ark there are lots of fun facts and media about the animals, nature, and ecology to turn to time and time again.  Alternatively, you can trade your cards on the in-app trading platform with a global community.

Overview

Page%20motif%201_edited.png

My Design Process

lead method V5.gif

Tools 

My Role

Project Statistics

Testing

UX Designer:

  • User Research

  • User Testing

  • Analytical Data Reviews

  • Wireframing

  • Information Architecture

  • Prototyping

  • Preference Testing

  • UI Design

Immersive Technology Research

Project Length 10 months:

  • 3 months, User Research

  • 2 months, Surveys & Retesting

  • 5 months, Iterated Wireframing/Prototyping

Project Status:

Design ongoing.  Seeking Development Funding with working Prototype.

Project Demographic:         User Testing Group:

  • Children 3 years+                 46

  • Adults                                    62

Problem & Solution

Page%20motif%201_edited.png

Problem

The world is at the point of no return for the natural world.  As a population, with 80% of us now living in cities and urban areas we have lost contact and respect for our natural world, especially our children, most of whom due to location and socio-economic factors have and will never have the opportunity to see wild animals.  Our children require a simple, exciting, and accessible way to learn about and enjoy wildlife in order to educate and strengthen the link and passion in our natural world.

Solution Graphic.png

Hypothesis

I believe that building this app with its 'learning through gaming' style and added immersive technology will enable children all over the world to get close to nature, learn and reconnect with the natural world inciting a passion 'in some' for conservation.  It also will enable children to play with physicality, as opposed to sedientary 'modern world' play.  Helping reduce health problems from a young age.

Solution

ARk offers five integral features created for learning and playing.

  • ARk Hunt:  Track down interactive AR animal cards and play quizzes and puzzles.

  • My ARk:  Save animal cards in your virtual ARk, interact in Augmented Reality, learn facts, watch videos and animation, and even feed them.

  • MARket:  Trade your cards with a global ARk community.

  • ARk Hunt Creator:  Build your own hunts for parties and group fun.

  • ARk Store:  Purchase in-app items, learning materials, gifts, and merchandise to continue your learning journey.

Ark is presented as a native app compatible with IOS and android portable devices.  Yet it's ultimate user interface will be virtual/AR eyewear.  Presented in a visual game structure designed for a child demographic with intuitive controls and a little premeditated friction for instinctual interaction.

To widen the demographic ARk has been designed with accessibility in mind, providing settings for both motor function and visual disabilities.

ARk will be partnered with stakeholders like WWF and Nat Geo and Blue Planet to offer a comprehensive fact base for educational and learning materials.

Competitive Analysis

There are several AR apps on the market involving treasure hunting.  They range from basic navigation games to more complex solving puzzles.  Obviously, one major competitor, Pokemon Go, stands out above all others, however, Pokemon is pure gaming for fans of that niche.  There are four types of learning Visual, Auditory, Reading/Writing & Kinaesthetic - learning by doing.  I aim to build a game app that includes all four types of learning rolled into one tidy, accessible package with the use of AR, a kick-ass concept, and timely on-trend subject matter, 'extinction of our natural world'. 

 

ARk a wildlife learning app for ages 3+ that will get you up on your feet and saving the world.

Competitor logo mash up.png

Aircoins

Aircoins.png

Actionbound

actionbound.png

Gamar

gamar.png

Actionbound offers a platform for creating, sharing, and playing digital treasure hunts using Augmented Reality. Treasure hunts or ‘Bounds’, as they call them can be created anywhere which has access to GPS mapping enabling the app to be played virtually anywhere on Earth.

Aircoins is a cross-platform app used for collecting Crypto-Currency in AR/VR format, primarily targeted at a commercial demographic for marketing campaigns.  Users can see and interact with virtual objects in the real world, collecting or dropping coins from their crypto wallet.  Possibilities of this platform are varied and as yet unexplored to full capacity.

Gamar platform was first launched for museums and art galleries Since launch they have grown and moved into a wider consumer game stream creating family-focussed games using immersive technologies.

S W O T

ARk Comp Analysis SWOT.png

User Research

Page%20motif%201_edited.png

          I'd want a learning game to help my child with homework that is part of their syllabus and that's also safe online for her to play without my supervision.  

"

"

Interviews & Affinity Mapping

ARk needs to appeal to two demographics, Children 3 years+ and adults who are parents, guardians, or teachers therefore creating two user groups.  I had to get an appropriate perspective from each group and from this point onwards set up a parallel testing and feedback stream for them.  Interview questions were all based around Gaming with subcategories of questions; Technology, Family Time, Safety & Security, and Learning respectively.  All categories were interlinked by one final, central question; "How would you want to explore the natural world in a game format".

          I'd want a fun interactive game that I could share with my kids, easily, at any time, and was a journey, story kind of thing. 

"

"

Adults 16+

Children 3+

ARk Affinity Diagram v5PS.png

Diagram 1.

          I'd like a game that I could share with my friends on the computer with animals as pets that we can look after and swap.  

"

"

Affinity testing for Personas ARk_crop v

I carried out an affinity mapping exercise that would give me a high, medium, and low priority for user requirements.  I assigned colored stickies to each interview candidate and prioritized my data findings under the categories above in diagram 1.  I discerned the key goals for my personas and targets for my design to adhere to. 

Personas

From my affinity mapping, I have taken forward a primary and secondary persona from each stream of research data (Children and Adults) enabling extra provision within the app for demographics concerned.

Fran Persona.png
Guy Persona.png
Harry Persona.png
Mika Persona.png

Primary Personas

From my affinity mapping, I have taken forward a primary and secondary persona from each demographic stream of my research data (Children and Adults).  This will allow for wider testing and feedback, enabling me to find a balance in design between the two vastly different demographics.

fran 1.jpg

Fran, 30, Work from home mum with own business

Goals

To find an App for her children that teaches about the environment and nature with takeaway offline aspects

Frustrations

Fran hasn’t got a lot of time nor patience to learn complicated apps.  She expects to click and play, not be bogged down with long-winded controls and stories.

  I have a busy family and leisure life which is great I hate being idle and if it gets too much I can always escape to my studio and lose myself in creativity.

"

"

pexels-jonas-mohamadi-1427288.jpg

Grayson, 7, Schoolboy, rugby player, and avid gamer

Goals

He loves physical activity, especially competitive sports, games and puzzles.  He’d like an app that is shared with friends and an online community.

Frustrations

He doesn’t like Apps that give you the first game and then make you pay for all other access or lives in the game.

  I like where I live as there are lots of open spaces but not much to do unless you travel into the nearby city.

"

"

Secondary Personas

daddy 2.png

Omar, 40, Sound Engineer

Goals

He likes throwing parties for all occasions, Christmas, birthdays, Easter, Halloween, etc. and invite his kids' friends round to enjoy therefore making home life extra fun.

Frustrations

Omar is angered by how easy it is for his children to mistakenly use in-App purchasing.  He hates the lack of clarity within Apps.

   I have the luxury of working for myself, therefore I have time to look after my family and entertain our children and their friends.

"

"

girl.png

Mika, 12, Schoolgirl with a passion for creative arts and dogs.

Goals

I want to be able to design games to share with my friends.

Frustrations

She doesn’t like adverts or popup’s in games that want you to watch or buy to advance to the next level.  It would be great if there were just open-ended free play games out there.

  I like playing on my laptop but my sisters always distract me, especially when I’m Vlogging!

"

"

Information Architecture

Page%20motif%201_edited.png

Initial Site Structure Sketch

Below shows a simplified overview of ARk.  After the onboarding process, there are five main features of the app as highlighted below.  From this point onwards I explore four of the features of ARk, My ARk, MARket, ARk Hunt & ARk Hunt Creator also some sub-features.  I will show user flows, full sitemap, and design iteration of wireframes for the main screens of the features.

Sitemap Overview 2 - Key Features.gif

User Flows

My user flows take into account goals highlighted by my personas in respect of game features.  The flows show how a user would access each feature from login into gameplay.

Click image to see more User Flows

Sitemap

Once I was happy with my user flows I created initial sitemaps for each of the five features of my game   After each separate iteration I returned to these sitemaps and updated them.

Wireframing

Page%20motif%201_edited.png

Onboarding

The first image is the latest iteration, Scroll for previous wireframes

This onboarding offers a quick view at the features available in ARk.

However, I feel that it is lacking in conceptual interaction, a theme that drives the game. Therefore interactive step-by-step tutorials, the “glowing choice,” and early stage Win-States will be designed as an accompaniment to reinforce development, accomplishment and provide 'Epic Meaning' & 'Calling' into the process of my onboarding experience.

To improve this onboarding I will look at designing 5 second animations per feature.

The first image is the latest iteration, Scroll for previous wireframes

Feature 1.1 My ARk

This is the landing page of the 'My ARk' feature, with easy to understand category buttons and an assistive onboarding tab.

To offer a wide variety of animals I found that this was the most popular way to categorize.

A Search bar input field and clear and constant on-screen main navigation.

The first image is the latest iteration, Scroll for previous wireframes

Feature 1.2 Animal Card Stats 

Having Chosen an animal card you can 'virtually' flip it over and you will receive comprehensive statistics.  Ordered with a sidebar menu and pagination with an animated finger swipe for native touchscreen.  Each page is also vertically scrollable enabling a wealth of information.  

The first image is the latest iteration, Scroll for previous wireframes

Feature 2.1 MARket, Current Trading 

The MARket feature has three sub-sections, Your Current Trading, Public MARket, and the rate card as reference.  Here, in the Current Trading, you can see up-to-date responses from the ARk community with offers and likes and are able to browse these.  You are only allowed to trade three animals at any one time.

Animals that you have successfully traded are placed in your "My ARk" ready for deployment, you then have 30 days to find and collect.

The first image is the latest iteration, Scroll for previous wireframes

Feature 3.1 ARk Hunt

The hunting feature offers three kinds of challenges, a straightforward animal search, and applied quiz, and a physical or mental puzzle.

After iterating I have decided to continue with the card theme.  when you tap a pin you can see details of the type of challenge that is required, the valuation of the animal, and the extinction type however the exact name and type of animal is still a surprise.  this is in order to add to the gamification value.

The first image is the latest iteration, Scroll for previous wireframes

Feature 4 ARk Hunt Creator

I designed a separate sidebar menu for the game creator so that it is easier to navigate when placing your pins.

Each map pin you place will let you search for the postcode of location as well as then opening a map for a visual placement within a 2m tolerance.

Each placement has then data entry fields to leave instructions, direction hints, clues, and also settings.

After iteration especially after looking at accessibility factors for visual impairment, the darker colour theme has a more legible impact.

The first image is the latest iteration, Scroll for previous wireframes

Sub Feature: Feed Shed

After iteration, the Feed Shed feature has been cleaned up to make it more legible for accessibility issues, visual and motor impairment.

The Feed Shed allows you to purchase any type of feed for your animals to use in AR mode however you have to choose the correct feed otherwise the animal will refuse it and it will be wasted.  This will hopefully encourage the user to learn and also monetizes the app a little further.

The first image is the latest iteration, Scroll for previous wireframes

Sub Feature: Coin Wallet

The Coin Wallet has been iterated for legibility and accessibility but also for a visual game feel.  The basis of inspiration was arcade games from the 1980s with big bold and simple graphics.

As well as topping up your Wallet I have included a sub-feature of a Wallet history so that there is transparency in regards to in-app game spending.  A frustration that I had picked up from my research and user testing.

Overview of Iterated Wireframes 

Sitemap Prototype 3.png

UI Style Guide

Page%20motif%201_edited.png

UI Design Concept

My Concept for the UI Design was to use colours, shapes, and icons that were visual, audible, and emotive of the natural environment.  Colours, both primary and secondary are sampled from elements I found in my natural environment. In addition, I have used the imagery of foliage, for backgrounds to create a more immersive experience, for visual clarity I have transformed these into vector illustrations.  I have rounded and softened shapes used for buttons, boxes, and icons to create harmony in the design.

Colour Theme

ppt_colour palette _UI_ slide.gif

Style Guide

Artboard 1 - UI Style Guide ARk'a.png

Prototype

Page%20motif%201_edited.png

Working Prototype Built in XD

The ARk app is still in the iterative design phase with further user testing of the prototype being carried out.  In parallel, I am searching for appropriate partners to invest in ARk.  Current conversations with gaming companies and also wildlife and environmental organizations are underway  and further research into the current AR wildlife app market is being carried out.

ARk

Nature in Your Pocket

      ARk fills the gap in learning about extinction.  An AR scavenger hunting and virtual zoo game rolled into one where players can trade animals within a global community whilst learning about species past and present, ecology, and the imminent threat of extinction to our natural world. 

"

"

handset white.png
ARk Logo Motion V1 _Vid_timeline_V4 - co
bottom of page