Screen Shot 2014-08-11 at 7.35.04 PM.png

Square Order is an app that allows people to order lunches or coffee in advance from restaurants and cafes that participate in the program. The app’s usability centers around geolocation in order to show people the closest locations to satisfy hunger or get much needed caffeine.

The current design of Square Order focuses around two primary goals. It has remarkable ease of use and it delivers a streamlined and uncomplicated experience.

OPPORTUNITY

During the guerrilla usability studies that I conducted for the app, there were many interesting suggestions that were made and patterns of behavior that were uncovered. One comment provided by a participant in the study stood out from the rest as it pertained to both Square Order and one of its competitors, OrderAhead.

"I use OrderAhead a lot. The one thing I hate is that they have this list of all the restaurants around me, but I order Philz all the time and every time (I use the app) there’s 20 restaurants and Philz is 17.”

This presented the opportunity for a feature that would serve as a differentiator for Square Order that would go beyond its current purpose of finding the nearest cafe and enhance the service by developing customer loyalty while synchronizing it with incredible ease of use. I began to develop Square Order Rewards.

Persona

In order to properly understand not only the feature, but how it would better serve customers, I developed Frank as a provisional persona. Personas can be highly developed after extensive research, so I make the clear distinction that this merely a provisional persona in order to further the initial design process.

Frank is a forty-year-old accountant from Buffalo, New York. His job is very regimented and when he gets out of the office, he does not like to waste much time in line for coffee or a sandwich. He has particular tastes, so when he finds a restaurant he likes, he is a loyal customer and forms an strong attachment to the establishment. He enjoys being rewarded for his patronage, and as a result, his wallet overflows with punch cards for rewards programs at many local businesses. This is partially due to the fact that he frequently goes for short walks in the afternoon to escape the rows of cubicles in his office.

When Franks goes out for a quick “pick-me-up,” he would love to eliminate the need for superfluous punch cards, yet still accrue points towards a complimentary item as recognition for his consistent patronage. Ultimately, Frank is looking for a sense of belonging which he hopes to find with the “Cheers Effect,” that is, going to a place where everybody knows his name.

Preliminary Task Flows

The process began with initial task flows. Having used Square Order a number of times and appreciating its simplicity, I assumed that the task flow would be relatively uncomplicated, but even simple apps mask the complex structure underneath. Square Order has a surprising number of options and features in order to provide a streamlined experience. There are no complications because most pain-points have been anticipated. As a result, my early task flows were capturing different elements as I focused on distinct scenarios each time. Also, the task flow could vary depending on the establishment. For instance, one cafe made submenus for food and drinks, while another did not.

Iterative Task Mapping

Since the task flows could be varied based on location and were presenting multiple opportunities to incorporate my proposed feature, I moved to a more iterative medium for visual representation. By creating the flow with post-its on the wall, I was able to create different customer experiences extremely quickly and not develop attachments to certain solutions. This was a major step in understanding how the flow could develop.

Insight

Even simple processes can have complicated elements. While this had been evident for some time now in the process, what wasn’t clear to me was a proper understanding of how to develop the task flow with an eye to the user interface challenges that lie ahead without slipping back into old habits of over-developing initial concepts. New iterative techniques, allowed me to smash through this mental barrier and develop fresh concepts through this new stage of the process. Rather than overdeveloping ideas by way of premature prototypes or overly precise UI sketches, I printed out existing screen captures of the app and cut up notecards to create a new feature experience during critical moments within the process. This rapid hybrid of a task flow with provisional UI designs revolutionized the process at a moment when old time consuming habits were about to resurface. The process allowed for a much higher level conceptual model to develop and transition the project to the next stage.

Design Story Development & UI Sketches

At this point, I returned to my provisional persona, Frank, and revisited the design stories that helped to form him. After creating Frank in the midst of both visual and descriptive design stories, I redeveloped those same concepts in order to tighten up the narrative of what Square Order Rewards would be. The provisional persona was edited along with the critical design stories and this led to provisional UI sketches and UI flows.

Wireframes

By the time I had begun to think of wireframes, the iterative process up until this point had already allowed me to have such a grasp on the concept that these elements almost created themselves. Simply because I had prevented myself from getting to this stage prematurely, it was a simple process that yielded clear and concise results.

SUMMATION

The most fundamental change to the experience of Square Order that facilitated the incorporation of a rewards program was the option to toggle between the existing “Nearby” search feature and the proposed “Loyalty” feature based on rewards points. By creating this segmentation, existing customers would not have to change their habits. They have the option of continuing to use the product based on geolocation in order to find the quickest option. However, for those who develop favorites and want these favorites to be easily accessible, the “Loyalty” option sorts establishments that have already been frequented and keeps track of rewards points. This can most easily be expressed through task flow comparison.

Task Flow Incorporating Square Order Rewards

UI Flow

The UI sketches developed from fusing the finalized task flows with all of the early iterative work that had been completed. Everything had been considered and even visual design elements could be further developed and finalized due to extensive initial iteration. As a result, nuanced distinctions and developments were relatively easy to adjust on the fly as most implications had already been considered.

Prototype

From these well-developed UI flows, a preliminary prototype was created that could be used for early stage testing and data gathering. After conducting a small amount of guerrilla testing, a Square Order Rewards feature would be relatively easy to bring to beta without concern for the market-readiness of the product.

I do not work for or represent Square. I am currently working on UX projects at Tradecraft under Kate Rutter. Square Order is a product I enjoy and use often.

From Persona to Prototype: Square Order Rewards