As mobile devices increasingly become integrated into everyday life, they are expected to support a wide range of human needs and activities. As interaction designers, we need to explore the interplay of mobility, social context, physical context, and information delivery when designing mobile information systems.
Type Mobile App Design
Date Fall 2015, 5 weeks
Course Interaction Design Fundamentals
Tools Sketch, inVision
Skills Scenarios, Storyboarding, Visioning, Workflow Optimization
Roles Researcher, Designer
Team Brian Nelson, Tiffany Wang, Iris Wu
Brooks Mobile App.png

Project Background

The Problem

Conventions, expositions, and trade shows have become a huge part of business. Brooks attend more than 35 trade shows each year, and it has been increasingly challenging to coordinate team activities and arrange schedules among trade show staff.

User Needs

Monica manages the Brooks booths and travels with an ever-changing team of sales reps who run the booth during different events. Monica would like to be respected as an accomplished team leader and improve team performance at trade shows.

Elliot works part-time for Brooks as a sales rep. He tries to coordinate his work with the races he is training for. Elliot wants to work more effectively in order to save time for training.

Elliot Williams

Elliot Williams

Monica Hawke

Monica Hawke

Solution - Brooks Smartbooth

Smartbooth is a mobile app designed for sportswear company Brooks for booth management at trade shows and conventions. It helps the team monitor current guests on the show floor and allocate resources effectively.

Part 1: Real-Time Visualization

The system is comprised of two main parts.

  1. A pressure sensitive mat that detects numbers of guests in the booth, where they stand, and how long they stay.
  2. An intuitive mobile app that allows employees to visualize booth activity in real-time. 

Part 2: Call for Help

Active booth staff can call for help from nearby team members, in the event of an unexpected influx of guests. All employees within a 1000 ft radius will receive a notification. In one tap, team members can offer their assistance, or note that they’re unavailable. 

Part 3: Aggregated Metrics

The mobile app displays the data gathered by the mats, providing team leaders and members with insight on customer engagement. This information is also tied to employee profile. Employees who engage customers longer can share best practices with the whole team.

Why Smartbooth?

Although Brooks attend many trade shows each year, data on customer engagements and booth performance is generally untracked and unavailable. We can derive critical business insights from this data. We can learn which strategies keep customers most engaged, how to optimize booth staffing, and which trade shows are most productive.

Our team has explored many ideas such as a Running App, a City Exploring App, a Training App, a Trade Show Competition App, and a Shift Management App. The Smartbooth App idea stood out most due its relevance to Brooks needs, the leverage of new technology, and the business value it generates.

Final Design - Live interaction in InVision

Final Design - Sample Screens

The Process

Summary of Design Process

  1. Synthesize the background information and explore the ecosystem of the problem scope.
  2. Create exploratory scenarios that describe different situations in which the personas experience value from using the app.
  3. Through consolidation of scenarios, articulate the goals of the app.
  4. Write refined scenarios that take the personas through an end to end experience.
  5. Draw storyboards showing context, problem, solution, and resolution.
  6. Draw low-fidelity wireframes documenting selected screens.
  7. Create a high-fidelity, clickable design using InVision.
  8. Give a professional presentation that pitches the idea of creating this new mobile service. 

Scenarios & Storyboarding

Before finalizing on the Smartbooth idea, we brainstormed various possibilities for Brooks' mobile app at trade shows. The following are some storyboards we have explored.

Ideation & Wireframing

Based on scenarios and wireframes, our team started to experiment with further design ideas with sketching and wireframing.


Digital Wireframes - Running App Ideation

Digital Wireframes - City Exploring App Ideation


Project Reflection

I have found the most challenging aspect of this project to be the ideation process. Since we were provided with a relatively open problem in the design brief, we had the liberty to explore and expand the project scope while designing the service.

However, while we came up with multiple ideas quickly, subsequent prototyping and testing had proven these ideas to be less relevant to Brooks from a business perspective. There was a time the team felt a little discouraged as the project deadline approached.

Nevertheless, we did not settle for a mediocre concept and kept the ideation process going. In the end, we were able to produce a service that leveraged mobility and the physical context of the user, and provided business value for Brooks.