Aptamigo, a Chicago based apartment searching company handed over their branding information and slide deck informing us about their mission statement and goals as well as all the UX work of a previous team. As a new team of four, we had to read through all the UX material, user interviews, competitive analysis, and wireframes to discover the intended path Aptamigo wanted to take. We read through the competitive analysis and the design principles to see what elements were most important to have in the interface. Aptamigo is a platform to help people find mid- to high-end apartments in Chicago. The direct audience perhaps being students or people living here a few years or less. The apartment searches concentrate on high rises around the city and the different reviews tenants give the building for various assets. They already have a site up, but want to improve upon it believing that applying valuable user research and user interface
design was the answer.
We wanted to get as many solid descriptions of how our clients would define their brand, how they want their customers to feel, and what sort of aesthetics they’re really drawn to. For our kickoff meeting, we prepared a list of questions, put together a gut check test of 20 different images that they’d have to respond to in 20 seconds, and prepped an adjective exercise for them. Though coming up with adjectives was by far more tricky for analytic business minded clients, we we were still able to define some terms that really explained what they wanted to convey with their site. The one repeated description being “friendly”, calling back to their name itself Aptamigo. They also drew upon “trustworthy” and “efficient” which, in essence, can be some very broad terms. We took those and believed we needed to make the site look credible and well structured to provide the consumer with reassurance and ease.
BRAND VOICE
• Friendly
• Trustworthy
• Efficient
• Sleek
KEY TAKEAWAYS
• Keep aesthetic simple to ease data load
• Organizing of filters important
• Empower user, be reliable
• Be users best friend,
simple manner
Our clients also called out websites that they were drawn to and found their style appealing. With sites like airbnb, zumper.com, radpad.com, and specout.com, we moved forward creating a visual competitive analysis comparing these and other competing sites.
We took those results and the characteristics that drew users and created individual style exploration tiles. We each came up with three individual styles tiles trying to mimic the brand characteristics our clients desired. I created a friendly inviting style, a professional luxury style, and one that pulled complimentary colors from the Aptamigo logo to be a fun friendly style as well.
We each presented our tiles to our client and received a lot of actionable feedback. They chose one style from each, but picked their favorite fonts, icons, and colors overall.
• They felt the luxury styling was far too serious for their brand and was a clientele not in their scope.
So we removed "sleek" from our brand voice takeaways.
• They loved the cool energizing teal tone from one style tile and the font from another.
We were easily able to move ahead with our design ideas. Communication was very clear in what key screens they desired and the fact that they wanted to see both mobile and desktop. Our client’s had obviously been working closely with developers and knew design language which made
communication seamless.
After discussing our style tiles with our client, as a team we further discussed our takeaways from our first presentation and created a set of design values to follow:
• flat design - no drop shadows
• icons solid - not playful
• all caps titles on images
• research map placement
• primary color for ctas and use only one other color
• warm imagery and filters
• 2pt corner radius
• no thin fonts
For the next phase we had to complete our screens and conduct users tests to see if our style concepts were working for users. Before we did that we created another survey to understand user's comfort with a map being displayed in the right or left side of the page.
Our results were fairly inconclusive. The reasoning people had for preferring the right or left side seemed very personal. We concluded that since people read left to right, whatever is most important to Aptamigo should be placed on the screen farthest left, the first thing people see.
We created our own individual Hi-fidelity mockup screens keeping our design values in mind.
• Selection of warm inviting imagery was of clear importance as well as pristine quality images of the actual apartments
• Decided to organize the vast amount of information on the property page with iconography
• Kept design to a simple minimalistic tone with the teal accent.
With our first round of mockup screens, we conducted four user concept tests. From those we pulled
these findings:
• preference for bright colors
• wanted more map space on search page and collapsible fields
• like the use of iconography
• want to see amenities first
• wanted map option from property page
• we also compared whether users preferred a long search bar verses a form field on the home page
concluding that most desired the simplicity of the search bar
Our next presentation I felt prepared and ready to lead the team. I felt comfortable with my time management and was ready to help us make a strong presentation. We presented Aptamigo with our key screens and managed time wise to get through both desktop and mobile for all four of us. We had to go over our user test synthesis and our new survey results. Our clients were amazing and stayed beyond the allotted time to give us all thorough feedback.
Much of the feedback was very specific and almost a redo of the UX we were following. Items that had been tested and wire framed with the UX team were ignored which became a bit of an internal struggle for us as designers whether to adhere to the client's wishes or the evidence of the UX research. The feedback from our clients asked that we apply the following:
• pictures of the outside of the buildings from home page
• exclude lease length
• include square footage, availability date, floor plan and price on property page
• include number of reviews by star ratings
• like interior shot of apartment as hero image on home page
We found a balance between applying our client's desires and following the research given to us and iterated our final designs. We took all the feedback from our user tests and from our clients and proceeded into our final sprint, finalizing our screens, and preparing InVision prototypes for both desktop and mobile, responsive web design. We were greeted with great appreciation from our client each of us for some really strong design decisions, me personally for the structure I implemented for the individual unit pages. The apartments each had a lot of information and an issue they previous had was figuring how to best configure the information to be easily digestible for users. I really felt that we helped our client solve some real issues and help them curate great design ideas.
My final iteration of the designs included hover states. On the home page when hovering over the images of the buildings it would show the inside of the apartment when hovered over. I included this believing users may not be looking to live in a particular building but want to feel the warmth and see the aesthetic of the actual living space. These states are also included on the map search page. The previews of the units show the interior spaces when hovered over as well.
Another final change in the design was with the icons on the property page, I included different variations of grayed out icons to signify whether those amenities were available or not.
Organizing the reviews also became an important part of the end design so we each created a review page and a way to make those reviews collapsible to save space.
