© 2018 by silviuserban.ca. Created with Wix.com

  • Twitter App Icon
  • LinkedIn App Icon

    During the user research process, I had to pivot my project (from customers dealing with car dealers to customers dealing with auto garages) because the people I interviewed were discussing their recurrent issues with their mechanics. 

    Sometimes, during user testing, my users’ feedback was inconsistent for the same item, so I had to make a decision—my own. But I have the confidence that after so many iterations, my app is in a much better position to be appreciated.

    While the whole project was a tremendous learning experience, I especially loved doing research, looking at different sources of information, and putting all those things together to create my interview questions. Also, I have enjoyed iterating the prototypes and testing those new designs on users.

 

    During the Demo day

 

“Your app seems to be so clear to use. And it is useful.” - a visitor

“You address an issue that exists in the automotive industry: lack of data about auto garages” - a visitor

Example: The Filter function

PORTFOLIO

WrenchTalk App is a tool that car owners need to use to have their cars repaired on time, at a reasonable price, and as conveniently as possible.

 

For more details, click here.

WrenchTalk App

Conversational UX Projects

WrenchTalk App

The brief

      Starting with my experience with customers in the automotive industry, I wanted to find out how difficult it is for car owners find reliable mechanics or auto garages locally. Using competitive analysis, I found out that there are no specific apps to help these car owners.

What I did

 

 

      I developed a digital tool, WrenchTalk, which helps car owners to have their cars repaired on time, at a reasonable price, and as conveniently as possible. My role was to research, design, and prototype.

Key tools and deliverables

  • Mobile app 
  • Responsive web  for desktop and mobile (Sketch, InVision) 
  • Wireframes (Sketch)

  • Mockup (Sketch, InVision, and Youtube)

Results

 

 

      Through user testing, I significantly improved the prototype. Even though I did not launch this prototype on the market, I had some reviews from the people who were genuinely interested in my product. Specifically, when I showed my product during an open-house event, I had some feedback:   

 

  • The mobile app and its current functions were clearly understood.
  • Visitors noted the usefulness of this app; some of them told me to contact software companies that do similar products and propose my app to them.

​​​

Finding a reliable car mechanic or an auto garage in short period of time.
Ideate and Prototype

 

      The creation of personas and user experience map led to defining and refining the user stories. The user story that I have decided to develop was: search auto shops/filter/sort, using specific criteria, based on my research.

      I started out with paper wireframes; then I translated them into low-fidelity wireframes to think through the structure of a mobile app. I used Sketch and InVision to iterate through the design process.

      I showed a series of medium- and high-fidelity prototypes to my colleagues and instructors; through many iterations, I have changed the filtering/sorting criteria.

Test

 

      Initially, I had 5 users to go through several tasks, but for the next iterations, I presented the series of prototypes to a more significant audience, and the way they interacted with my prototype showed me that I had to make substantial changes.

      More specifically, through testing a series the high-fidelity prototypes, I identified I could improve the filter and the sorting by defining more strict criteria, better copywriting, and a more user-friendly manipulation for changing distance, to help users find the auto shops they need.

Empathize & Define

 

      Working in the automotive software industry, I had the chance to speak with hundreds of customers, car owners or dealers, and see what their pain points are. One of the issues was a sense of distrust, which my secondary research supported it.

      Initially, my focus point was to create a tool that would build trust between car owners and dealers, but after conducting user interviews, I had to pivot to a slightly different area: car owners have a difficult time to find trustworthy mechanics.

      As a result, I defined and refined the personas and the user experience map. 

      My hypothesis became, “I believe that when car owners are going online to express feedback and interact directly or indirectly with auto repair shops/mechanics, they will achieve higher levels of satisfaction and trust. I will know that this is true when more customers will be actively using WrenchTalk.”

      The main question is, How might we help car owners provide meaningful feedback to auto repair shops?

Samples of findings from user interviews

 

Before customers buy their cars, they do extensive research online, some ask a friend or an acquaintance to help, or use brochures.

    

I found out that some female customers feel that they do not have the same leverage as men when it comes to knowing about cars, so they use the services of a middleman who deals with the auto repair shops.

 

Customers do not trust car dealers, or mechanics, at garages because they are pushing customers to buy stuff that they do not need, or are trying to up-sell.

    

Sometimes these mechanics are hard to understand, and they do not ask for feedback or do not seem to pay close attention to customers’ problems.    

 

The most critical concern for many customers is that they do not know how long their cars are going to last, and that maintenance is increasingly expensive.    

 

Customers prefer a nearby auto repair shop, where they can talk to someone they can trust.

Samples of secondary research showing customers’ perceptions and feelings when they interact with car dealers.

About this information architecture

