Case Study: Designing an impactful experience
Scaling to a new platform – designing an online restaurant reservation booking experience.
The problem.
Reserve was a restaurant technology startup with a connected ecosystem of B2B and B2C technology products that facilitated a two-way communication network – allowing for real-time demand for a reservations to be disseminated from consumers directly to restaurants.
Native apps & network effects.
Early iterations of the product focused on targeting consumers via native apps (iOS & Android). As the user base grew, the brand matured, and the restaurant partner network evolved, the need for a consumer-facing website became a commonplace customer request.
Restaurant partners (b2b) – To convince new restaurant partners to join the Reserve network, Reserve needed to offer them exposure to a broad network beyond initiated app users.
Diners (b2c) – As the user base grew, Reserve diners wanted to be able to find, book and manage their restaurant reservations outside of the app, in a web browser.
The ask.
The ask for this project was to define what a consumer-facing web platform might look like in terms of a product offering, including what level of functionality it would over Reserve users compared to out mobile apps, how it could fit into the existing product ecosystem, and the level-of-effort from internal teams to design, develop, populate, and launch the platform.
Timeline – 6 weeks.
Deliverable – Responsive, production-ready, MVP release.
Scope – Requirements definition, experience design & development (front/backend).
Engagement model – Initial requirements definition, followed by agile design & engineering collaboration.
Delivery & outcome.
The final output of this project was a fully responsive, web-based reservation booking platform that enabled diners to search restaurants, browse reservation availability, and book or request reservations. Additionally, it served double duty as a marketing channel for Reserve – providing information about the company, its people, and its product offerings.
For Reserve, the outcome was two-fold:
Delivery speed & quality – Structured collaboration enabled us to deliver a high-quality MVP experience that was released quickly and provided meaningful value to Reserve and its customers.
A scalable SEO foundation – The MVP information architecture provided a foundation from which Reserve and its restaurant partners could widen their exposure to a larger audience via organic search and/or paid web traffic.
My role & contribution.
As the design lead on this project, I was responsible for leading, coordinating, and/or facilitating all aspects of design definition, design execution, and product management for this feature.
Design definition.
Collaborated with business and technology stakeholders to define goals, feature requirements & KPI's, coordinated customer discovery, and organized collaborative ideation activities.
Design execution.
Defined of system architecture, key flows interactions, iterative wireframe design UI & visual design, and the creation of specifications & documentation.
Program management.
Defined timeline, milestones & requirements, mapped user stories, set and maintained sprint cadence, facilitated discussions & decision making, and coordinated with engineering partners throughout development & QA.
Key components of the deliverable.
The MVP information architecture, experience definition and visual design of five templates, across desktop, tablet and mobile breakpoints made up the key components of the MVP deliverable.
Browse our featured restaurants.
The homepage provided a portal in to the restaurant discovery process – showcasing featured, location-specific restaurant options and an entry point to search a wider selection of options within a city.
Search for restaurants in your city.
City pages provided a was for users to find restaurants in a specific city – with the option to search or filter using a variety of criteria.
Filter & search.
Filter & search functionality allowed users to find restaurants matching their specific criteria or select a combination of options to hone in on options that fit a criteria of what they were looking for.
Get the details on a specific restaurant.
Detail pages provided a plethora of information about a restaurant and provided users with the ability to search for reservation availability using their desired party size, date, and time.
Manage your bookings & account.
Account page provided Reserve users with the ability to manage their upcoming reservations, edit their user profile & payment details, and view an archive of their past bookings.
Learn more about Reserve.
Marketing pages provided users with information about Reserve’s culture, history, team, investors, restaurant partners, and career opportunities.
How we got there – 5 moments that mattered..
Getting to the final product was an iterative process that took place over a multi-sprint workflow.
Iterative conversations with engineering and our partners across marketing & operations resulted in a solution that balanced user needs with business goals, while working within existing tech and operational constraints – Here are a few moments that mattered along the way.
Moment 01: Analysis
Understanding how & where a web platform might fit in.
What could the site be? How could it fit in to the existing product ecosystem?
To help facilitate a discussion around these questions, I used a mind map to catalog the functionality and connectivity of the existing products within the Reserve ecosystem, alongside a possible feature set for the new site. This helped me, and eventually key stakeholders, envision how existing functionality could transfer wholesale, or complement website-specific features.
Moment 02: Definition
Defining the experience ecosystem & the variables within it.
Designing for user goals using hero task flows.
As a first step in definition process, I used hero-flows to map the hypothetical goals of site visitors as they attempted to fulfill their needs using the Reserve website – the journey of our primary persona (at launch), is shown below. These journeys laid the groundwork for mapping the functionality and larger structure of the site.
Using our hero flows to inform information architecture.
Using the hero flows as a foundation, I iteratively explored the high-level information architecture of the new site. The architecture was tweaked and refined throughout the design process.
Identifying template efficiencies & incorporating SEO considerations.
While defining the sitemap, how pages could be templatized to optimize design and development resources was continuously being considered. Additionally, early discussions with an SEO consultant helped ensure that the site structure aligned with existing best practices for search optimization.
Moment 03: Exploration
Iterative ideation & validation to hone in on a direction.
Sketches and mid-fidelity wireframes were utilized to explore, define and discuss the information architecture and experience design of the content experiences that made up the website.
Moment 04: Interaction design
Defining element states, screen states, flows & interaction patterns.
TK
Element & component states.
Responsive behavior – Grid & components.
Screen flows & states.
Moment 05: Styling
Defining & applying visual design styles to the interface.
After defining defining the architecture, content and interaction patterns within the system, we explored the visual design patterns that would bring the interface to life.
What I learned.
Structured collaboration enabled our ability to effectively communicate, resulting in the creation of an MVP experience that was released on time and meaningfully valuable to end users – here are a few things I learned along the way.
Garner support by defining success criteria early.
Articulating what success would look like for an initiative and defining a set of MVP release requirements early in the process helps focus stakeholders on the bigger picture and, in turn, garner support for an initiative.
Utilize provocations to highlight unknowns and focus stakeholders.
To ensure progress when faced with the swirl of debate, strategically insert questions and provocations that focus stakeholders on important questions and fuzzy areas of a problem that need to be addressed.
Define your MVP requirements early, then continuously socialize them.
Avoid scope and release creep by defining, articulating, and socializing a set of MVP release requirements early in the process, then continuously socializing these requirements with stakeholders throughout the design and development process.
Align with technology stakeholders early and often.
An open dialogue with technology stakeholders early and often not only fosters inclusion, it also ensures that the functionality being envisioned can be built, what blockers exist, what front and back-end resources will be needed, and how releases can be sequenced to get a product out as quickly as possible.
Want to know more?
Have questions? Want to learn more about my experience scaling the Reserve reservation booking experience to a new platform? Contact me.