TylerGAID
Published in

TylerGAID

Moira: A New way to Travel & Connect — A UI/UX Case Study

Introduction

Traveling can be challenging and overwhelming. In order to reduce stress and keep the joy in traveling, we created Moira. Moira is a hotel interface that has a corresponding app, which helps you find great places and activities in the area you are staying. It also allows you to connect with others staying in the hotel and see all the unique destinations and activities they are doing during their stay.

Who are the creators?

Moira was created by student designers Kaitlyn and Aulona. We both have an interest in the travel industry and were inspired by our own traveling experiences to make Moira.

Problem

When guests travel to new locations they are often unfamiliar with the best things to do and the best places to eat. Many hotels do not provide a way for people to understand the local areas they are visiting, so they spend too much time planning and researching and not enough time exploring. Exploring a new place can be challenging and you might get too caught up in navigating that you miss amazing sights around you.

RESEARCH

Formative Research

We started by researching the main issues travelers face when traveling to a new destination. We found that one of the biggest factors is how time consuming planning can be. With the pandemic, traveling has become difficult and uncertain, which also creates hesitancy and fear in many travelers. In response, travel agents/advisors are more sought after. Travelers often have trouble navigating finding the places they want to visit in other countries and do not want to appear as a lost tourist to locals. Additionally, it could be hard to connect to the locals due to the cultural differences and customs.

Secondary Research

We then analyzed more about the future of the traveling indusrty and found an increase of technology use. As stated by booking.com “55% of respondents worldwide were excited about the potential of technology to further personalize their travel experiences.” A lot of travelers use technology and app services for convenience and efficiency like Wikitravel, TripAdvisor and other social media platforms to ask about places to visit in different countries. Due to the pandemic, many hotels faced a drastic decrease in visitors, “in metropolitan Orlando, Florida, occupancy in August was 28.7%, a 58.3% annual drop, according to Visit Orlando.” Therefore the main concern for hotels are focusing on ways for the rooms to be improved for more users to have an enhanced experience, but not much focus on helping the tourists find ways to get around.

Primary Research

To get even more information about the people around us, we created a short survey to see how people experience traveling. Many people had different opinions, but there was an overarching theme of making sure to visit all of the places they’ve planned in a short amount of time and navigating to them in a timely manner. We also concluded that many people use hotel rooms for their stays and primarily use it for sleeping and relaxing.

Survey results
Some of our notable responses

Competitors

The rise of technology is playing a huge role in the future of hotel rooms. Some of our competitors include Volo, a touchscreen access to all amenities, Spotted by Locals, a quirky sightseeing and activity ideas that are handpicked by real locals, and Marriotts use of Savvy Smart Mirror. We noticed that many of the existing touchscreen devices in hotels only provide entertainment and information about the hotel rather than an interactive experience. Keeping that in mind, we wanted to make sure we can stand out through our connectivity and local information for residents to find easy ways to explore outside of their hotel rooms.

Ideation

We initially had the idea of an app that pins different locations in a new country based on preferences (the more pins and reviews a location has the easier it is for people to visit). It would categorize based on if it is full or who liked it — tourists or locals. Then we progressed to having a primarily route app that tracks where you walked that day so you can look back and find the nice cafe that you passed. It would have a collective map of all the routes you took in the city so you can see where you need to explore more. We also had an idea that is larger than just an app, but a digital interface in a hotel or AirBnB room that has recommended points of interest, tips, and restaurants for the specific location you’re staying.

Solution

With the research we have done and our ideation process we landed on the idea of a smart mirror in each hotel room that has recommended points of interest, locations nearby, and restaurants for the specific location you’re staying. It will include a “Hotel Hub” for residents to post what they did that day and connect with other residents through similar interests. It will also include a relaxing debrief where the guests can see all the photos they took that day and the places they visited. They can easily post these photos or create a postcard to send to friends and family. This will connect through bluetooth to an app on their phone that will allow people to save specific locations they find throughout their day’s outing. The app will provide easy categorization for direct messaging, routing, and handy itinerary based on saved locations.

User Persona

With the research conducted, we decided to focus on a specific adult range of people for our service. We generated user personas of young adults to middle aged adults, to get an idea who this service is for. The user personas also helped us visualize what the problems were and how we can achieve the users goal through our app and interface

User Personas: Jamie Smith, Matthew Hart & Lucas Hernandez

BRANDING

Name

With our logo we brainstormed numerous ideas and names, from typical travel, to relaxing and sophisticated names. With the name we wanted a single word, preferably one syllable that was easy to say and remember. We landed on “Moira” which means destiny. This can be interpreted in many ways, but our main goal was to represent our sophisticated yet fun brand in a simple but effective way.

Name Brainstorming process

Logo

For the style of our logo, we took a lot of inspiration from sophisticated hotel logos as well postal stamps. We wanted to steer away from traditional airplanes and globe motifs for traveling thus deciding to go with a bird as our main visual. It represents freedom, flight and connectivity, all of which this brand represents! Keeping our name in mind, it matched perfectly with the meaning of the visual.

Logo research & inspiration
Initial logo sketches & vector sketches

Style tile

Throughout the branding process, we wanted to keep a calm and sophisticated look. Therefore deciding on warm and neutral colors that create an enhancing ambience in the hotel rooms. We were aiming to have fun aspects as well, which is notable in our stamp illustrations that are easy for everyone to use. Keeping our initial brand guidelines in mind, we also chose typography that was both sophisticated and easy to read!

