As a project lead for Scout, I lead a team of two designers and two developers on a web application project. Our client, Agentless, was looking to create a web application that would take users through the home buying process online, removing the need for a real estate agent. Our team’s job was to design and build a product that would follow these goals, as well as create an identity system to fit the company.
Logo Brainstorming
For the identity design, we began by mocking up different iterations of logos that incorporated the ideas of home, process, and independence.
Patterns, Illustrations, and Icons
We settled on a mark of a house with a folded corner to symbolize the paperwork behind the home buying process. Once we had a final logo, we moved on to illustrations and patterns, which the client was highly interested in having. For the illustrations, we created two different styles: a linear style and flat, layered style. These could be used in different places throughout the UI. From there, we created a series of patterns that could be used as backgrounds.
Illustrations
We created an illustration for each step in the home buying process. These steps would be used in the UI to educate the user.
Web Application
During the design phase, we were also working on wireframes for the web application. The project involved a lot of research into the home buying process to fully understand the prototype and all the steps we would need to include. Once we understood what the application would need to be, we created a prototype on Invision for user testing.
User Testing
During user testing, we found that people were confused about what Agentless does and what steps they would need to go through.
UI Design and Style Guide
With these comments from user testing in mind, we refined the wireframes while also moving into UI design. We looked at sites such as Turbo Tax for inspiration to create a bright, clean interface that didn’t overwhelm the user. The incorporation of the illustrations towards the end of the project really helped bring out a personality in the prototype. At the end of the project, we created style guide that illustrated the brand guidelines we had designed.
