OVERVIEW
Role: UI Designer
Tools: Adobe XD, Photoshop
Application: iOS, iPad, Desktop
Real estate investment is an increasingly popular way for individuals to achieve financial security. It is an exciting and emotional experience, but often complicated. WiLo web app will provide them with the expertise needed to get started efficiently. This web app is made primarily for new, small-scale property buyers who are looking to invest for additional income or financial security. Unseasoned buyers need access to reliable, uncomplicated information about their potential property investments. Buyers get a feel for a place by viewing comprehensive information about the property and its neighborhood before spending time on-site.
UNDERSTAND
EXPLORATION
Mood Boards
Both mood boards provide different feelings and tone for the web app. Mood board #1 (left) expresses comfort while rustic, emphasizing through the wood accents and indoor plants. It'll serve users to feel more in part with nature and bring on a warmer vibe. Mood board #2 (right) has a more modern, corporate energy using more softer shades of blue and gold accents. The color scheme communicates trust, relaxation and professionalism to our users.
I've proceeded with mood board #2 (right) as it falls more in line with my user persona, Rashida, being in corporate tech and possessing interest in modern technologies and ideas. I want my users to take the web app seriously as they would with their investments.
My wireframes were designed around the principle of mobile-first design and focusing on the main functionalities as indicated by our persona. The objective during this phase to eliminate irrelevant material and demonstrate high-level scenarios for the ease of being able to communicate and maintain transparency with stakeholders and users.
STYLE GUIDE
I've created a visual style guide that consists of WiLo's visual design components and UI elements. This document will help maintain brand & UI consistency during development handoff and for other UI/UX designers working on a similar project.
RESPONSIVE DESIGN
With this project being focused on implementing a responsive web app, I've created different breakpoints to properly adhere to various devices such as desktop, mobile and tablets. They are all aligned over a 12 column grid, allowing consistent layout across multiple pages. My objective was to display the most important assets and maintaining simplicity across all devices.
MOCK UPS
Mockups are used to present visualization of device screens on various devices with different breakpoints to demonstrate the web app's responsive usability.
INTERACTIVE PROTOTYPE
TAKEAWAY
This case study being focused mostly on the UI design aspect, I've learned not to neglect the end-user goals and maintain empathy throughout the process. I've had occasional moments of focusing too much on how the end product will look from icon elements to color schemes and patterns. It helped to have visual accessibility to the project brief, including user research data & their specific needs to vector my designs towards the objective. Going through multiple iterations in order to improve ease of use and navigation, I needed to re-organize my goals timeline in order to meet deadline expectations.
CREDITS
I appreciate Michelle C. for providing constructive feedback and guidance from beginning to end helping me improve my UI design skills and encouraging to think more outside the box.
