HanaHaus

HanaHaus is a community workspace that cultivates a dynamic atmosphere for innovation. I was given the opportunity to design a solution that increases conversion rates.

The Problem: Increase conversion rate for both new and existing users. 

The Solution: A mobile app that offers an easier way for users to find information and to reserve rooms.

Role: UX Designer             Client: HanaHaus             Duration: 3 Months

The Opportunity

Mobile App

HanaHaus is a community workspace that is rooted in the philosophy that great ideas spring from anywhere. Their workspaces bring people together so that they can explore new ideas and bring those ideas to life. The users of the HanaHaus workspace are what makes this community unique. To make sure that the users have the best experience from start to finish, the idea to design a app to improve and streamline the reservation process was pitched. Currently, users can reserve office spaces and work stations through the HanaHaus website, but there is an opportunity to further improve the reservation process and increase conversion rates with the development of an app. 

Client: HanaHaus        Role: UX Designer       Duration: 3 Months

HanaHaus is a community workspace that cultivates a dynamic atmosphere for innovation. Users can reserve offices and tables through the HanaHaus website.  The primary focus of this project was to develop a mobile app that allows users to reserve spaces easily and increase conversion rate. 

HH_Home
The Insights

Before taking pen to paper, I conducted a competitive analysis of the direct competitors of HanaHaus. By holistically comparing HanaHaus to competitors from a broad and narrow scope, it helps establish a competitive advantage for HanaHaus while also presenting areas and opportunities for improvement. Some distinguishing factors that set HanaHaus apart from its competitors are location and amenities offered. Currently, HanaHaus is located in downtown Palo Alto in the heart of Silicon Valley where restaurants and exciting activites are just one short stroll away. HanaHaus is also expanding to locations such as Newport Beach where you're just steps away from the ocean. HanaHaus also offers more than just a cafe, HanaHaus offers coffee, full breakfast, lunch and dinner by Blue Bottle Coffee (a Bay Area favorite!). 

Along with the holistic analysis of competitors, I also conducted a heuristic analysis and usability tests on shared workspace apps available in the market to help shape my design decisions. Using the information I collected from the analysis and usability tests, I was able to recommend features and make design decisions based on data. 

The Execution
Process

This HanaHaus mobile app was designed with a focus on the reservation page and the reservation process to increase checkout rate. The persona of this product was a individual that uses HanaHaus frequently and needed a easier way of reserving rooms without having to go through the website. A competitive comparative analysis was done as well as usability testing on the existing website. Low fidelity prototypes were created and tested before moving onto wireframes and user flow mapping. Finally, a high fidelity prototype was developed and tested.   

Low-Fidelity Prototype

Inspired by the beautiful scenic locations of HanaHaus, I wanted to design an app that parallels the experience of actually working there. I started by sketching out low-fidelity prototypes where the focus revolved around a seamless checkout that also showcases the unique features HanaHaus has to offer. I conducted a usability test using the low-fidelity protypes and made adjustments before testing again. 

sketches
Wireframe

Wireframes

Wireframes were created by implemented learnings from the comparative analysis, usability tests and low-fidelity prototype tests. The design also took into consideration the current branding and imagery of the existing website to keep consistency. A usability test was conducted before proceeding to high-fidelity prototypes . The results of the test showed a need for a custom navigation bar which was implemented in the final product. 

High-Fidelity Prototype



High-fidelity prototypes were developed and a heuristic analysis was done on the reservation process. Some key features like chat and navigation were added based on feedback and the data gathered. 

High-Fidelity Prototype

High-fidelity prototypes were developed and a heuristic analysis was done on the reservation process. Some key features like chat and navigation were added based on feedback and the data gathered. 

HH_NAVIGATION-TAB_sm
HH SCREENS_WELCOME 2
HH SCREENS_WELCOME 3
HH_NAVIGATION-TAB_sm
Navigation Tab

A navigation tab is used because it provides functional minimalism and helps organize information. A calendar is used in the navigation tab to help users manage their reservation schedules. Users are also given the option to bookmark rooms they like by clicking the heart icon. This option helps users access work spaces they like without having to search for it. The user profile is also readily available so that users can access their account information. Lastly, a live chat option is implemented into the app. Live chat serves to help users when ever they have questions and also builds brand trust and loyalty.

Reservation

The reservation page was designed with competitive analysis data and user testing results in mind. Chunking information and creating drop down menus help prevent user error and short term memory overload. Amenity icons were added to improve scannability and increase the value of each work space. 

Reservation

The reservation page was designed with competitive analysis data and user testing results in mind. Chunking information and creating drop down menus help prevent user error and short term memory overload. Amenity icons were added to improve scannability and increase the value of each work space. 

HH SCREENS_Reservation
HH SCREENS_reservation checkout
HH SCREENS_Sign In
HH SCREENS_Reservation
HH SCREENS_profile
Personalization

Adding personalized messages on pages such as the login screen, user profile and reservation site not only increases brand affinity but also brand loyalty. 

 

Live Chat

An addition of a live chat improves overall experience and improves conversion rates. It also builds trust between the user and the brand. 

 

HH_CHAT-FLOW_small

Have questions or feedback? I would love to hear from you!
TiffanyTam87@gmail.com

© 2019 Tiffany Tam | All Rights Reserved