The Challenge

The majority of people rely on location-based apps to help them make dining decisions, but only a few restaurants use these same technologies to their advantage.

SPOTER is a targeted marketing application geared to help small-scale restaurateurs promote their business. For this project, we were tasked to design a restaurant facing app that offers valuable consumer data to restaurant owners through the consumer-facing app. The challenge was to convert users of the consumer-facing app into loyal restaurant customers, while still gleaning important insights about they’re dining behavior, upon which restaurants could capitalize.

The Approach

With an aggressive 2-week deadline, we split our project into a series of sprints and collaborated throughout the process. Between sprints, we inform our client of our progress through presentations. Those meetings was also a chance for us to realign with his goal in relation to our findings.

During our first meeting with the client, our team got introduced to SPOTER’s initial prototype, which informed our primary assumptions. Examining the design, I find a heavy use of data charts throughout the interface. It is clear that the core deliverable of the application is data analytics.

  • Image
  • Image
  • Image
  • Image
  • Image
  • Image
  • Image
  • Image
The client's initial wireframe/prototype in tablet form-factor.


Small-scale restaurants own over half of the market share in the dining industry and the majority of them struggle to increase their customer base because of poor marketing. Despite the robust data analysis tools on the market, they are overly complex and time-consuming to the busy restaurateur.

The Discovery

Our research was heavily focused on restaurant operations in the realms of marketing and customer service. We learned that the data-driven systems currently available are sophisticated, yet often confusing. Despite the value of good data, many restaurants don't take full advantage of the information simply because it is complicated.

We found it essential to explore our competitive landscape after uncovering a number of companies that provides services similar to our presumptive services in data analytics and customer conversion. We studied several data-marketing services already well-established in the industry, that are successful with mid to large restaurants. Targeting small-scale restaurants as a market-entry point was a realistic opportunity for SPOTER.

Spoter Competitive Landscape Review
Spoter's competitive landscape review sheet as of May 2016.

Developing empathy

SPOTER’s consumer-facing app will first launch in Chicago, so we conducted a series of ethnographic interviews within the city in order to have a broader understanding on what involves a good restaurant experience. We recruited and interviewed avid restaurant goers and front-of-house workers were employed within the past 3 years.

Talking to different people with varying roles in the dining industry enlightened our understanding of the entire restaurant ecosystem. Our initial assumptions regarding the complexity of data analysis tools were confirmed through our interviews. When it comes to giving better quality service, both the restaurant and customer perceived face-to-face interactions to be the most valuable way of boosting customer loyalty and guest satisfaction.

Spoter concept testing and user interview
My team conducting user interview and concept testing with one of Chicago's restaurateur.

We moved on to create a paper prototype based on the client's initial wireframe. Testing the prototype to five restaurant operators also revealed to us that most restaurateurs are intimidated by charts and graphs in data analytics. Walkaway, a SPOTER feature that uses iBeacon technology to track customer interest levels in a restaurant, was the most interesting to restauranteurs. They find it useful to track and reach-out to customers who choose to take their business elsewhere.

Representing the user

Considering that we were designing for restaurant owners, we established three distinct personas based on the patterns of motivation, attitudes, goals and frustrations. This allowed us to present different archetypes to our client in order to discuss who our primary and secondary users should be.

Spoter Competitive Landscape Review
Synthesizing research data through affinity mapping.

Based on their latent needs, we decided that the small-scale restaurant operators shall be our primary persona. We used personas to guide our design decisions, establish priorities and to keep our team and the client reminded of our end user.

"When you design for your primary persona, you end up delighting your primary persona and satisfying your secondary persona(s). If you design for everyone, you delight no one. That is the recipe for a mediocre product. - Eeva Ilama"

The Vision

While we were aware of the amount of competition, we determined that SPOTER’s opportunity came from offering unique, specific, and less-comprehensive data. This information would contribute value in growing small-scale restaurants' customer bases by providing a targeted approach to marketing.

Reframing the challenge as a question.

Inspired by the methods taught in Creative Confidence by the Kelly brothers, I reframed our design challenge into a “how might we” question. The insights and themes we have defined will be our guiding light towards ideation. By reframing the problems and challenges into a question, the design possibilities will increase and innovative solutions will spur.

