VERTOE UX DESIGN
How can the experience of booking storage be ideal?
UIUX
Figma, Eye-tracker, Python
Vertoe UX Design is a group project that explores what the user experience for an application that provides storage could look like. The designs are for a startup called Vertoe that specializes in short-term storage through liaison between travelers and locals with available space.
This project emphasized the process of designing more than the designs itself to get a better understanding of iterative design-thinking and user testing. We went from sketching low-fidelity prototypes to conducting eye-tracking tests on users on a high-fidelity prototype.
Note- this project was not sponsored by the company and was solely conducted on my group’s end.
Introduction
I worked with a team to design the interface for Vertoe’s mobile app through an iterative process that progresses from low-fidelity sketches to a high-fidelity interactive prototype. The purpose of this is to emphasize a process that lets us develop an idea from the ground-up to a finalized product while considering different versions. Vertoe is an emerging startup that offers on-demand short-term storage for personal belongings in cities by utilizing extra space in local establishments. Vertoe is addressing the problem of what you do with your things when you don’t want to lug them around but also don’t have a place to safely keep them. We opted to design a mobile application rather than a desktop site because the nature of the company promotes the ability to instantly find storage when on the go rather than the need to plan ahead and use a computer.
​
Sketches
​
To begin the process we made some low-fidelity sketches to capture our initial thoughts and approaches to creating an app for Vertoe’s on-demand short-term storage platform. They all focus on different aspects conceptually. For example, while one puts a lot of emphasis on the users through profile features and another tries to pay more attention to navigational menus and transitions.
As my team split responsibility, we all took upon ourselves a sketch mock-up and split certain sections of the high-fidelity mockup after sharing a general stylesheet with each other to keep things like the colors and typeface consistent. As we got further, it became my responsibility to write the script that converted our data to heat-maps while other members of the team contributed by creating the user testing hypothesis and more.
Prototyping
​
Our next iteration involved synthesizing our original sketches into an interactive high-fidelity prototype that we created using Figma.
In creating this hi-fi prototype, we took components from each of our original sketches. We adapted the location's description page from a sketch, as allowing users to see pictures and read reviews for locations promotes a sense of security and trustworthiness. The final reservation flow we used was from another sketch, as we felt that being able to add a description and images of belongings was an important security feature. Our third sketch gave us our side menu design which makes navigation accessible throughout the app. We chose to use a map to display locations as opposed to a list or grid view because users are most likely to be using the app on the go, and it is visually easier to evaluate the convenience of distance and location on a map view. This hi-fi prototype does not include every possible screen in the app, but enough to navigate through its main functionality. Here are some sample screens:
User Testing
​
Once the prototype had been made, it was important to conduct user tests. My group decided to recruit a participant who would use our app while an eye-tracker would register their movements. We then converted the data received to heat-maps that were overlaid on our screen. This allowed us to gain a precise understanding of where our viewers spent most time looking at. We had a specific task for our user which was "You want to make a reservation at Mike’s Cornerstore. You have one small red backpack. You need to drop off this item at 1:00 pm on March 19 and pick it up at 10:00 am on March 20." As we created our hypothesis, we split this task into smaller sub-tasks which each corresponded to a hypothesis on ian individual screen. For example, we hypothesized that the user would spend some time looking at the three pins on the map screen whereas they would spend very little time looking through reviews since they had the certainty of wanting to make a reservation. Some of the screenshots below represent the data collected from the eye tracker.
From the results, we could see that our hypothesis holds mostly true. The user did indeed spend most of their time on the map page looking at the pins. Their actions were consistent with our hypothesis up until adding an item. The user was confused that they had to add an item before entering dates and times (as was just the nature of our prototype) and as such tried to cancel and go back to add an item multiple times. Once the confusion was resolved, the user continued to perform as anticipated in our hypothesis.
Reflection
​
From the eye-tracking process, we discovered a crucial piece of information about the clarity of our application. The tester became really confused upon not knowing where to click on the reserve screen due to their inability to click on the text that goes with a radio button. This informed us that it is more intuitive for users to click on the text that corresponds to a button than the actual button itself. In addition, perhaps a help button could be added to give the user information should they become confused.
On a different level, I personally felt like a I grew a lot through this project in terms of skill-development and my understanding of the design process for a user experience. Through the strong emphasis on user testing and data analysis, I was able to critically consider short-comings in our design and was able to brainstorm solutions. Working in a team was also extremely helpful and crucial as we all had ideas to share and evaluate between each other and were ultimately able to design better through that.