LoFi Prototype

(Milestone 4)

Planning & Schedule for LoFi Prototype

  • Week 5: Brainstorm & Ideate Features

    • Tuesday, October 6
      Discuss plans for LoFi prototype development, Idenfity feature areas, & Brainstorm features for each area

    • Wednesday, October 7
      Review and suggest new features for each area, Align on features to move forward with

    • Thursday, October 8 - Monday, October 12
      Individually ideate 3 ideas for each feature with rough sketches

  • Week 6: Align on ideas, Link Together, & Create Prototype

    • Tuesday, October 13
      Review and align on sketches to use as the basis for the prototype

    • Wednesday, October 14
      Align on how the features connect to tell a story, Discuss global prototype standards for project, and designate remaining prototype work to be done

    • Thursday, October 15
      Finish prototype sections

    • Friday, October 16
      Add content to team website

Wireframe Journey for Lindsey Cunningham

Our low fidelity prototype process closely followed the framework laid out in Chapter 13 of Rapid Contextual Design (2004) by Holtzblatt, Wendell, and Wood.

Step 1: Identify Features

To help build a prototype that satisfies the primary user needs, we brainstormed possible solutions in 5 main areas: Arrival, Audio (during visit experience), Exploration, Ticketing, and Concessions. Each team member came up with ideas for their area and then as a group we reviewed the list together. The lists evolved into large pieces of functionality, some of which were not directly related to our core users or their journey. The top features were selected by the group to move into the paper sketching phase.

Step 2: Sketch & Ideate on Features

After we came up with possible features, we sketched multiple versions of each feature to rapidly come up with ideas for an approach. This was helpful for brainstorming and allowed us to visually represent ideas for our app in a simple manner. It also gave us different ways to visualize the same journey so that we could identify any gaps, plan the information for each feature, and create a consistent journey that would align with our user's needs.

Step 3: Align on Features

As a group, we went through our sketches to review ideas. We used a dot voting method to decide which sketches and ideas we preferred in our app. Each of us chose a color dot and placed our dot to select the version of a feature we thought worked best. We explained why we liked each feature and why it would be a good choice. We also came up with suggestions for possible improvements to the features and user flow as we went along. Although we were voting on the sketches, there were still many concepts and changes discussed verbally from each that made it into the wireframes that were not in the initial sketch. This ended up being one of the biggest values of doing the voting exercise together.

Step 4: Create User Flow from Sketches

We reviewed our selected sketches and walked through how users would navigate through our app. We put together our sketches in a map to visually show how the navigation process would work as if it were a story.

Step 5: Agree on Global Prototype Styles

Following our user flow mapping, we worked as a team to create some simple, global styles and components to use in our low fidelity wireframes. We focused on standards and elements that would be present in all of our screens, such as a universal mobile screen size, layout grid, and bottom navigation bar. We programmed these styles and components into our shared library on Figma. Additionally, we utilized a low-fi prototype community library available through Figma to build out other common aspects, such as titles and body, icons, and text fields. We wanted this prototype to still be basic and skeletal in nature, so we prioritized navigation and capturing the main tasks associated with the flow rather than considering any layout or styling.

Step 6: Build Prototype

Our final step was to create the actual low fidelity prototype. Each team member focused on the features and subject areas they had iterated on for their paper prototypes. We used our global style and component library to keep the wireframe simple and consistent, and used the rough user flow we had laid out in step 4 to program the interactions. You can find a high level screenshot of the finished prototype’s flow below, as well as a direct embedded version of our prototype that you can interact with.

Resulting Prototype

LoFi Prototype Work Board

Explore the board containing all low-fi prototype work below, or access it via this link.