The organizational chart also shows user story that I worked with during this project.

 

A user performs a search by entering a location, then a results page is displayed, with auto shops in the area where the user lives.  Users can either filter or sort the results. 

 

If users filter the results, then they can also sort them, obtaining a customized display

Empathize & Define: Information Architecture
Stages of developing the app
Empathize and define: Insights

WrenchTalk: A sneak peek

 

The first sketch of the filter function, in paper format

This is mid-level prototype of the filter function

A high-level prototype of the filter function. Notice how the radius could be changed

This is the final prototype of the filter function. Notice how a user could change the radius this time

Empathize & Define: Personas
Lynda
 
Motivators:

"I like reading reviews online, pros and cons; saving time."

 

Pain points:

-mechanics are expensive, and some of them do not appear to respect women; Lynda also finds that mechanics’ jargon can be a challenge.

Empathize & Define: Personas
Hans
Motivators:

"I love cars; saving money; keeping my car in top shape."

 

Pain points:

"Mechanics are trying to up-sell; I still do not have a good mechanic; the way they talk about technical issues can be hard to understand sometimes."

Empathize & Define: Personas

This view is the results page after a user performed a search, which has a filter-based feature and a sorting function.

 The sorting view shows different criteria: alpha, repair time, nearest shop, and overall quality.

This view shows the profile of an auto shop and its location on a map.

Locating an auto shop: the customer needs to enter the name either partially or entirely in the search field.

I decided on a layout that consists of a search-view, a results-view—including a filter-based feature and a sorting-based view—an auto shop profile view, and an evaluation view.

Based on the results displayed, users can view, evaluate or review a specific auto shop.

Users can evaluate an auto shop by clicking on stars.

This view shows the profile of an auto shop and its location on a map.

Several user testing sessions pointed out to how the information should to organized, and how material.io  standards are essential in the economy of my app. As a result, I had to go back to research and find apps that were functionally closer related to mine.

 

This results page could be filtered and, or, sorted.

The user has the option to filter auto shops by clicking on the stars and select and change the radius of a circle.

Users can select sorting criteria from the displayed selection.

Based on the results displayed, users can perform different actions (filtering/sorting) on a specific auto shop.

The user is able to filter the evaluation of an auto shop and adjust the radius of search with an index.

This view shows improved selection criteria for sorting auto shops.

The user has already logged into her account and could perform a search using a postal code.

The user has already logged into her account and could perform a search using a postal code.

The user can filter the evaluation of an auto shop by sliding a finger to change the radius.

This view shows improved selection criteria for sorting auto shops.

Just like most of this project, the mockup focuses on two main functions: filter and sorting. So, the user enters an address in a search field; gets all the auto shops within a certain radius; can filter mechanics by distance and/or evaluations, or can sort the results using a set of criteria.

 

Before

Using Sketch, I developed a prototype of a responsive Web site for WrenchTalk. On the mockup computer screen, you can see a sample of this prototype (the 3rd part of the site).

After

After user testing, I have changed the typography, the background and the copy, some functions (not visible here) and the general look of the prototype.

Before

 

Also with Sketch, I created a prototype of the mobile version of the responsive website.

After

 

User testing was beneficial in deciding to change the typography, the background and the copy, and the general look of the mobile prototype.

Ideate & Prototype: Sketches

Locating an auto shop: the customer needs to enter the name either partially or entirely in the search field.

Ideate & Prototype: 1st prototype—low-level wireframes

Users have already logged into their account and could perform a search.

Using those sketches as a reference, I created the first low-level wireframes, where I was planning to include, in addition to filtering and sorting, other features such as viewing, evaluating, and writing reviews for an auto-shop.

Test: 4th prototype—mid-level wireframes

The user has already logged into her account and could perform a search by entering an address.

Test: 5th prototype—high-level wireframes

The user has already logged into her account and could perform a search, using a postal code.

Several user testing sessions pointed out to how the information should to organized, and how material.io  standards are essential in the economy of my app. As a result, I had to go back to research and find apps that were functionally closer related to mine.

 

Test: 9th prototype—high-level wireframes

This iteration contains some significant changes after more user testing: search by user’s preferred location, using an actual name and not a postal code (my users prefer words and not postal codes); filter uses ranges of evaluations, and slide for setting the radius. What I changed in the sorting is based on users’ ratings, price range, most reviewed auto shops, and distance from users’ locations.

 

Test: the mockup
Marketing the WrenchTalk app, using responsive web: the desktop version
Marketing the WrenchTalk app, using responsive web: the mobile version

WrenchTalk App

Learnings

 

     One of the things I learned was that I had to perform extensive research to see what interface/GUI models should I use.

 

     Preparing precise questions during the research process helps to refine user stories earlier later on.