I was the sole designer for this MVP and responsible for designing for both web and iOS platforms. Though I joined the project a bit later, I designed the remaining flows, final UI designs, and created new icons+components. I collected user feedback through usability testing and iterated upon designs until developer hand-off.
About The Company
InVintory is a startup with 50,000+ users that focuses on helping passionate wine-collectors easily digitally manage their wines. Collectors can use the web or iOS app to keep track of their collection and co-manage it with other people.
At their stage, shipping out features fast was a priority.
About VinLocate
VinLocate is a feature made to be a part of InVintory's paid subscription called "Prestige". It helps wine collectors find a specific wine bottle by showing them where they’ve stored it in a 3D version of their cellar/fridge.
What it looks like when you're locating a bottle. It displays the coordinates and the section name.
For the sake of time and resources, this project started by using some designs from a previous version of this feature (not made by me) that was unreleased and temporarily halted.
Results
I designed the interface for both mobile and web, creating new components where needed for this feature. Since the launch in early 2022, approximately 2.3k (in Sept 2022) have subscribed to Prestige and use VinLocate.
Summary
Over the estimated time of 2 months, I led the mobile + web design of this feature while working closely with our AR/VR and web developers. I had never worked on a project that involved anything 3D so I was excited to learn about how Unity worked!
My role
As the sole designer, I was responsible for designing both the web and mobile versions. I designed the remaining flows, final UI designs, and created new icons+components. In the later stages, I tested the mobile version with some InVintory users, collected feedback and made changes that fit within the scope.
How It Works
By using Unity, VinLocate allows users to create 3D shelves, racks and bins that are parts of their fridge or cellar. This lets them place bottles in the "slots", allowing us to help them find their bottle in the future.
This idea isn’t new for the company - previously, they were making an AR version. However, due to technical limitations it wasn't shipped. VinLocate serves as a stepping stone towards the eventual development and release of an AR version in the future.
How it works
1.
Create your 3D section (bins, racks or shelf). This example shows the making of a shelf
2.
Add bottles from your collection into the “slots”
3.
When you're ready to look for a specific bottle, tap on the 'Locate' button on the bottle screen
4.
We’ll show you the name of the storage and which slot position it’s in.
✦ Take your real bottle out of your storage and enjoy! ✦
Our goals
⁕Add value to the subscription plan
Get users to subscribe to our "Prestige" tier to start and generate revenue
✦Create a usable, helpful MVP
Create a feature that quickly and easily helps users to find a specific wine bottle in their collection
What users can do
Before designing, we discussed what users should be able to do when using this MVP. For this project's scope, we decided that users should be able to:
Add + manage bottles
Users can put bottles in slots that they created. They also have managing options such as moving a bottle to another storage
Locate a bottle
Users can locate their bottle via a 'Locate' button when viewing the vintage
Create + manage a section
Sections can be moved, renamed, modified, duplicated and deleted
Working with constraints
Since we were re-using some parts of the previous AR version, there were technical and time constraints that I had to keep in mind.
✸Follow the existing design style
The already existing dark theme screens were from the previous AR version. We felt like we could keep following this style for the sake of time and not having to change it all for the developer
✽Some things can't be changed; its harder than it seems
Due to just the way Unity works, some parts of what was already in place did not change when weighing the impact and effort
Exploring similar apps
I explored other apps that worked similarly to what we were trying to achieve. Despite the majority of the apps being outdated and not meeting our desired standards, it provided valuable perspective and served as a starting point for brainstorming. I took notes on what I thought could be food for thought, such as how one example handled displaying coordinates for bins.
Some apps I explored
Wireflows
Creating rough wireflows allows me to collaborate with the developer and product manager quickly, iterate, explore and gain feedback while also working on other flows.
One of many examples of a mobile wireflow
Some thinking and exploration on how displaying sections in storages could work
Overview of wireflows for the web designs and notes
