Mobile App and Web Design
RESEARCH • ANALYSIS • DESIGN
San Francisco Private Dining Venues (SFPDV) is a private dining group company that is based in San Francisco. They wanted to update their website to reflect their new brand and hopefully generate new business. User feedback was that the old site was a little confusing and tough to get vital information. The challenge was to create an intuitive new website that reflected the slick San Francisco brand.
As I conducted a competitor analysis, I found that there are not many direct private dining competitors out there... In fact, it turns out there is actually only one main direct competitor - OpenTable.com. They focus mainly on restaurant reservations and their entire private dining section is buried and hard for users to find. Their design aesthetic is very simplistic and the content and private dining information is limited.
Another competitor found was indirect and only on the east coast - a company called Sixplus.com. Their website and app. has a clean, contemporary feel, and has intuitive UI. The main pain point was - after users found their ideal venue to reserve/book, they were asked (by Sixplus) to then sign up to complete the reservation process. Annoying! After signing up, users were not given instant reservation results but were told they would get back to them via email. Not exactly real-time reservations here.
Also, Sixplus.com thought that a live concierge chat would be a nice feature so users could instantly talk with a live person about their private dining needs. After I conducted multiple user tests, I found that 100% of the users did not care to have a live chat feature at all. Users were interested in speaking directly with a person however.
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 mainly need an easy and intuitive way to search for, find and then reserve a private dining space in real-time.
WIREFRAMES •USER FLOW •SITEMAP
I created low-fidelity paper wireframes, then medium-fidelity wireframes in Sketch to map out the new app structure and page layouts. These were great for communicating the design vision and getting early feedback. The wireframes went through a couple rounds of iteration as final content was developed.
The initial wireframe designs were based on user feedback, and had a central filter system that would stay visible on the top area of the screen. After user testing, I found that the filter system took up too much screen space, and needed refinement. A pivot on the filter system shifted to a filter icon instead that used a drop-down menu to then alleviate the needed screen space.
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.
The site map helped to have 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.
MVP - MIMIMUM VIABLE PRODUCT
As the list of desired functionality grew, it became important to prioritize each item. To do this I synthesized the data from the user affinity map and feedback from the wireframe user testing to pull out the critical user tasks for the product and these together represent the minimum viable product (MVP).
HIGH FIDELITY PROTOTYPE
HIGH FIDELITY PROTOTYPE
Once more usability testing was done on all wireframes, I created high fidelity prototypes for each screen on desktop and mobile. More usability testing was done until the client was more than satisfied.
WEBSITE •MOBILE APP PROTOTYPE
Some design challenges are harder than others, but when you have a great client to work with, it makes it that much easier to achieve your objective. I had a great time working with this client and I’m glad that I could help them create a website and mobile app prototype that met their company needs.