SFPDV
Responsive web site, custom inquiry system, and a mobile app exploration concept
(About a 10 min. read)
Project Overview
OVERVIEW
I designed a new responsive website, a mobile app exploration, and user inquiry system that helps people book private dining rooms with ease, and will help to increase venue revenue.
ROLE
UX Designer.
USER PROBLEM
People have a difficult time finding a private dining space to suit their event needs. The few similar products on the market are not intuitive and make it difficult for users to find and reserve private dining rooms easily
BUSINESS GOAL
Increase revenue, increase private dining reservations, and increase brand awareness. Need method for users to inquire about private dining rooms to all venues at once.
SOLUTION
Create an intuitive, responsive website. Design and develop a user inquiry system that enables contacting all members at once. Explore possible app solution.
PROCESS
· Research user behaviors
· Direct and indirect competitive analysis
· Design exploration and iterative design
· Stakeholder approval
· Measure success
TOOLS
Sketch, InVision Studio, Adobe Suite, Squarespace
IMPACT
· Increased private room reservations
· Increased revenue
· Increased unique visits
· Increased search engines ranking
· Customer satisfaction
PROJECT TIME
8 weeks
Problem
SFPDV’s website was outdated and inefficient. Their main business goal was to increase private dining reservations and venue revenue. Users needed to be able to quickly find and reserve private dining spaces.
SFPDV (a private dining company based in San Francisco) needed to have their website redesigned into a responsive, intuitive mobile-first design. The challenge was to create an intuitive user-centered website, and to also explore what it would take to create a mobile app - all within their budget.
Solution
Based and supported by the understanding of user needs from research conducted, it was determined that the critical user tasks would consist of three points of focus: a user form to contact all venues at once, a way to view private rooms by capacity, and a view all venues by map/location page.
One of the challenges was finding an option for users to contact all of the venues at once. Standard forms would only send out to small groups. SFPDV has 40 + members. I was able to work with a developer to create a custom form for user inquiries that could contact all members at once.
I designed and implemented a new responsive website that was viewable on all devices. I was also able to add new key words, page title, and page descriptions throughout site to help increase their search engine ranking.
I also designed an exploratory mobile app concept with an interactive prototype - all within their budget.
The Website
Research - User Interviews
I was able to conduct multiple user interviews on several key user groups: private event managers, event planners, and business owners. Creating an affinity map from those interviews brought out clear user goals - users need a quick and intuitive way to search for, find and reserve a private dining space in real-time.
Wireframes
Iterations of the initial home page were created based on distilled down research.
Custom Inquiry System
SFPDV has over 40+ members. The main goal for users is to quickly find and book a private dining space that suits their specific needs. With that goal as a priority in mind, I wanted to give users another option to find a space without having to browse through each venue. Because I needed a way to send out user inquires to all 40 + members at once, I had to come up with a special method to achieve this. A normal form just wouldn’t be able to get the job done.
I designed a special private dining user inquiry form, and working with a developer, created a content management system that could be easily updated when needed. Users could now send out a private dining inquiry request to every member in the group. Members would see each user email and have the ability to respond quickly.
Clicking either CTA button will open a layover modal of the inquiry form.
“Up To…” Page Iterations
Research findings were that users searched for private dining spaces mostly by size. I created iterations of page design bases on groups up to common group sizes. “Up to 20”, “Up to 30”, “Up to 40”, “Up to 50”, “Up to 75+”, and finally “Buyouts” (renting out entire venue). The final wireframe layout chosen was of choices of venue logos. Users gravitated towards this layout for it’s intuitive nature and simplicity.
View By Location
As mentioned above, research found that users searched for private dining venues based on where they were located. Using a custom created Google Map, I was able to implement using a simple iFrame code. The Google map shows each venue’s location by pin drop, and more information after clicking.
Visual Design
After a final round of user tests were completed and minor edits were made, I designed the final screens which were clean, simple and intuitive.
Mobile App Concept
The website ended up being under budget, SFPDV wanted to explore the idea of creating a mobile app.
Research - Competitive Analysis
As I conducted a competitive analysis, I discovered that there are not many direct private dining competitors. In fact, it turns out there is only two main direct competitors: OpenTable and a new competitor called Sixplus.
Just finding Opentable’s private dining section within their website proved difficult, and once within the private dining section, the UI is not very intuitive. Sixplus is mainly on the east coast of the U.S., requires users to create an account prior to being able to make any reservations, and member fees can be high.
User Flow
I created a user flow to reach the user happy path - booking a private dining space. I included include multiple access points, a clear start and finish and illustrated steps in sequential order.
Sitemap
The site map helped to get a clear picture of the product’s current content and structure. I conducted a full content inventory to asses what changes would be necessary to improve the information architecture and enhance the product’s functionality.
Wireframes
Initial lo-fi wireframes and user testing was important for early flushing out some user pain points. I discovered that the UI design needed refinement. A redesign of the filter system allowed for needed screen space. The wireframes went through these iterations as the final content was developed.
Final Screens
MVP: Synthesized data from the affinity map and final user test results pulled out the critical user tasks for the product.
Visual Design
Impact: Website
· Increased private dining reservations
· Increased revenue
· Increased site visits
· Increased search engines ranking
Impact: Mobile App
· Increased vision for future investment
· Detailed understanding of app capabilities
· Increased understanding of competitive market
“We have seen a huge increase of customer inquiries after the new website was launched! Our members have reported an increase of reservations which means an increase in revenue. Thank you Jon!”