Research
This project is the culmination of my work toward a UI specialization course for UX Designers. Since my focus was UI Design, CareerFoundry provided me with the persona, user stories, project requirements and initial user research. The rest of the work is entirely my own.
Ideation
After reviewing the information I was given, I explored similar apps on the market to deepen my understanding of the problem space. I found that app users like Rashida were most concerned about saving time, but they also expect to see class and professionalism in the technology they use. With these findings, I started to imagine the possibilities for an app that would impress my target audience.
My wireframes started out complex and became simpler after a few iterations. Initially I wanted to increase functionality from a UX mindset, but I recognized this early on and made the decision to scrap a couple of extra features that were intended to level up the user experience. This step was crucial in allowing me to invest more energy into my UI design in consideration of my time restrictions and project requirements.
UI Design
My persona Rashida works in tech, and likely carries a subconscious set of expectations around the quality of an app based on its appearance and style. This set of darker, earthy colors suggests professionalism and luxury, and this promotes the feeling of trustworthiness that I needed out of a property finding app.
After finalizing my design, I moved on to document my decisions into a comprehensive style guide. This was a simple task because I kept all my previous work easily accessible and organized, but it will be invaluable in supporting anyone else who may work on Dwell in the future.
The following screens show the changes I made in refining the color palette, creating an icon set, choosing typography and images, adjusting the layout and visual hierarchy, and converting my wireframes into interactive prototypes. Each iteration added a level of refinement of my design, and I used Figma shortcuts like color tokens and components to make widespread changes as efficiently as possible.
Mockups
The next step was adapting Dwell for different breakpoints by adjusting the layout grid for each screen size and restructuring the visual hierarchy to create a responsive web design. Because I created mobile layouts first, it was a simple process to convert everything to fit larger screen sizes.
Reflection
I enjoyed the process of making Dwell and learning about UI Design more thoroughly. It was interesting to work on this project after completing my UX Design course because I kept wanting to dive deeper into user testing and research to validate my decisions. The feedback I received from my mentor was helpful in allowing me to see outside my own frame of mind. The next time I'm working on a similar assignment, I believe it will be worth the extra time for me to conduct a few interviews and usability tests independently so that I can be sure my choices are ultimately meeting the needs and wants of my users.
Thank you for reading!
