UI/UX Designer and researcher, designing a mobile app for Hitched Hideaways, from conception to final prototype
Discovery and requirements gathering
User research: Conducting interviews and usability studies
Competitor analysis
Wire-framing: Paper and Digital
Low-fidelity wireframes and prototypes
High-fidelity layouts and prototypes
User Interface Design
Accounting for accessibility
Usability testing and validation/project info
The pandemic and subsequent shutdown of 2020 changed our lives. We were forced to hit the pause button on life as we knew it. Not only did this include the normal everyday errand running, but basic travel itself came to a halt. Plans were disrupted, and we had to put a pin in to most of our upcoming goals. For many, this included large events such as weddings.
People were scared and frustrated as their lives took on new habits and behaviors. One particular group that was left foundering was the travel and tourism market. The shutdown occurred in March, which for many of us is the signal of spring, A new year, and a new season. The season to make plans for many events for the rest of the year, including weddings.
I listened to several friends lament the pause in their wedding plans, and it made me think. What if there were a beautifully designed and simple app that allowed us to virtually just be where we wanted to go? What if we could look up a particular place and feel like we'd been transported to the location of our dreams?
Hitched Hideaways is an app that helps users find their perfect wedding or event location online. It also incorporates 360 degree virtual views of their potential locations. This allows them a more complete view of their purchase, so that they might book their dream venue with confidence
In order to utilize a solution-based approach to my problem, I looked to the Design Thinking methodology. This approach, formulated by the Hasso Plattner Institute of Design at Stanford (d.school), helps in addressing complex problems with unknown variables, by intrinsically understanding the human based needs.
The five stages of the Design Thinking Methodology are Empathize, Define, Ideate, Prototype, and Test.
By systematically applying each of these stages of Design Thinking, I was able to re-frame my problem in a humanistic based space.
For this project, I took a look around, and saw the need for a product such as Hitched Hideaways. Many people were being forced to remain home and travel--for a limited time--became obsolete. I found during my research that even just looking up travel destinations offered a sense of normalcy. Not only did it offer people a glimpse into what regular life might look like again, but it also offered the inherent sense of organization that comes with planning a trip or event.
Delving a little deeper into psychological aspect of being shut down, I realized that much of our stress and fear could be put at bay with the perception of organization and following established patterns of what we already know and understand. Everyone feels a little better knowing everything is in its rightful place, and designing an app is no different.
A significant portion of UX involves the designer also being a good psychologist. We need to understand human nature and be able to speculate what drives the user. This is where cognitive psychology comes into play. Cognitive psychology is the scientific study of mental processes, including perception, problem solving and creativity. The Schema Theory a classic cognitive process that can be used to overcome the psychological barriers of usability, organization and categorization.
Hitched Hideaways addresses the Schema Theory, in that the organization of information has taken top-billing, as users have come to expect in a well designed app or website. Each section breaks down information into easy to understand pieces of schemata. In this case I am organizing the app according to conventional structures that the users may already be familiar with, i.e., lists and color highlighting for differentiation.
As I began this project in March of 2021, it had been one year practically to the day, of the start of the pandemic and our subsequent shutdown.
As things went topsy-turvy in our lives, it became apparent that people needed a way to quell their fears and take their minds off of what was happening around them.
As someone who likes to travel, I listened to my friends who were at a standstill of planning large trips, family events, and weddings.
I thought how interesting it would be if we could somehow visually immerse ourselves in another location without leaving our homes, and the idea for Hitched Hideaways was born.
From the user interviews during the empathize stage of my project, I was able to build user personas, discover pain points, and develop problem and hypothesis statements based on my target users: recently bethrotheed couples who found themselves stuck in the process of planning their wedding.
After synthesizing this data I moved onto devising problem and hypothesis statements. I delved into secondary research with a competitive audit, and used this information for the brainstorming activities of “Crazy Eights”.
I topped my research with a usability study after my lo-fi prototype phase, to get a true sense of what the user’s pain points were with the site.
In the empathize stage, I conducted initial individual user interviews to understand what my users really wanted, and why. I chose a series of 6 questions, both qualitative and quantitative in nature.
-How do you go about booking a venue?
-How often do you book online?
-Is booking online typically and easy task to accomplish? If not, why?
-How much time do you spend traveling to a location before booking a venue?
-How do you feel about booking a large venue online?
-If you had a virtual option to access the venue, would that help you make more informed decisions?
In the define stage, I conducted thorough user research, including developing personas, user stories, an empathy map, and a user journey map.
Synthesizing the data from the interviews, I was able to form three distinct behavioral user personas and their pain points. I then combined the two secondary personas of Christiana and Javier into a single integrated primary persona, who we will call "Andrea." This subsequently allowed me to write definitive problem and hypothesis statements, and formulate a user journey.
This user journey and empathy maps helped me understand the problems "Andrea" faced on their path. It also helped reduce the impact of my own designer biases, by understanding how Andrea thinks and feels though every step.
This new comprehension allowed me to recognize roadblocks and pain points to correct, by identifying improvement opportunities. For example the idea of adding a second person log-in into the same account, so that partners may share the experience.
As a busy nursing student with a restaurant management job, I want to be able to research wedding venues through an app, so that I can get a real feel of the venue before I commit to travel.
Andrea is a busy bride to be who needs a detailed wedding venue app, because they don't have a lot of time to travel to different locations.
If Andrea downloads the Hitched Hideaways app, they would have an easily organized experience of finding their perfect venue from the comfort of their home.
Christiana is a graduate student who needs a way to find accessible and inclusive options for her destination wedding.
If Christiana downloads the Hitched Hideaways app, they would have an easily organized experience of finding their perfect venue from the comfort of their home.
Javier is a busy working professional who needs an efficient but comprehensive way to search for their perfect wedding location.
If Javier downloads the Hitched Hideaways app, they would have an easily organized experience of finding their perfect venue from the comfort of their home.
Name: Andrea George
Situation: Andrea is a 36-year-old female who recently became engaged. She has a demanding job as a bar manager while she is in nursing school full time. She also has 1 puppy and an older special needs dog that demands a lot of her rare free time. Andrea’s partner works for a film design firm that takes him out of town for long stretches of time.
UX Researcher: Can you describe your current process of searching for a wedding venue?
Andrea: I’m so busy that I don’t have a lot of time to devote to searching around for a venue, so I feel stuck. That’s the first step in this process but I feel like I can’t get very far. I need help.
.png)
As we move further further away from the define stage, into the ideate stage, we can focus on the design ideation, and begin to brainstorm solutions to our problem statements. For this section I have complied my competitive audit spreadsheets, an excerpt from my competitive audit report, and Crazy Eights.
The link to the full Competitive Audit Report is below.
My goal in this competitive audit is to identify my key competitors, and review the products my competitors offer.
I am looking at their visual layout and navigation, how they approach pricing for budgets, what resources they offer, how they handle appointment booking and their accessibility features.
I am also examining what the competition does well and what they could do better; searching for their strengths and weaknesses, and any gaps and subsequent opportunities.
.png)
-How might we make Hitched Hideaways streamlined and accessible for users?
-How might we incorporate the user needs in a delightful interface?
In the design stage I started with two types of inspirational storyboards: Big Picture and Close-up. The purpose of these storyboards was to visually predict and explore the user experience, in order to understand the user flow and interaction with the Hitched Hideaways app interface.
These were followed by a user flow chart, then paper wireframes, then digital wire frames , and finally, a low-fidelity prototype.
The goal of a storyboard is to be able to visualize and understand potential solutions to the problems the user is facing.
For this Big Picture storyboard, I am focusing specifically on the user and their pain points, in order to find useful solutions.
.png)
The goal of a storyboard is to be able to visualize and understand potential solutions to the problems the user is facing.
For this Close-up storyboard, I am focusing specifically on the technical aspects and details of my solutions.
.png)
Paper wireframes are a fast and easy way to help UX designers quickly iterate and explore design ideas. I used paper wire-framing as a way to rapidly address different ideas concerning user pain points that I had found during my user research.
For these five iterations (and one final culmination to explore in digital), I had a few ideas to sift through.
I narrowed it down to my favorite aspects of the five iterations, and made a final frame that I thought I might like to work with in digital.
As the design phase continued, I made sure to base screen designs on the feedback and findings from user research.
The home screen has very simple information architecture, and is easy for users to navigate.
A mobile app needs the clarity and simplicity of a single column layout, so all the features have their own card for easy grid order. Each location is housed in its own card, to help users quickly and easily narrow down their choices
A detailed navigation and services screen was a high priority user need to address in the designs, and the simple layout makes it easily readable by assistive technologies.
Detailed but easy navigation of services, that may also be read by a screen reader.
Users have plenty of access to the necessary details by expanding a view to a broader area.
As I began the prototype stage, I thought about what I had learned from the user research. Most wanted ease of use and simplicity. These are the initial mobile-first digital wireframes, including versions of the recipe-to-directions screens, and the profile-to-helpline screens.
This lo-fidelity prototype, built in Figma, connects the 9 wireframes in the user flow for searching for looking through locations, navigating through the details of each location, and booking a location.
This wireframe contains the interactive links that allow the user to proceed forwards and backwards within the sequence, and the embedded cues for user navigation are clearly indicated.
In the testing stage I focused on the Usability Study parameters, and followed with an in-depth research study plan. This comprehensive stage also included synthesizing the found data with a note taking spreadsheet, a pattern identification spreadsheet, an insight identification template, an affinity map, and finally my usability study findings.
In this section I am including an excerpt of my research study plan, the link to the full plan can be found below.
The usability study was an in-depth and comprehensive undertaking. You can find the full usability study report in the link below.
My goal for this research study was to examine my group of users and their needs, in order to add realistic context to my design process.
For the study, I started by outlining the background for my project. Then I set goals for my research and made a note of the questions I wanted to answer. Finally I established the steps I would take to conduct the study, and selected the participants.
This study includes 7 key sections including: the introduction, my research questions, the KPI's, the participants, the script, and finally the System Usability Scale questionnaire.
The link to the full report can be found below.
.png)
The usability study was an in-depth and comprehensive undertaking. You can find the full usability study report in the link below.
After the testing stage, I went back to the proverbial drawing board to refine my designs. I made specific changes to several screens based on the user feedback from the usability study.
At this point I was able to focus on the delightful part: choosing colors and images, and prototyping my final interactions while focusing on accessibility considerations.
This section shows examples of changes in screen designs based on user findings, and a few mobile mockups and their prototypes.
One of the big actionable insights right off the bat, was that users were getting confused by the complexity of the homepage.
To simplify this process, I streamlined the navigation and clarified the wording.
%20copy.png)
Another actionable insight came from choosing a venue location. It wasn't as clear as it could have been. Redesigning the locations page included making the wording clearer and more accessible, and adding image icon markers.
The most pressing P0 (priority zero) issue created the most actionable insight. Users were not able to choose a date to book their venue. To fix this, a new screen was designed solely for the calendar.
Since a booking app is full of quite a bit of information, I relied on the Von Restorff Effect (or Isolation Effect) for the differentiation of the separate categories. This principle states that distinctive items are more likely to be remembered than ordinary items. In this case, each section on the second screen, listing the services available, could potentially be dull and hard to get through without a helpful design element.
For this I chose to visually highlight whichever list item the user tapped. In this case it is the "Rooms and Suites" tab. Highlighting it a different color helps the user understand where they are in their process.
This has the potential to be one of the key aspects of this design. The idea is that each location will have a 360 degree virtual reality experience built into the design.
Theoretically, the user can control where they wish to go in each location by using the paddle icon I designed. Upon "entering" a new room or location, a destination paddle will show up with a descriptive location notification.
This high-fidelity prototype, built in Adobe XD, connects the 17 screens in the user flow for on-boarding/signing in, then allows for choosing a location and venue through the app. It also includes the flow to the virtual tour implemented in the app.
This prototype contains the interactive links that allow the user to proceed forwards and backwards within the sequence, and the embedded cues for user navigation are clearly indicated.
I made sure to include accessibility icons, such as a wheelchair, for inclusive and equitible design.
In the final stage of my case study, I explored the takeaways and next steps of my project, determining what I have learned and what I could do better going forward.
This design could be a very complex undertaking to develop all the screens I would like to include for mobile. My next step would be to include an updated and heavily detailed user flow for another list item, such as a Grand Ballroom for a wedding reception, then conduct another usability study to make sure that I am on the right path.
Thank you for reviewing my work. You can review extra details in the comprehensive case study slide deck linked below.
