Dallas Area Locksmith
A website that connects Dallas residents to locksmithing services.
Role
UX Designer / UI Designer / Front-End Developer
Skills
UX Design / UI Design / Design Strategy / Visual Design / Branding / Content Strategy
Approach
Understand↓
Goals, customers, and success metrics
Research & Discovery ↓
Pin down our goals and empathize with our user
Design & Develop ↓
Brand & visual design, and development
Overview
Context
My sister locked her car keys inside of the car. We searched Yelp for a local locksmith that could come in the next few hours. We found Dallas Area Locksmith. This locksmithing company had great reviews on yelp and they quoted us an affordable price. The owner of Dallas Area Locksmith, Nathan, was the one who serviced us. I noticed he did not have a website, so I asked if we could sit and discuss how a web presence could help his business.
Dallas Area Locksmith needed a website that would reflect their brand, attract customers, and serve as an avenue to educate clients on their services. I designed and developed a website with their target audience in mind. The main goal of this site was to increase ROI through inbound calls & 5 star reviews on Google.
01
Understand
Understand
I conducted Stakeholder Interviews to understand my client’s goals for his business, who his current customers were, and how we measured success.
Questions asked during Stakeholder Interview
Business goal
Get more customers - measured through inbound calls and more reviews customer’s leave
Customer segment
Dallas Area Locksmith’s customer consist of a lot of people who need emergency automotive unlock services. Most of their customers were currently finding them through Yelp & Google
Opportunity
To create a website that drives more inbound calls
02
Research & Discovery
User Interviews
I didn’t have to look far for my ideal user. I conducted user interviews with my sister to better understand Dallas Area Locksmith’s customers and how/why they made a decision to select Dallas Area Locksmith. I broke down my questions into 3 segments, biographic, biographic leading to service, and service oriented questions.
Questions asked during user interviews
User Goal
Continue about their day as quickly as possible
Outcome
Retrieve their keys from inside the car
User story
As someone who relies heavily on their vehicle, I want to find a locksmith that is reliable, affordable, and quick, so that I can get back to my daily responsibilities
Customer Journey Map
In order to understand areas where design could provide an ideal experience for our customer, I did a Customer Journey Map with our persona user.
Customer Journey Map, I was able to interview my sister about her experience
Trust & Time
Need to provide Dallas Area Locksmith’s customers a way to get from research to selecting in a faster way
Transparency
Customers need a way to know they can afford this service
Site Map
I designed a site map that would meet content strategy needs. The site map took into consideration the insights we uncovered during customer journey mapping.
I ensured the user would gain trust by including reviews on the home page and also have transparency by including pricing and a CTA to get a ‘Free Quote’
03
Design & Develop
Design & Development
Design
Dallas Area Locksmith didn’t have a logo or a brand style, so the first thing I did was create a simple logo and provide a light style guide that included colors and typography styles.
Design - Wireframes to Photoshop
I began with pen + paper and wireframed the site. I wanted to make sure I was addressing the insights that were discovered in Discovery during Customer Journey Mapping. In order to do that, I ensured we included Yelp reviews, as well as a CTA to get a free quote and pricing all on the home page - the first page the user lands. I then designed the high fidelity mockups in Photoshop.
Wireframes of home page
High fidelity mockup of homepage
Development
I did not only design this site, but I also coded it. It’s a static HTML, CSS, JS, & Bootstrap site. Formspree.io was used as a secure way to connect web forms to email.
Code from development
high fidelity mockup service areas page
high fidelity mockup home page
04
Outcomes
Metrics
Going back to stakeholder interviews, we needed to measure success by incoming calls and increased number of high reviews.
Stakeholder Interviews
5-star reviews from Google My Business