Clarifying
Information Architecture
This screen was used by associates when selecting services for customers' cars. The customer was always present and the device used was an iPad locked in landscape mode.
Business Context
Old Services Menu Page
Audit of old information architecture of Services Menu Page
Old Information Architecture
I couldn't make sense of the Services Menu Page. When I asked my team mates and stakeholders, nobody seemed to know what its information architecture was based on.
The first service, Car & Light Truck Tire Installation made up 70% or more of services performed. Lifetime Tire Repair came second with 20% and the rest of the services shared the remaining 10%. Seasonal Change Over came in dead last, because it was only offered in 5% of locations.
So broadly speaking the order was logical. I could also see how the previous designer was trying to go for a calm design with lots of whitespace. Unfortunately it forced associates to read every word on the page, rather than scan.
Information architecture that makes automotive sense
Fewer buckets and more economical use of screen real estate
First Draft of New IA
First Draft of New IA
Fewer buckets and more economical use of screen real estate
First Draft Redesign
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 addition of a status row near the top that shows the current context was a result of talking with end users. 'Recognition is better than recall' still applies. It was well received by all involved.
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
)
More Projects
Highlighted Projects
Design Process
