Tender greens
Solving online ordering for responsive web
Overview
Tender Greens is a well-loved, national fast casual restaurant. During my time at Envoy, I was tapped to redefine and improve the front end user experience of Tendergreens.com with the aim of increasing user satisfaction with the online ordering process and integrating with a 3rd party ordering tool called Olo. The site is now live today and reflects the work as outlined in this case study below.
Hats worn
-
Research
-
Concepting
-
Information Architecture
-
Wireframing
-
Prototyping
The Brief
-
Recommend a responsive ordering front end user experience that accounts for the user journeys through the front end website pages of Tendergreens.com: Menu Overview, Menu Detail, Locations Overview and Locations Detail
-
Funnel users from all journeys to place an online order via a 3rd party ordering site Olo.com
Constraints
-
Olo technical documentation did not expose some desired API's for the front end UX to leverage
-
Improving the UX of the Olo pages (ex. selecting menu items, adding to cart and payment processing) was out of scope
UX Goals
-
Drive an incremental increase in online orders by delivering more users to the Olo ordering pages.
-
Simplify the overall front end experience and reduce the steps required to get to ordering on Olo.
-
Craft a seamless front end user experience that gives users the perception that the Tendergreens site and Olo ordering platform are a single branded site.
Explorations
Insights from Research
Home Page Concept Variations
-
I pitched internally three distinct concept versions which became known as the Narrative, Editorial & Transactional.
-
These UX concepts for the home page accounted for the use cases defined and set a foundation for the UX direction.
The Work
-
Identify the primary & supporting use cases of the Location, Menu and Ordering pages for designs consideration.
-
Architect a flow diagram to visualize the multiple user journeys to complete online orders via Olo.
-
Establish a clear UX foundation for online ordering as we move into wireframes and prototyping.
Defining Primary & Secondary Use Cases
Information Architecture
Prototype
Explore the prototype that led to the final site. Open the desktop prototype full screen here.
Takeaways
The strategic UX decision to focus first on defining clear use cases, gathering research insights and defining an information architecture that was agnostic to the front end design laid a strong foundation for the site that is currently live at Tendergreens.com. The Olo ordering system analytics reported growth in traffic to place orders thanks to the new sites front end User Experience. Shout out to everyone at Envoy on both the creative & development team that made this site happen.
Allow me to introduce myself.
I’m a UX professional with 10 years of experience. I utilize user-centered design to craft digital products. My past work covers every type of digital product type: from apps for iOS & Android, to responsive websites, to smart home devices and in flight entertainment systems for airlines.
My favorite tools of the trade:
-
Figma, Sketch, Adobe XD, InDesign, Invision
-
Jira, Confluence, Trello, Slack, Zeplin
-
Google Analytics, Google Suite, Miro, LookBack, Dovetail, UserInterviews.com, UserTesting.com
