|
Perfect Properties
UI Case Study
Let’s face it, everyone needs a home. But not just any home, the perfect home! Perfect Properties here is a real estate app that helps users filter and find properties to buy, rent, or sell. The ingenuity UX UI elements that Perfect Properties has to offer can seamlessly guide users to their perfect property. This case study focuses my story from scratch to finish of how and why I designed Perfect Properties.
|
Why Perfect Properties?
A girl can dream
I’d always imagine myself waving farewell to frugal living by the end of college. Fast forwarding a few years, I was still living with 5 other housemates in a small 3 bedroom to get by. Albeit living with 5 others can be cozy at times (especially during this pandemic crisis), I often long to become a big girl and do big girl things like living in my own place. There’s just something magical about choosing loud mismatching colors of my own bedroom, or freely drilling holes in the walls to hang up an obnoxiously large portrait of my dog. That’s why in order to satiate my desire to live in my own place, I decided to design a mobile app that could help users like me to find the perfect home with ease.
|
Wireframing
It all starts with the skeleton
Having the UX portion of user stories and feature requirements all squared away, I needed to start by creating the scaffold of Perfect Properties. Because I was already browsing through hundreds of dream homes on my own wishful whim, I was comfortable knowing what the points of friction and ease are for real estate apps. So starting off was actually pretty easy. I simply grabbed a pencil and started design sprinting for 5 minutes! Then I took a break to think, and off for another 5 minutes! Repeat this for an hour, and behold I have my final wireframes!
These design sprints serve as a great tool because I can easily concretize ideas and then continue to improve on previous ideas. What some wireframes had, some didn’t. By combining the pros of varying wireframes, I created what I think would be the easiest user flow. Now that I got my skeleton down, I can start refining the designs!
|
Emotional Design
Thinking beyond my personal preferences
When I was designing Perfect Properties, I constantly reminded myself that I’m not designing for me and what I think looks pretty. If I did, I would use a truckload of blush pink and coral with cloyingly adorable icons. But wait, I’m designing for my users! I wanted Perfect Properties to be professional, clean, informative, reliable, and helpful. That’s why color, typography, white space, imageries, UI styles, and even iconography all need to work together to paint the same picture. Below are explanations of why I chose the specific elements that helped give birth to what we know as Perfect Properties!
Mood Board
I remember back in middle school, we used to cut arbitrary pictures in magazines to decorate eclectic collages as part of an assignment. I can finally say that this random skill we learned in school is paying off! Before adding the meat to my skeleton of my app, I needed to have a general tone or feel to Perfect Properties. What better way to do so than a mood board? In my mood board, I added general screens of other real estate app and real home pictures to show what kind of tone I was going for.
Color Palette
According to psychologists (and Google), color plays a critical role in setting the atmosphere of your product. That said, googling “color psychology” showed that blue expresses “trust, reliability, loyalty, security”- which was EXACTLY what I wanted Perfect Properties to convey. Thus, dark blue became my spokes-color. However, I needed to distinguish my action buttons from the symbol/logo color. After playing around with secondary colors (triad, compound, complementary, etc. etc. you name it!) it turns out monochromatic maintains the integrity and tone of Perfect Properties. That’s why I decided on a lighter and more playful blue to indicate that this is an action button.
Logo and Symbol
When I was unemployed, I thought it would be “cool” to play around with Illustrator and Photoshop as a personal self improvement project. It wasn’t till then did something incredibly simple click in my mind. A human being like me had designed that Del Taco logo! I began noticing and reflecting what makes all these companies’ logo unique. What colors did they use and why? Is the symbol and logo balanced? Does it make sense?
In my mind, Perfect Properties logo must be the two C’s – clean and clever. Again, I wanted to convey the same feelings as what the color blue would. Thus, the symbol here is a simple blue home with a “P” to represent perfect home. Butler is a serif font that’s professional but with a touch of personality. That’s why I chose this font as my logo. After creating a symmetrical house, with the “P”, I played around the placement and it just makes sense to have the “P-home” to be the “P” in “Perfect”.
The combination of the symbol and logo will be used mainly as the main trademark used in web pages, prints, etc. However, The symbol by itself will mainly be used in mobile apps, which does not have the luxury of extra space.
Typography
It wasn’t until I started learning UX UI design did typography mean anything to me. I mean the meaning of the words should convey the the words just fine right? Wrong! Not only does it need to be legible to all users, it must also have the same voice as the rest of the product!
I instinctively knew to stay away from overly used fonts like Comic Sans on the left but how do I choose? I first started playing with fonts that were already downloaded on my laptop. Yet, after what seemed like hours of head banging frustration, I couldn’t find the “right” one for either of my logo or my main app font. So I started looking for inspiration by reading UX UI articles on typography. There is a WEALTH of complementary fonts out there that people created. Although a part of me screamed for joy I found the right fonts, the rest of me cringed at how much time I wasted trying to find my own complementary fonts.
I came across Butler and Eau Sans Book OsF and I have to say that it’s not too hot, not too cold, but juuuuust right. Butler as the logo helps show that this is a professional app. And Eau Sans Book OsF was designed by a man who literally said he wanted to create the “perfect font”. I wouldn’t disagree. To each their own right?
UI Style
Iconography
Often, I reflect and think to myself “What a time to be alive!”. Technical advancements are exponentially improving and people are nonstop CREATING. And as a burgeoning UX UI designer, it’s only natural to enter this scary new world with a little help.
I began looking up downloadable icon files available online. Thankfully, after watching a couple Youtube videos on this aspect, I learned how and where to download a suitable icon list for Perfect Properties! I wanted something clean and stable, which was what I found!
Most icons are set at 24×24 pixels for better legibility; however, there are excepts for 12×12 pixels given the situation (such as login feedback or bulletpoints). Icons are usually dark blue to indicate this is the its logo color when action is not required, whereas lightblue indicates that action is possible. The navigation bar may seem “dull” but the white space helps keep the app clean and the grey helps differentiate the user from what page the user is actually on.
Buttons
I remember as a child, the best part of visiting the dentist was being given the honor to press the elevator button. Yes, the old, crusty button that went up to the 3rd floor. The way it lit up at a touch, lit me up! Even 20 years later, I still find buttons amusing. And it should be! I love the little sound, animation, or color feedback when pressing buttons on apps or even in video games. Buttons are the gateway to another world. Buttons help us navigate the world. If Perfect Properties was ever in development, I would make sure the buttons whistles and whirl!
To help emphasize the logo colors, I used mainly dark blue for the login screens/buttons. The rest of the application, buttons are light blue to indicate that this is an actionable color. It may contrast with the login page buttons; however, since most users will not see the login pages very often, the users should be able to understand that dark blue buttons are functional.
In addition, the filter page have dark blue buttons for better legibility. And since the filter page dictates all the screen, the user will not have any other color besides dark blue and white.
Imageries
Photography
Because this is an app that helps adults to find a new home, our target audience are homeowners or tenants who are able to use smart phones and computers ranging from age 25-55. Therefore, the imageries need to show what possibilities the audience has for the future. Whether it is enjoying time at home with family, or to settle down in a cozy apartment, the audience needs to understand that this app will help them find their housing needs. Photos need to be either a well designed living space or candid photos. Do not use any irrelevant or unnatural stock photo.
Illustration
However, pictures may not be appropriate for certain purposes. Use an simple illustration to help the user understand the problem.
Animation
Animations (in blue) also helps the users have a more pleasing experience and helpful feedback that the app is processing their actions. Keep it clean, simple, and dark blue.
|
High Fidelity Prototype
Is it really done?
In one of my previous job, I was known to be a fast, efficient, go-getter. I’d say my work style is more of finish a task, then move on to the next. It’s not something I’m used to to review over and over and over again. However, UX designing has really taught me to slow down when needed and think about the psychology behind the users. Then apply it. Thus, after 10 iterations, I was able to come up with what I have as my final high fidelity prototype.
|
Breakpoints
How to not lose your customers
Before starting my career as a designer, or even knowing what a break point was, I appreciated it. When browsing the internet, sometimes I would minimize and expand websites for the cool breakpoints adjustments to amuse bored myself (and to procrastinate on assignments of course).
However, now that it was my turn to create the breakpoints, I had no idea where to start. I knew that mobile first concept is key but what do I do with all the extra space? I started reading up on tips and advices from experienced UX UI designers and I was excited to know there’s actually some sort of template! For example, I could use mostly fluid, column drop, layout shifter, off canvas, and more. I also started looking up other apps and how they created breakpoints. I learned that breakpoints aren’t defined by each device, but rather when it starts looking, a lack for a better word- ugly.
So I started playing around with the spacing, alignment, etc. and realized that I needed different pictures and even different spacing to adjust for a larger screen. Since this was the first time I tried creating a breakpoint, I’d say it was really enjoyable to learn and find creative ways to make Perfect Properties look like Perfect Properties.
|
Animation
Sometimes I tell people that TV and video games raised me. Television and games was a huge part of my childhood and a lot of it had to do with the stimulating colors and action involved, not so much the plot as a child. Now, as a millennial with unlimited choices at the palm of my hand, I still enjoy TV and games even more because I can appreciate all the design work behind every episode or game.
I came to realize that it was because of these stimulating colors and movement that captivates us. After watching a couple videos on animation, it seems like many use stop and go animation. So when I was attempting to create the prototype video with animation, it was daunting. How am I, a burgeoning designer, supposed to also learn animation? However, I came across Principle, which became the software that I used to create a reactive prototype. It was intuitive to use and with a little help from Youtube, it was actually pretty easy!
|
Final Thoughts
Is it really done?
One of the most satisfying moments is to have all the final screens for my prototype neatly lined up, ready to impress. And when I kick back and sigh in relief knowing that I’m near the finish line, I think about why I find it satisfying. Even after going through the whole process, I still had to make iterations after iterations to “perfect” Perfect Properties. From adjusting alignment issues to minor tweaks, these things take time!
All the effort, thought, and hours put into a this creation of mine, I am finally done. But am I really? Nope! This is just another small step to improving myself as a designer. I came across some readings that to be a great designer, I just have to keep designing. Why? Because I learn as I design! That’s why even though this project is over, I still have much to work on to be the best designer I can be.
|