10 min read
Designing a mobile first experience booking site
Craft is a new startup company based in New York City. They provide ticket sales to classes,projects, experiences and lessons offered by highly sought after crafty professionals working in New York City. Classes and experiences are proposed by Craft Artists and range anywhere from learning how to cook with at restaurants, to booking concert tickets to local emerging artists in intimate spaces. Since the marketplace for experience booking is emerging rapidly with new ventures like Airbnb Experiences, Sofar Sounds and others, Craft wants to find itself a robust place in the industry. The project started out of a desire to create personable experiences in intimate settings and to provide an alternative service to those offered by sites like Airbnb and Sofar Sounds. I was approached by two friends who wants to disrupt the experience booking marketplace.
Design a responsive website (desktop, tablet, and mobile) that covers the main functionality: search for experiences, booking, and leave review after experience. Design the brand with a modern feel and look that is simple to use. Add additional functionalities to the website, such as login, account creation and saved experiences
1.Research2.Define3.Ideate4.Prototype5.Test
I began my research by looking into the experiences industry and gathering some numbers and facts. Once I looked into the players in the field, I started directing my choices around the key players related to what Craft represents as a product offering and examined them in a competitive analysis. Provisional personas were created, formed by assumptions and some research behind traits of each archetype. These personas served as a starting point for validating our assumptions.
Interviews were completed with 5 participants, 2 female, 3 male. During the interviews we were able to empathize with our users by finding possible pain points when it came to their online ticket booking experience. To give focus and purpose to our research, we will primarily focus on the aspects of online ticket booking, uncovering users gain and pain points from using these services. We will select participants based on criteria that they have booked an experience using an online service in the last 3 months. Possible pain points include: slow delivery of emails, hidden fees, not enough payment options, being rushed to place order, no e-tickets, no online or social media presence. The following are some key takeaways from the interviews:
Users commented on the social aspect of booking experiences. They said events help connect people together. They usually go to events with their friends and usually make new friends who share the same interests. They need to have E-tickets delivered to them. They expect to get confirmation emails with their tickets.Users didn’t like finding out about service charges at the end of transactions. They also don’t like these fees to be hidden.Users commented that they enjoy a modern simple to use website with fast checkout, secure payment, and the ability to pay with sources like Venmo and Paypal.They find out about events from friends or through social media.
Using the findings I gathered from my interviews, I created an empathy map to uncover possible pain points and get a better understanding of who are user is. By organizing my research into groups I was able to uncover our target users need, uncovering our primary persona.
Upon listening and touching up on our users' thoughts, feelings, what they do, hear and see, I was able to create my primary persona to serve as the model user for our company. Sharon's goals, fears and motivations reflect the data collected from our interviews and empathy map. By giving context and personality to the research data, we can better empathize with the target user throughout the design process.
.png)
In order to get a clear sense of what we need to build I created a list of UI elements that would need to be designed in order to take our user through the process of booking an experience.
The Venn Diagram illustrates In making this Venn Diagram, I took the synthesized results and needs that were gathered from research and grouped them to user needs and business goals, as well as technical considerations. I wanted the Venn Diagram to especially reflect findings from research.
Using the simple product model, I crafted a user journey map that captures synthesized research into key stages of our user's journey while booking an experience. I focused on my persona and added quotes from the interviews, touching upon how the user is feeling on each stage.
I made a user flow to show the journey of our user navigating the craft website to book an experience. I focused on the happy path on the user and kept the task singular.
.png)
I started by doing rough sketches of concepts, ideas that would inspire an aesthetic and layout for the actual wireframes. I initially sketched out desktop wireframes for broader ideas and then moved on to mobile, since we're designing this project mobile first.
I made my wireframes based on the low-fidelity wireframes I had created. I annotated various components used in the design on the first page. I focused on product cards and design patterns being modular so that they are memorable and consistent.
Following our initial design guidelines, I worked on the UI, finding the right color and media to inspire our branding. I reorganized a few elements, although for the most part everything fit right on top of the wireframes. Added color and images based on the clean aesthetic we wanted to achieve with the site, ade
After that, I prototyped my screens to show the checkout flow from illustrated from my user flow diagram. finding an event to getting the e-ticket for the experience. The prototype highlights interactions such as the floating toolbar, sticky search, sticky footer CTA, date and time selection.
Usability tests were performed with 5 participants, 3 male 2 female. To each participant an objective was given to see if the user can accomplish the tasks successfully. In testing I observed participants navigate through the clickable prototype to determine the overall usability and learnability of the design. The task was to find and book an experience using the mobile website.
100% of the participants completed their objective successfully. The error free rate was 100% as users reported that it was clear and easy going through each step of booking an experience. Users further commented that they liked the simple and modern design of the site and they would use this site for future booking purchases if the site was publicly available.
The next steps of this project would involve adding more features and making the user experience stronger by adding features gathered from additional user research. A separate persona would be necessary to build the side of users who would like to create their own experiences on the site. This would be an ideal challenge to continue building the experience for all users.
