“When Design is just a way of life.”
As a student of Career Foundry, I designed Living Design - a responsive web App designed to offer busy people a bespoke service with a portfolio of carefully curated design-led homes.
Have a look at the Living Design draft idea UI prototype here
01 | Project Overview
Objective:
To design a responsive web app that provides busy property buyers with inspiration and information on design-focussed properties of interest. Buying a home is one of the biggest purchases people make so it’s vital that, when design is important, there’s an App that offers curated properties with a more personalised experience and premium service.
The product:
There are plenty of real estate Apps out there but few that offer extraordinary living spaces. Property Apps typically aggregate properties and there's less focus on offering a bespoke service experience for busy individuals. Our App provides a service that removes the stress around finding the perfect home and users can relax, knowing their needs will be met.
The Design Process:
02 | EMPATHISE
Living Design primary persona: Summary outline
03 | Ideate
From there I took the User Stories information provided in the project brief and built the user flow to help design, plan and visualise the tasks that would need to be serviced by the screens that would enable Rashida to achieve her goals.
User flow diagram for Living Design responsive web App.
04 | Design & Prototype
From analogue to digital: the process from pen & paper to the Interactive prototype.
Using my user stories and the resulting user flows, I started to mock up ideas for the key functionalities that would be needed in the App sketching simple wireframe ideas:
Low fidelity mobile wireframes.
Landing Page: Low fidelity responsive breakpoints:
Low fidelity responsive breakpoints
Low to Mid fidelity
The next step was fleshing out the low-fi details into mid-fidelity wireframes, adding UI elements like text, initial icon ideas, menus & buttons to show how the functions and interactions work for the user.
Mid-fi wireframe of task for Rashida to search & save her desired property
Mid-fidelity wireframes for Living Design task flow.
Mid-fidelity breakpoints:
Bringing the Design to Life in High Fidelity Prototypes
How I created the Hi-fidelity Wireframes:
Creating the brand DNA: Mood Board
As part of establishing the brand DNA and the 'style handwriting', it was helpful to create a mood board to curate my ideas and confirm the visual style and tone for the Living Design App.
Mood board for the Living Design App
05 | Visual Guide
Living Design: Colour Palette:
Living Design: Logo
Living Design: Typography
Living Design: Imagery
Living Design Imagery guidelines
Living Design: Iconography
Living Design: Ui Elements
Find out more about the Living Design Style Guide here
06 | VISUAL CONCEPT DESIGN OF MVP
Living Design High fidelity Mock Ups
High Fidelity Responsive Breakpoints
07 | Interactive Prototype in Action
Conclusion
My UX course was an exciting and insightful journey in the art and science of UX design & this UI specialization project, Living Design, complemented and cemented so much of what I learned.
In particular, the focus on the UI allowed me to think much more about how the details in UI could not only help serve the aims and aspirations of the UX design, it also enhances and refines the user experience.
The brief was an interesting one and I enjoyed being able to tweak it slightly to think about the design in the context of a premium property search responsive web app - what that would look and feel like.
This process would have benefitted from a deeper dive into users who would need to use this app, their impressions through testing and the resulting iteration of the design. I also enjoyed the challenge of focusing on the level of detail that the UI aesthetics & interactions need and how small changes can make an important impact.
My plan to improve this initial design:
1) Expand more into the Desktop experience and UI design as I think for this user that would be an important experience to flesh out.
2) Explore the User Journey from a Property Agents point of view to see how I would tackle the design from their needs and motivational point of view.
3) Do more thorough testing on both functionalities, the user journey and the UI details & iterate the design from there.
Thanks for your attention to Living Design, I hope you enjoyed it as much as I did.
If you'd like to connect, please get in touch via this link or head to "Contact"