How might we use SPOTER’s specific data to improve business without adding technological noise to restaurants?

The Requirements

Being able to observe our interview participants in their work environment gave us valuable insights on the way they operate. It was critical that the design should be straightforward and unobtrusive.

With this in mind, we developed a set of design principles that will guide us through our design solution. These were used to communicate and align the team and client towards the overall design direction during the ideation process.


Delivery of actionable and intelligent data that puts the user a step ahead of the competition.


An engaging interaction that fosters pleasant communication between restaurants and customers.


Great results through minimum effort. Ease of operation with the busy restaurateur in mind.


Allows user to set their own preferences whichever fits their needs.


Our team initially worked on ideation independently in order to yield more quality results. By doing so, we gave ourselves the freedom to explore on ideas however we chose to interpret it.

Sketching and paper prototyping

I always start my process by sketching in pencil and paper. This allows me to be creative without the limitation and requirements of digital products. I start with rough sketches with as many concepts as I can fit on my sketchpad.

My workspace during ideation
My workspace littered with my prefered ideation tools. Pencil and paper are irreplaceable.

The Concept

I opted for a smaller form factor when it came to choosing the device for my design.The portability allows operating the app anywhere without the user being confined to the backroom. I explored concepts with an open-mind while taking into account the data available from SPOTER. My solution took advantage of selected data initially delivered in graphs and charts. I utilized the “card user interface” to contain data and a relative call-to-action where it is needed.

I created a paper prototype based on my sketches, which I then placed into Invision and made interactive for testing purposes.

A walkthrough of my design concept on a paper prototype.

Concept Usability Testing

The following day our team prepared a test plan and once more reached out to the same restaurant operators to conduct our usability testing. We all took turns testing each others' prototypes on each testing recruits. This was important in that it removed tester bias.

Testing Insights

Learning about the dependency of the restaurant facing app concepts with the SPOTER consumer app, the consensus will be that the consumer-facing app needs to be successful prior to launching restaurant-facing side. The pocket-size portability of the mobile phone is the choice form-factor due to the busy nature of the restaurateurs daily activity. The diversity of test participants also allowed us to validate our focus on the small-scale restaurants. The need for hyper-targeted promotions in off-peak times are proven important to sustaining their business. The direct-line on the contrary receives mixed reactions as it was feared it can be abused by customers to get incentives.

Through this feedback, we were able to pinpoint a single concept to refine moving forward.

Synthesizing concept wireframe
Synthesizing concept wireframe based on usability testing feedbacks.


We presented our findings with our client, and agreed on the following key features to include when iterating our final design wireframes:

  • Promo send-out feature that relies on real-time tracking via map.
  • Statistics measuring SPOTER use and promo effectiveness.
  • Reviews section that allows direct communication with SPOTER users.
  • Account management and profile updating section.

We recognized the advantages of having access to SPOTER users. Using the map, the app could target customers with promotions that are customizable to fit the restaurants needs at any given time of the day. The statistics will provide a simplified version of analytics that will show only relevant data without overwhelming visualizations. Restaurants are given more chance to be more personal with the customers through the in-app messaging while also allowing them to gauge and flag inappropriate messages. The application is customizable giving control to the user to update the SPOTER Restaurant profile.

SPOTER User Flow

I created this application map deliverable using sketch and illustrator. I outlined the flow which best represent user actions within the application in the best possible user experience.

SPOTER's application journey map showing user flows. Click or tap on the image to view a larger file version on a new window.

Select Annotated Wireframes

For our client (stakeholder/s) and future developers understanding, we annotated our wireframes to relay the interactions and features we intended for the design.

SPOTER Prototype

Our final, but not the last prototype as uploaded to InVision. The online platform makes it easy to test prototypes. The drag-and-drop, easy linking, remote testing and multiple available gestures speed up our process in getting those valuable insights faster.

Tap or click on prototype to show active links highlighted in blue.


We are aware that our prototype needed more testing and iteration and it is nowhere near perfect. Through agile collaboration and sincere empathy, our team delivered a product that adhered to its design principles while catering to the essential needs of its users. I was able to draw out valuable insights by patiently listening and probing with persistent curiosity that helped during ideation. As I am recounting my time during the process, I also realized that all ideas, good or bad, can contribute to a greater creative solution.