Hitched Hideaways
Mobile App Design
hitched mobile app screens

My Contributions

Role

UI/UX Designer and researcher, designing a mobile app for Hitched Hideaways, from conception to final prototype

responsibilities

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

Project type
UX Design
Project Duration
March-May 2021
Design Tools
Figma, Adobe XD, Photoshop, Illustrator

Hitched Hideaways

Be there, from the comfort of your own home.

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

The Process

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.

design think diagram showing empathize, define, ideate, prototype and test phases
A Design Thinking process model, based off Stanford's d.school diagram
exclamation icon

The Problem:

Everyday life changed during the outbreak of the pandemic. world was on temporarily on hold, which led to a couple of problems:

1) Short and long term event planning came to a halt.

2. Weddings and events were delayed or cancelled outright.

Many betrothed couples were at a standstill in their search for a wedding venue due to occupancy and travel restrictions.
star icon

The Goal:

The goal of Hitched Hideaways is simple:

1) To design an efficient and user focused wedding venue app, incorporating a 360 degree virtual tour experience.

2. To boost the confidence in booking online without the need to travel.


We aim to increase customer trust and renew the excitement of planning joyous events in a weakened market.  

WHY?

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.

The Schema Theory

schema diagram

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.

Research

book icon

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.

checkbox icon

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.

User Interviews: Hitched Hideaways App

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.

Style

Guerilla Interviews

Number

8 people interviewed

Duration

15 minutes each

Interview Type

Contextual Interviews

Initial Questions

-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?

Understanding the User

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.

User Story: Andrea George (primary persona)

User Story

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.

Problem Statement:

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.

Hypothesis Statement:

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.

User Persona: Andrea George

Andrea george persona

User Story: Christiana Marcos (secondary persona)

Problem Statement:

Christiana is a graduate student who needs a way to find accessible and inclusive options for her destination wedding.

Hypothesis Statement:

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.

User Persona: Christiana Marcos

christiana marcos persona

User Story: Javier Tibbs (secondary persona)

Problem Statement:

Javier is a busy working professional who needs an efficient but comprehensive way to search for their perfect wedding location.

Hypothesis Statement:

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.

User Persona: Javier Tibbs

javier tibbs persona

User Research: Andrea's Pain Points

icon of number 1

Time

Andrea doesn't have much time to travel to scope out wedding venues, so the product needs to be efficient and detailed so they can fine the perfect spot.
icon of number 2

Financial

Andrea wishes wedding apps and sites were more transparent about pricing. This encourages us to value transparency in our product.
icon of number 3

Travel Restrictions

Andrea's wedding plans have been hampered by the pandemic, and there currently are not many travel options available to them. We need to help here get a true and accurate feel of the destination to help them narrow down her choices.
icon of number 4

Information Architecture

Andrea has very specific ideas about what they want in a wedding venue, so we need to make sure to develop an informative app with lots of detail to make it easier to narrow down their choices.

Empathy Map

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.

user empathy map

User Journey Map

user journey map

Understanding the Competition

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.

Competitive Audit Spreadsheet

competitive audit spreadsheet

Competitive Audit Report (Excerpt)

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.

competitive audit

Crazy Eights & HMW's

Identify gaps and opportunities:

-How might we make Hitched Hideaways streamlined and accessible for users?

-How might we incorporate the user needs in a delightful interface?

Three ideas generated with Crazy Eights:

  • Finding the perfect wedding venue is priority of this app, so the focus will be in the search and filter section for this screen. Along with this, it could have an in-app map feature where users can search by location, and click on areas that appeal to them.
     
  • Have a budget calculator to not only allow for users to type in their whole estimated budget, but also to keep track of payments made to venue (down payments and installment payments).
  • Incorporate a guest list manager, so that the users can keep track of who is coming, in order to keep an eye on the reception costs.
crazy eights ideas

Starting the Design

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.

Big Picture Storyboard

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.

big picture story board

Close-up Storyboard

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.

closeup story board

User Flow Chart

user flow chart

Paper Wireframes

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.

paper wireframe

Digital Low-Fidelity Wireframe: On-boarding

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

lo-fi wireframe

Digital Low-Fidelity Wireframe: Navigation

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.

lo-fi wireframe

Digital Mobile Wireframes

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.

lofi-wireframes
lofi-wireframes

Low-fidelity Mobile Prototype

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.

lo-fi wireframe images
lo-fi wireframe ptototype

Usability Study

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.

Usability Study: Parameters

clock icon

Length:

15-20 minutes
user group icon

Participants:

5 Participants
location icon

Location:

United States, remote
clipboard icon

Study type:

Unmoderated usability study

Research Study Plan (Excerpt)

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.

user research study excerpt

Usability Study: Note Taking Spreadsheet

usability study note-taking spreadsheet

Usability Study: Pattern Identification

usability study pattern identification

Usability Study: Insight Identification

usability study insight identification

Usability Study: Affinity Mapping

affinity map

Usability Study: Findings

These were the main findings that the usability study revealed:
icon of number 1

Finding

Participants wanted a clearer navigation flow on the homepage.
icon of number 2

Finding

Users wanted more clarity on choosing a venue location.
icon of number 3

Finding

Users need a calendar function to select their booking date.

The usability study was an in-depth and comprehensive undertaking. You can find the full usability study report in the link below.

The Outcome: Refining the Design

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.

Redesigning the Screens: Low-Fidelity Homepage

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.

affinity map

Redesigning the Screens: Low-Fidelity Locations Screen

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.

lo-fi wireframe

Redesigning the Screens: Low-Fidelity Calendar Screen

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.

lo-fi wireframe

Redesigning the Mobile Screens: High-Fidelity Mockups

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.

hi fidelity mockups

Redesigning the Mobile Screens: High-Fidelity VR Mockups

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.

panoramic high fidelity mockups

High-fidelity Mobile Prototype

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.

high fidelity wireframes
high fidelity prototypes

Prototype in motion

final prototype gif

Accessibility Considerations

icon of number 1
I used the Adee Comprehensive Accessibility Tool to generate alt text for all the images in the high-fidelity prototype.
icon of number 2
After running my color palette through the Color Interface Tool in Google's Material Resources, I changed my accent color from a light orange to a muted red to be AAA accessible.
icon of number 3

I made sure to include accessibility icons, such as a wheelchair, for inclusive and equitible design.

Going Forward

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.

Takeaways:

checkbox icon

Impact:

The feedback I received from my usability study and my high-fidelity prototype has been positive. They show that the design of this app and website is usable and meets the user's needs.

A quote from peer feedback:

"One of the best [prototypes] i have seen so far."
book icon

What I Learned:

In designing Hitched Hideaways to be a mobile-first app, I learned that user research plays an invaluable role in the UX process. Based on the influence of the user interviews, peer reviews from my Google UX Design Certification bootcamp, and usabilities: I was able to iterate a comprehensive and inclusive design.

Figuring out how to practically incorporate a mock virtual reality and 360 view of the interior was everyday application was an intimidating puzzle, but has been a very rewarding journey.

Next Steps:

icon of number 1

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.  

icon of number 2
I would likely need to conduct more user research into the complexities of security. For example: gathering the insights I need to make the users feel comfortable giving out personal information when booking through the app.

Thank You!

Thank you for reviewing my work. You can review extra details in the comprehensive case study slide deck linked below.