Perfect Properties Case Study
Overview
Perfect Properties was my second project and focused on UI Specialization. The project assumed the majority of the UX portion of the project was complete. Given only a project brief, a single persona, and several user stories, my goal was to complete the remaining parts of the project and justify my decision making process handed only a project brief PDF with q single persona and several user stories. Although my first project walked me through a complete UX design process, this project included a lot of deliverables I had only read about and I was eager to create something new and learn how to make it better along the way.
Getting started with some(you guessed it) userflows and wireframes
Why re-invent the wheel? I had the project brief but needed to get some competitor research done to understand some of the established design patterns before knocking out some ideas. My tendency is to put a lot of complexity where it does not belong, so I had to consider the Information Architecture a bit and try out some user flows before the wireframes.
The wireframes and low-fi prototypes are always fun to look back at and I am getting the hang of not expecting them to be production ready quite yet. I imagine how some of the conversations might go as I would discuss them with others or in a meeting. Some of the inspirations came from the clever patterns I discovered during my competitor research(e.g. draggable info tab, bed/bath selectors, etc.) while others were things I felt my persona just had to have(e.g. full width images, concise listing info, smooth & simple navigation).
SignUp/SIgnIn sketch & wireframe
Profile sketch & wireframe
Property Listings sketch & wireframe
Filter sketch & wireframe
Property Details sketch & wireframe
Property Images sketch & wireframe
Developing the Mood and Tone
Before getting too far with with UI enhancements, I needed to get some direction on the mood and tone for the app. Since my persona wants to locate investment properties, I needed to come up with a mood board and experiment with a few directions. I had not created too many mood boards so I did some research again to get a feel for what I needed to communicate with my imaginary team members. The Project brief called out "Style: Clean, quick, smart; greens, blues, purples" so tried out a few directions.
My first mood board tried to convey joy and celebration of finding a great investment property. The navigation was simple and clean but I felt the color palette did not present a tone that was serious enough.
First Version
My second mood board tried to work out the regal feel of purple but I still not feel it worked well. I also did not like using red since investments can involve significant risk. Finally, the persona image kept making me think she was a stealthy hacker!
Second Version
I finally settled on using a relaxing blue color and a lighter green for the onboarding and confirmation alerts. All of the colors met WCAG AAA compliance except for the onbaording green which met WCAG AA compliance. The tone was more relaxed yet serious and conveyed my persona having success finding her Perfect Property using the app.
Final Version
A Style Guide for my UI ehancements
With a good direction on how to proceed, I now had to deal with making the app for human with better alignment, typography, and interaction. My first step was to find a suitable grid for my mobile, tablet, and desktop screens.
Mobile Grid
Tablet Grid
Desktop Grid
Color Pallette
Next, I had to clearly define my color palette and usage. The theme must advocate peacefulness, growth, & stability. Furthermore, since properties involve significant assets , the color red must be avoided and errors should be handled using main color within a modal.
Typography
Perfect Properties uses the SF Pro typeface. Note that the listing information utilizes many of the fonts available with SF Pro to promote contrast and highlight key information. I had to make several adjustments in my iterations when I viewed the screens on my iPhone and iPad Pro. I had initially made them too small while working on my large widescreen monitor attached to my MacBook Pro. Fortunately, I made a lot of my UI elements as Components in Adobe XD and was able to update them without too much rework.
Iconography
I used SF Symbols Templates for my Iconography to better match the fonts used from the SF Pro typeface. The templates provide size and weight options and thus allow a greater degree of flexibility instead of simply resizing an SVG icon. Note the special variant of the left chevron
icon used to provide enough contrast from images without becoming too distracting. An example template is also provided.
UI Elements
The UI elements followed a consistent width and weight to promote more balance. The controls were created within Adobe XD and were inspired from several common design patterns I found during my competitor research.
Logo
I created a logo for Perfect Properties to reflect calm and contentment while also bringing in some emotion to the potentially stressful process of searching for investment properties. The theme imparts a few different variations of the logo for alert notifications. For other types of alerts, a simpler design pattern was used. The splash screen also uses the logo but since it runs within seconds, I opted to not include any additional branding text as it could be difficult for the user to read.
Final Mockups
Onboarding
I used a friendly green for the onboarding process and kept it simple so the user can get going and use the app to locate properties. The Profile updates the properties located as the user enters more choices.
Viewing Listings
When viewing a specific property, I want to provide an option for the user to scroll through property images and also be able to scroll via a tab that contained more detailed text information. Through a little experimentation in Adobe XD, I was able to implement this type of gesture.
Applying a Filter
The filter is very similar to the Profile but includes a few more options to help narrow down properties.
Scheduling a Tour
The user can schedule a tour of a property using after making a few simple choices.
Contact Agent
I initially had the date and time left justified but it did not flow well so I made it center-aligned to keep the focus better.
Multiple Devices
Lessons Learned
Each property had unique listing information such as price, beds/bath, address. The information had to flow smoothly and be easy to scan through. However, including some secondary information, such as the realtor, broke up the flow. After considering what my persona needed, I recognized that realtor information was secondary to things like price and size. Therefore, I removed the realtor and experimented with the typography and the visual hierarchy until I arrived at my final version.
Several of the early iterations with listing information
Final Version
Coming up with a good color palette was more difficult than I expected. I used various tools such as Adobe Color and experimented with different color schemes. A created a few moodboards and then tried them out on a few mockups. The product brief mentioned using green, blue, and purple was finally able to settle on an analogous scheme and find hues that met AAA WCAG compliance. I found a blue that had a professional yet calming mood as my primary color and opted to use green for my onboarding.
Teal theme palette experiments
Purple theme palette experiments
I found that creating a style guide can save a tremendous amount of time when iterating designs as the guide helped keep the tone of the app more focused. Everything from the consistency of the buttons along getting the icongraphy to match my typeface helped building the remaining parts of the prototype easier, as if like following a template.
Finally, I was able to create my own logo for this app which was a new challenge since I did not want to make something that could be distracting and too elaborate. I wanted each variation to have a clear meaning and preface the microcopy in a fun and conversational way instead of being that old boring help text I had seen too much of before.
Final Thoughts
As I develop my skills further, I recognize that I am on a path of continuous learning and improvement. As I complete my last bootcamp assignment, I know that I my portfolio is never really finished and I should always look for opportunities grow and demonstrate how I can meet new challenges.