Shelby’s Quest iPad App-0

Shelby’s Quest iPad App

Objective: Design and develop an iPad app that offers a series of games for students with autism to practice their fine motor skills. Teachers should be able to administer through the app and send themselves reports of scores.

Role: UX Design, Interface Design and Creative Direction

Team:

  • Illustrator: Kim Berkley
  • Developer: Adam McDonald (architecture)
  • Developer: Jake Moore (implementation)
  • Copywriter: Melissa Kowalchuk

Restrictions

There would be no server component from a budget and timing perspective. The ideal would be to have a web server to record scores and provide logins for teachers to access. Because of this we decided to bundle the data in the app and have the ability to email content to teachers or parents who want to see the score. We would have also stored the profiles and all other data on this web server.

Process

Discovery

We began by meeting with our client, who was a full time occupational therapist to get a sense of the audience we were building this for. Questions included:

  • Can you provide us a sample set of games the kids play?
  • Is there a sequential order in which these children play the games or can it be at random?
  • Will any audio instructions be necessary or will the teachers be reading the story to them?
  • How difficult should the game be? Do we want to show alerts when a student scores too low or should we encourage particupation?

At the time our client was open to any sort of direction to the game. There was no premise or story to the game. I worked with our copywriter and the client to come up with a game based on her dog named Shelby. We started with a few naming exercises and determined what the games included in the app would be.

We came up with the idea of a narrative in which a dog named Shelby is on her way home and encounters three friends: Maurice the Moose, Sam the Squirrel and Skip the Salmon. During the development process we decided to turn Sam into Samantha as we realized there were no female animals that Shelby encountered.

Sketches

Once the creative brief was approved by our client we started sketching out the characters and game scenarios.

shelbys_quest

Maze-Gameply

Wireframes

As we were working on sketches and drawings I was also working on the information architecture, user flow, and interface wireframes in parallel. I used Omnigraffle Pro to create a document that would be handed off to our dev team to begin implementing the views once we received client approval. This gave the dev team a foundation and an idea of what we were building while interface design was taking placeā€”building them a longer runway to think things through, ask questions, and implement.

sq-flow

shelbysadventure-1.2

Interface Design

Once the wireframes were approved we designed the interface of the app. I worked on the interface while Kim was working on the illustrations and delivered the assets to our dev team.

Shelby’s Quest Demo from David Hoang on Vimeo.

shelbysquest

Shelby’s Quest was featured by Apple on the app store.

Download wireframes

Download Shelby’s Quest