AutoMD is a site designed to shift the power to you when it comes to auto repair. You just enter your location, vehicle information, and either select the service needed or get a diagnosis, and in seconds you'll see a list of shops in your area and their price for that service. You can then see customer reviews of that shop and book an appointment right on the website. Though it wasn’t always so easy…

When I started at AutoMD in mid 2013, their website was not responsive, made for desktop only, and looked just like this:

Throughout my time there, I made it my goal to redesign every page as responsive in order to adapt to new design standards as well as improve SEO. I worked closely with our development team and we leveraged the responsive framework, Bootstrap, which helped guide the UI.

As a team, we built a UI style guide that any new dev team member could then use to easily build new pages and functionality with our brand styles intact.

When it came to the homepage, it needed to do a better job of telling the story of the AutoMD brand. An impactful image of an auto repair customer being assisted by a mechanic helps set the tone that we’re here to guide you through your next repair. Previously there were several dropdowns menus in the form, though not everyone coming to AutoMD wants to dive into that feature, so they were visual clutter. Instead, I opted to collect the user’s ZIP code first (they were only available in select cities, after-all) before displaying more necessary form fields for getting a repair quote on the next page. This allows the eye to easily move down the page and see more of how it all works in easily digestible blocks of content.