Aerie Tales, A Choose Your Own Adventure Website. Planning and development. 2018.

Overview

Screenshot of Aerie Tales website. Site has a top navigation bar, followed by a splash image of a nest full of blue eggs. Underneath, there is a block of text titled “Winter Storm” followed by “You put the egg by the window. The wind and snow inspire and excite it.” The next block of text is labeled “A Day of Leisure” and is followed by two buttons with icons on them labeled “Bring the egg to the library. A day of quiet study might calm it” and “Bring the egg to the show.The aerial routines might inspire it”. Finally, there is a footer with a vector Aerie Tales logo and a back to top link.
Problem Statement: Design an app that allows users to play unique choose your own adventure stories based on a physical object they pick up in the real world.
QR Codes:
Users are directed to a specific story by scanning a QR code on a physical object.
Splash Image:
  • Full screen image with jump-down button.
  • Acts as a "cover" to the story and sets the tone.
Single Page Form:
  • Story (and form) updates with user choices.
  • Results submit to same page.
Responsive Design:
  • Adds menu bar jump-to options as the story grows in length.
  • Auto-adjusts for smaller screen sizes.

Site Map

A site map with an overview page for the person running the game (GM / Admin) and six single page forms labeled ‘Egg 1’ though ‘Egg 6’. The players / users are linked to these pages through QR Codes.

GM / Admin Page

Page with six sections, each with an image and a title. The titles describe types of eggs, such as “Gold Large Egg” or “Speckled Pink Egg”.
  • Links to all choose your own adventure forms for game masters / admins.
  • Players / users link to forms directly through QR codes on physical objects.

Web and Mobile Layouts Wireframes

Website Layout.
Mobile Layout.

Web and Mobile Layouts Screenshots

Website Layout.
Mobile Layout.

Story Progression

  • First story and results of first user choice displayed.
  • Second story and second story choices are added.
  • Menu adds jump buttons to each story as it is displayed.
  • All stories and user choices are displayed.
  • A conclusion is generated based off user choices and displayed.

Color Variation

Site with blue splash image and buttons.
Site with purple splash image and buttons.
Site with yellow splash image and buttons.
Multiple color layouts changed by a single variable.