Quote App
USABILITY + App Design + Responsive Marketing Website Design
This project is the outcome of a ten-week immersive bootcamp on User Experience. The concept of Quote is to reinvent the renovation process through efficiency and communication by connecting homeowners and contractors.
The Creative Process
Journey Mapping | Sketching | Wireframes
Empathy Mapping
The process began with being able to empathize with the target audience. An empathy map was created which noted down what users would hear, think/feel, say/do, and see.
Persona Creation
Creating a persona helps to give a better representation of the user. It helped capture the users personality, goals, needs, and frustrations.
Journey Mapping
After creating the persona, a journey map was used to show the process of the user from buying a home and going through the high and low points of renovating. Assumptions and a hypothesis was then made in respect from the journey map.
User Flow
Following sessions of user research and market research, a user flow was created to best cater to the needs of the user. This flow shows how a user would simply go through the project creation process to managing their own project.
Sketching
Preliminary wireframe sketches is a creative approach to exploring possible solutions quickly and a way to jot down any ideas.
Digital Wireframe
Moving to digital wireframes was the next step after deciding that a viable flow and design was created during the sketching phase.
User Testing
An extremely important step is to conduct user testings, what works and what does not make sense will be pointed out by the users. Prototypes were created through InVision for a way to easily show users the flow of the App.
Iterations, Iterations..
After conducting user testing is a never ending process of iterations. The design and the process can continuously change, and there is always a solution that can be better than the last, thus, iterate...iterate..iterate.
Designing the Experience
Experience Mapping | Hi-Fidelity Mockups
Through many sessions of user research, it was verified that homeowners have had extremely poor experiences with finding a reliable contractor that does good work. There was a lot of confusion with the many different types of materials on the market.
Keeping the intended user in mind, elements and design features were created to specifically target this audience. The goal to simplify the renovation process was to create a seamless “step-by-step” approach from creating a project to receiving an estimate. “Posting” their estimate on a job board allows for matching of a suitable contractor. Both parties are able to manage and share their projects by creating “idea notes” containing photos, links, colour choices, and chat logs. This feature helps to minimize miscommunication and to better understand design choices.
To aesthetically create a design with a clean and simple focus in mind, the process took many iterations through sketching, wire framing, and user testing before being able to develop high fidelity prototypes. As this App will be used during a stressful period, the design consideration was to use an uncomplicated task oriented approach to prevent anger and confusion.
Logo Design
Sketching | Iterations | Final
The design inspiration for the logo was taken from an attempt to visually capture both personas of the homeowner and contractor. Through many iterations of the process, elements from a bolt was applied and transformed to incorporate a house in the negative space of the quote. The two symbols of the quote in contrasting colours represent the two personas of the product.
Colours chosen for this product was deeply influenced by the target audience and the concept of the application. A turquoise green helps with clear thinking and decision-making that assists with organization and management skills. Green by itself is the colour for growth and renewal portraying certain aspects of the product. As the renovation process can be extremely stressful, the accent colour pink helps to calm and reassure the mind.
From an attempt to design for androids, strict guidelines for material design were taken into consideration when designing all elements of this application.
UI Style Guide
colours | fonts | style
UI Style Guide
Quote Responsive Marketing Website
Web & Mobile
To promote the product, a simple responsive website was developed that focused on the key features of the app while making it personable to the two different personas. A scrolling page layout easily displays all relevant information by keeping users engaged presenting features and life images of users.. Adhering to the clean and simple aesthetic of the brand, the experience here is to reveal to the audience a tool that is reliable and painless while retaining the excitement and joy of the process.