Space Quest

Research / Visual Design / UX Design / UI Design / Motion Design

Project Overview

Space Quest is a space-themed adventure app that allows users or groups of users to create photo scavenger hunts using geofencing and user-generated tags. This was commissioned by my workplace as a cross-company design/development effort. He would later develop and release this app internally, where it was used to display the studio's game making capabilities. I collaborated with a senior designer, a fellow junior designer, and a developer to design this app.

Research

Before I started creating screens or defining features, I conducted a competitive heuristic analysis of similar apps to get an idea of how they handled things like navigation, information architecture, and feedback mechanisms. I also compiled a list of reviews for scavenger hunt apps like Scavify, Goosechase, and Let’s Roam. After synthesizing the information, we discovered that users strongly desired a few things:
‍

Users wanted an easier way to add their friends to the group.
Users wanted a way to integrate photos into their scavenger hunts.
Users wanted a simpler game creation flow that was mobile-first instead of reliant on desktop.

App Flow

Based on our research and the client’s requirements, we broke down the app into the Active Quest, Quest Log, My Quests, and Quest Making flows. We broke those down further into individual screens, and then what features those screens needed.

Wireframes

Working closely with a senior designer, I created these wireframes to better spell out key interactions and to visualize the app’s flow. It was important to keep the visual language cohesive for the experience’s various interactions – too many different screens would add complexity to an already complex series of key interactions.

Visual Identity

I then created a few mood boards that showed distinct visual directions for the user interface. Retro Cosmic, Mysterious Cosmos, and Space Exploration were the visual directions I synthesized.

These styles vary in color palette, typography, and levels of playfulness, but all are meant to feel approachable. We ended up going with Retro Cosmic – the client liked its warm colors and bold typography. We also all liked the non-traditional layouts and shapes used by the illustrations in the mood board.

First, the user logs in using their Google account. We limited the sign-on to be for Google accounts only as account management added a level of technical complexity that the client wanted to avoid.

Because Sign In is such an important step in the experience, I created an intro animation of a rocket taking off to give the moment extra weight and delight.

Home

The Home screen is anchored by a large splash image of a flying rocket. This colorful, fun visual element sets the tone for the rest of the experience. It also serves as a good place to further emphasize the space theme to the app.

The user is shown their active quests in the primary carousel and shown nearby quests in the secondary carousel. We went with a slightly unconventional design for the navigation bar – with the gradating shapes, it adds to the space travel aesthetic. This was especially important in screens that didn’t have much room for illustration or pops of color.

Quest Log

The Quest Log was one of my primary responsibilities on this project. The page contains the information about the quest, how many players there are, the clues the user needs to solve, and most of the game’s interactive elements – quite a few moving parts!

Balancing these elements required complex typographic and visual hierarchy – keeping the color palette simple while using pops of red aided in making the layout feel more cohesive. I also decided to add a rocket icon to the Submit Answer CTA, both to add to the space theming and to elevate that interaction from the others.

Adding Friends

As a social app, the Adding Friends interaction was vital to making Space Quest work. The first screen is the existing friends list, the second screen is the search screen, and the third screen shows a request that hasn’t been accepted yet.

Submitting Answer

Submitting the answer was another key moment in the experience – it had to be both informative and satisfying for the user, or they wouldn’t be as compelled to complete the game.

Submit Animation

To make the moment extra satisfying, I animated a looping rocket — this gives the answer submission flow an extra element of fun, as well as a moment of suspense for the user.

Quest Creation (1/2)

These screens allow the user to add a location for the clue answer, take a photo of the correct location, and add Tags to make the answer intelligible by the game’s backend system.