TIFFANY TAM

Mobile App

HanaHaus

 
HANAHAUS Portfolio Banner.png
 

Role: UX Designer Client: HanaHaus Duration: 3 Months

The Opportunity

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 an 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.

The Problem

Frequent visitors of HanaHaus do not have an easy way to reserve spaces for use.

The Solution 

A mobile app that offers personalization and a seamless reservation process.

 

Insights

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.

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

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 prototypes and made adjustments before testing again.

HH+SKETCH.jpg
 

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. 

 
HANAHAUS WIREFRAME_presentation10-01.jpg
 

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. 

 
HANAHAUS%25252BReservation.jpg
 

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.

 
HH_NAVIGATION-TAB-test.gif
 
HH_RESERVATION_UP.jpg
 

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. 

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. 

HH_PERSONALIZATION_UP.jpg
 
HH_CHAT-FLOW_small.gif

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.