Mofang Rental Apartment

Website Redesign

Rental housing market in China has grown rapidly in the past few years. It's aimed to rent apartments to the young generation like white-collars or collage students for short-term or long-term rental. Rental apartment service is as renting a furnished room; however, it also provides hospitality service to tenants. Those who rent apartments take convenience, social network and security into consideration.

Overview

This was a website redesign project. It was rare that clients asked to design websites instead of mobile apps in China since it was a mobile native market unlike the mobile first idea from the rest of the world. The client had several digital channels including a website, H5 page aka. mobile website, WeChat official account and WeChat mini-program. So on one hand, we had to define what content and features the official website should have to meet its positioning strategy among all the channels. On the other hand, we needed to solve lots of website usability problems found out there. 

Role

I worked as an interaction designer with a researcher, interaction designer, and visual designer for this project. Besides collaborating with teammates on stakeholder interview, design workshop, I took over UX design work like information architecture, use case, logic flow, wireframe, prototype and etc..

Our redesign goals were to:

  • Optimize the website UX & UI design by solving usability problems

  • Deliver eye-catching & clear brand positioning and image

  • Increase conversion rate by shortening booking process

Inspiration

Always Talk to People Better than Making a Guess

In order to immerse ourselves in the context, we first studied secondary researches such as rental apartment industry and trend reports; and then walked through the process from making a visit appointment via online website to visiting an apartment. Even though the client had limited budget, we still thought it was better to talk to people to get takeaways and insights. Eventually we interviewed other colleagues and friends who had lived in rental apartments and found what factors drove people to take the decision.

Dig Out What People Care about

Questions frequently asked by people as below, besides the price:

  • What furnitures and facilities do apartments have? 

  • What service do they provide? 

  • Who live there? 

  • What activities do they have? 

  • Is it safe to live there?

Website Usability Problems Found by Expert Review

Without usability testing, we conducted efficient expert review to quickly dig out most of general usability problems. By reviewing the website based on usability laws and use cases in corresponding scenarios, we found several usability problems, to name but a few: 

  • Messy website navigation: three types of navigation bars with different logos on each

  • Too much personal information was required to make an apartment visit appointment at first step

  • Inconsistent visual design as a whole website: lots of pages didn't follow the UI guideline systems

Co-creation with Client to Explore Design Possibilities

We presented web usability problems we had found and discussed the objective and positioning of every digital channel the client had, such as a website, H5 page, WeChat official account and WeChat mini-program. The website was expected to deliver brand communication and provide online visit booking service.

Besides, we organized a co-creation workshop for the client to define what adjective keywords and best practices of visual design style stood for their band experiences delivered on the website. All the output from the client was able to facilitate us to redesign the website accordingly.

Ideation

Treat You like Friend with Hospitality 

We broke down the website structure to many different features and reorganized them to a more reasonable and understandable information architecture (IA) with the first level of the main navigation. Based on the new IA, we started to design the homepage of the website and selected two main user scenarios as our concept design targets, which were understanding brand introduction and making a visit appointment.

So we knew what goals to reach and what problems to solve, but how? Before we dug in pixel perfect design, we brainstormed all kinds of interesting and creative ideas to better deliver brand experience that met the balance between the client's goals and user's needs. 

Finally, we decided to bring users the experience of browsing the apartment online as if they were treated with warm and hospitality while visiting apartments in reality. Inspired by apartment visit experience we had, it was an apartment manager who guided us around and introduced apartments to us with hospitality. We'd like our web visitors to undergo similar experiences while browsing the page of the apartment info keenly introduced by an apartment manager's role. To reach this objective, we added a photo and intro from managers on the apartment info page and he/she introduced apartments about environments, rooms, facilities, locations, communities and many more, which were what users would like to know according to the insights from user interviews.  

What's more, we added the personality to copywriting that was a representative of apartment managers, for example, kindly asking users "What's your name?" instead of "Name". 

Content of Apartment Intro Page

What - rooms, facilities, furnitures, amenities, activities

How - service, safety, reviews

Where - location

Who - neighbors, community

Above were the findings we got from user interviews.

Presentation

We made the prototype of two main user flows to present our redesign concept:

  • Learn more about brands

  • Search apartments and make a visit appointment 

Make It Tangible and Deliverable

After presenting our concept design and discussing with the client, we curated the redesign solution with feedbacks. We started to create wireframe of all the features by project priorities. We hand-drew wireframe and made lo-fi paper wireframe to discuss with teammates and tried to figure out the most tailored solution. Once we reached to an agreement, we made the wireframe mockups. The UX specs had scenarios, use cases and all the page design with interaction design descriptions and business rules.   

The Achievement

Mofang Apartment website redesign was tangibly published online.

© 2020 by CHIA