Clarifying Information Architecture
This Services Menu was used by associates when selecting services for customers' cars, so it was the starting point for every transaction. The customer was always present and the device used was an iPad locked in landscape mode.
Business Context
- Information architecture that makes automotive sense.
Scannable service names.
- Better use of screen real estate, so associates get an overview of services without needing to scroll up and down
Once I knew that this screen was fair game, I set the following redesign goals:
Redesign Goals
Before I barge in and redesign something that doesn't make sense to me, I always talk to my fellow designers on the project. That way I don't open a can of worms that they've spent many sprints keeping a lid on. In this case, current and previous designers were unable to shed light on what the IA was based on.
The next step is to bring it up with Product and Engineering, and then the Subject Matter Experts. In this case the SMEs had insisted that the two services that made up 90% of the volume were the first two services in the menu. They had left the rest up to the design team.
Due Diligence
Information architecture of old page appears arbitrary
Services Menu Page - hard to scan and missing prices
Old Information Architecture
I couldn't make sense of the Services Menu. To take the most obvious example from the table above, the No-Charge Services heading includes 3 out of 8 no-charge services. Why were those 5 services excluded?
In the new chunking, the importance of the different service types is communicated through size and placement. Users also get an instant overview of all available service types. This allows less experienced associates to appear competent when discussing services with customers.
Perceived competence is a key metric in mediated user experiences. It correlates strongly with trust. In past customer surveys a lack of trust had been identified as a reason why some customers didn't make use of the offered automotive services. So it was important to improve customers' trust through improved user experience.
Perceived Competence
IA categorized by parts type
Redesigned chunking
Updated Information Architecture
First draft design gives a better overview
I got great, actionable feedback from my fellow designers on this draft of the design. The most important points were about adding more whitespace and to make it more obvious what was a header and what was a service.
The screen below was the result of the feedback I got. It did very well in user testing. In fact, I got the response that the screen made sense from both SMEs and end users.
First Draft Design
Many lay people do not know that the cost to own a fund varies widely. The cost can and will eat into any profits you make, so it's one of the most important considerations when investing. To help our customers understand that, I designed four variations on a Cost-to-Own feature with the help of our financial SME.
Cost to own
1. Text only
I included this version in the user testing only because it would require minimal Development effort. We'd simply add a line to the details boxes at the bottom of the page with a cost estimate.
4. Interactive slider
There's even less information in this version, but I think that if we can get users to engage with it, the impact will be much stronger.
3. Static bar graph
There's less information in the bar graph, because it assumes that you've invested $10,000. But the visual impact is greater than with a table.
2. Table
A new section on the page, with a table showing how the cost grows over time and with higher amounts.
Cost-to-Own Wireframes
1. Text only
I included this version in the user testing only because it would require minimal Development effort. We'd simply add a line to the details boxes at the bottom of the page with a cost estimate.
4. Interactive slider
There's even less information in this version, but I think that if we can get users to engage with it, the impact will be much stronger.
3. Static bar graph
There's less information in the bar graph, because it assumes that you've invested $10,000. But the visual impact is greater than with a table.
2. Table
A new section on the page, with a table showing how the cost grows over time and with higher amounts.
Cost-to-Own Wireframes
)
