Bottleship
As the visual designer at Bottleship, a student-led startup out of Cal Poly working in the space of restaurant management and digital menu software. I developed a high-fidelity digital wine menu prototype in Figma. The design was developed in collaboration with SLO Provisions, a small boutique counter service restaurant that has a rich local wine selection and serves wine by-the-glass.
Tech Used:
Figma - Wireframing & Prototyping
Zoom - User Interviews
Defining the Problem Domain
Our team has gone through more pivots that I can count, and that’s all thanks to continued insights gained as we talk to more people and better define our problem domain. Based on the results of our continued interviews with restaurants, retailers, wineries, and consumers, we found that there was a need to simplify wine inventory management for restaurants and a better way for information about those wines to be conveyed to customers. As a team, we decided to produce a digital wine menu for restaurants and an accompanying web portal to manage inventory. My role thus far has been to develop the design for the digital wine menu.
SLO Provisions - Design Partner
SLO Provisions is a restaurant we have talked to that has expressed interest in becoming an early adopter of our wine management and digital wine menu platform. Here’s a few pictures that convey the feeling inside their store:
Deliverable - The Prototype
User Stories
Before I began design work, our team needed to define the user-level functionality that our digital menu would need to have. We did this by writing user stories based on the results of interviews that our business team members and I conducted. Relevant to the digital wine menu were 13 specific user stories. It’s too long of a list to put here but I’d be happy to share more if you’re interested! My design would need to fulfill all 13 of the stories at a baseline.
Design Work
Simple navigation and a clean interface was a must. I aimed to provide only the information that was needed to the user and nothing more, hiding extra information behind each of the product tiles. Separating the types of wine with traditional tab navigation seemed like an intuitive choice, as tabs are widely understood due to everyday use of modern web browsers.
For my design I decided to work in Figma for two main reasons: its “components” feature and its powerful interactive prototyping functionality. Components saved me a ton of manual work in this design due to its many repeating elements. Having robust gesture-based interactive prototyping features was important due to the design work being mobile-based.
Figma document
As this project is relatively small in scope, I was able to get away with housing everything on one page. Had the project been bigger I would have separated the components from the main screens to clean up the document. The main screens are on the top and components and style definitions are on the right. The large product array at the bottom is a component composed of individual child instances of the wine card component. This large array is positioned differently within a frame on each page to enable smooth animation in the prototype.
Interactive Prototype
The filters bar is where you can sort the products by different metrics other than their category. Price, location, and vintage are the three sorting categories I chose as they represent the other most common properties wines are sorted by when in the restaurant setting. The expanded wine view lists other information not available in the normal view such as the blend, its rating, a custom description, and pairings.
