Background:
Hire A Helper is a company that helps connect people to movers in the areas they are moving from and to. I was hired to help design an MVP they plan to release Fall 2016. The new product, informally called the Move Builder, is meant to streamline the moving process. It not only connects users with movers, but also helps users get a quote on moving trucks and other services to help complete their move. In short, it helps user “build the perfect move.”
Because this product is not yet released, I have omitted and obfuscated confidential information in this case study.
My Role:
When I joined the team, user stories were already created and the basic functionality was already decided. My role was to create the wireframes and the final screens for the product.
User Stories:
My first task was to review the user stories already created and to see if there were any that needed to be added. As a team, we discussed what features were most important and what features could be saved for a future update. Because there is so much information we need to share with each user, it was decided to have the user fill out a form to tailor the results to the users.
Information Architecture:
Because this is a web product, I designed the mobile version first before moving onto the tablet and desktop versions. This approach put emphasis on content hierarchy and structure.
Once a user fills out the form, there are three levels of information they must click through to access “their move”. There was much debate on the best way to display these three levels, or “cards,” as we called them. It was eventually decided on a nested doll approach. This made the information at each level easier to focus on, while making it more clear to the user where they were in the process.
Form Details:
To make sure the form was easy to use on mobile, I focused on the interactions users would have with each form field.
Prototype:
Using InVision as our collaboration and feedback tool, I iterated many different versions of wireframes. Each version allowed the team to click through the screens and provide feedback. Through this iterative and collaborative process, we quickly approached the final site structure. Using the existing Hire A Helper style guide and website as a guide, I created the final UI screens.
In Progress:
Since finishing the visual design, I have been working with the development team, providing icons, hex values, and other details. This product is still in development. This section will be updated as data is released.