Moira Final logo
Moira Style Tile

User Flow & Journey Map

Using the information we collected from our research and survey we began to create journey map and user flow for each specific user persona we generated. The journey map helped us understand how each persona would use our interface and how they would feel using it. This influenced our user flows to make the personas planning process as streamlined and intuitive as possible to avoid any stress and confusion.

User Journey Maps

The general goal for each user flow was for the users to be able to search Moiras interface to find places and activities they want to save. Each persona has different interests and saved places based on what they wanted to do. The user flows also showed how the personas went to their saved places and how they used the interface when they got back to their hotel room. Working on the user flows and journey maps simultaneously allowed us to revise our problems thus impacting our UX design. For example in the beginning we noticed there was too many buttons for the user to go from one page to another, so we minimized the amount of clicks as much as possible.

User Flows

Site Map

With all of the information and research, we were ready to brainstorm the elements that would be incorporated into our prototype. Throughout the planning process we heavily relied on working with Miro which is an easy and collaborative tool. With the site map, we were able to visually understand where the user is finding each page and section. For example, for our app we really focused on the remote screen and for the interface we focused on the Today’s Travels section as those were the most important features of both. Our main goal was to make everything easy to navigate!

Moira Smart mirror & App site maps

How it works/Our Goals

The hotel interface includes the connectivity aspects like the Hotel Hub, Local culture, Restaurants and Today’s Travels. All of these features will be easily accessible and laid out on a main menu page so the user can choose where they would like to navigate first. For the interface we focused on the Todays Travels, specifically the photos aspect, since a majority of our users use hotels for relaxing and winding down.

The Moira app also includes the same aspects as the interface with an additional section being the bluetooth remote. This has a microphone as well as keyboard so that the user can easily navigate the interface without having to stand at their mirror and scrolling on the screen. Since both are being used simultaneously we also incorporated tips for users to use the app for an easier experience.

Wireframe

The low fidelity wireframes are a full draft of what screens we would need for the user to complete tasks and how they would be layed out. We got feedback from our professor and classmates about what other screens we might need and how the screen could be tweaked.

Low Fidelity Wireframe: Smart mirror
Low Fidelity Wireframe: App

Once solidifying our low-fidelity wireframes, we started working on our high fidelity wireframes. This process consisted of implementing our branding into the layouts of the low fidelity wireframes.

Smart Mirror Interface

The smart mirror interface was heavily influenced by our research, particularly our surveys. We wanted to focus on the easy access of local places near the hotel and ways to connect with other travelers. To do this we made sure the interface was intuitive for any user to find what they are looking for, connect with other travelers with similar interests and a place to look back on the memories made in a new country.

Day and Night mode

We implemented a day mode and night mode design for users to see the screens clearly based on lighting. Based on our surveys, most travelers use the hotel during the night time so our main priority is creating screens for the night mode. We included slideshows, gallery views, and sleep mode for users to see the places they visited that day and giving the option of posting onto the hotel hub for others to see!

Sleep Mode
Photo Gallery and Creating a Post
Restaurants, Saved and suggestion screens
Local culture and opening screens

App

With the bluetooth app we wanted to create an even easier user journey by making the smart mirror screens responsive so they could use it on the go. In addition our focal point is the use of our bluetooth remote that connects to the smart mirror, so our users are not aimlessly scrolling on their mirrors after a long day of exploring.

Bluetooth remote
Remote in use on interface
Creating an account on Moira, Main menu and feed of Hotel Hub
Messaging another traveler, saving a Restaurant and adding an event onto Itinerary

Our interface welcomes the user to main menu that is sectioned with every category we focused on. The Hotel Hub is where the user finds other travelers in the hotel building as well connecting to them through messaging. The Todays Travels shows the photos and routes the user has taken that day. Throughout the process we wanted to make sure each category was integrated within each other so the user can access them with no stress.

Smart Mirror in hotel room
Restaurant filter options
Routes taken that day

Other Deliverables

Through the interface we provided an option for the users to create postcards using their own photos they took on their journeys. They can send it to family and friends digitally through email and text messages as well as physically printed out. Before they leave the hotel, they will receive their printed postcard as well as complimentary luggage tags.

Create a Postcard
Post card and Luggage tags

Conclusion

Throughout the process of our project we learned many new things and faced some challenges when designing for this new type of interface. Our major challenge was making sure that the remote made sense when being used with the smart mirror. Making sure it works easily and efficiently was very difficult to tackle for us. With the help of our professor and classmates we were able to overcome this difficulty. We also struggled with designing for a larger interface and making sure the text and buttons fill the space wisely. Overall, it was a great experience for the both of us to create a new and innovative service for an industry we were passionate about!

Credits

Designers: Kaitlyn Gross & Aulona Noka

Art Direction: Abby Guido

--

--

--

Graphic & Interactive Design Program at Tyler School of Art and Architecture at Temple University

Recommended from Medium

Transforming the Way We Tell Stories

Controlling Spacing in Design Systems. Multiple Spacing

Bindu-UX/UI case study

Naming the Edges tool in Series

Seven Steps to Managing Change

Top Web Design and Development Blogs + Freebies 🎁

What Happens if a Book Meets Transformers

What Happens if a Book Meets Transformers

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
aulona noka

aulona noka

More from Medium

When it Comes to Design, the Sprinkles Matter

What is emotional design and why is it important?

a woman doing yoga in a big white building

Case study: User research and website redesign of “Sandige At Doors”

How to open the curtain again? Second part