Prior to approaching us the client worked with a UX research team and conducted their own research. Below are the annotated wireframes they provided to us which focused on streamlining the user flow for scheduling a tour of an apartment.
After an extensive on-boarding session with AptAmigo’s UX research team we were ready to sit down with the Co-founder and Head of Product Development to discuss how they envisioned the future for AptAmigo. To better understand how they see their brand and how they visually want to convey this image we facilitated a brand voice exercise and 20 second “Gut” test.
In order to settle on a new visual direction we conducted a visual competitive analysis exploring the current trends of websites for direct competitors Zumper, Zillow, and Very Apt. We also looked at websites of leading out of category competitors such as AirBnb and Tripadvisor.
“We are your reliable, efficient, trustworthy friend that you feel comfortable having to help find your perfect home.”
Head of Product Development & Marketing, AptAmigo
Competitive websites varied from being simplistic and minimalistic to suffering from cognitive overload with user search flows front-loaded with an overabundance filters and questions. Our client identified the simplicity of Very Apt, the use of white space and symmetry of Zumper, and the friendly and warm tones of AirBnb as falling in line with their vision of AptAmigo.
Taking both the research findings from our initial user test and the client's vision, we outlined the following principles to use as a road map throughout the design process.
Use warm colors, language and iconography to create a fun, playful and engaging experience for adults.
Convey credibility, trust and reliability through details and consistency.
Use of common patterns and minimalistic design to offer an intuitive stress free experience.
look and feel
Expressing their desire for a look that was luxurious, warm and friendly, my team diverged to create styles for the clients review and feedback. I created three unique styles ranging from high-end and luxurious, to warm and friendly and a third style as a hybrid of both.
questions to answer
After working with the client to establish a look and feel it was time to turn our attention to the following key issues which needed more research to address .
Should the homepage have a single search bar vs. form fields?
Should the Map live on the left or right of the search page?
How can we best optimize scheduling a tour for the user?
Surveying over 100 respondents we confirmed that the user flow was front loaded with too many search options and redundant search fields appearing on consecutive pages. My solution was to use progressive disclosure with a single field search bar on the homepage which takes the user to the property search page offering additional fields to narrow their search. This eliminated the redundancy and reduced stress and cognitive overload for the user.
Using an A/B test format we conducted a survey to measure map layout preferences. Our results indicated a split between left and right map placement. However, we found that users looked to the left first, expecting to see information most important to them. We identified that images of available apartments were top priority for users. Users also expressed that map placement on the right felt familiar to them and they experienced less anxiety and stress. By placing the map on the right I hope to see an increase in the percentage of tours booked by minimizing user anxiety and stress along with emphasizing the apartment listings and imagery in my designs.
BOOKING A TOUR
Our initial wireframes presented the user with an overwhelming amount of search fields and options for the user to digest and filter through. After conducting user test I found success with once again using progressive disclosure and to gradually progress through the booking process, gathering user info first, then confirming a date and time.
bringing it all together
After several rounds of iterations based on user testing and client feedback I was able to bring it all together and presented the following key screens and inVision prototypes to the client.
The client was impressed with my final presentation and is using my designs to guide their decision making as they redesign their new platform. To assist in the rollout of the new platform I created a style guide to aid the developers in staying on brand with a consistent and look and feel throughout the website.
Having served as a project manager on similar projects it was exciting to be part of the creative process for the first time with a live client. Coming aboard after the UX had been conducted I learned to ask the right questions and push back when needed as the transformation of the wireframes to high fidelity mockups was not a straightforward process. Thanks to feedback from the client and several rounds of user testing I was able to design with the user in mind, creating the best possible experience while remaining cognizant of the clients objectives.