CONSUMER DATA REDESIGN

design challenge

THE PROBLEM

Connery has been receiving feedback from users and stakeholders that the Purchase Intelligence page feels disjointed and it's difficult to know where to look.

THE PROPOSAL

Redesign the page with improved functionality, layout, and updated style based research data and feedback.

TIMELINE

April 2022

ROLE

UX/UI Designer

TOOLS

Adobe XD

USER FEEDBACK

“It looks disjointed"
“I don’t know where to look”
“What’s a comparison group?”
“What does performance mean?”
“Why are there so many asterisks?”
“I can’t read the text in Comparison Groups.”
“Where’s the Help page?”
“How do I search?”
“The content doesn’t look good when I project for demos”
“That purple is my least favorite shade”
“The icons are too cartoony”
"I like the icons!"

Old User Interface

BACKGROUND

ASSUMPTIONS

Lead UI Designer on Purchase Intelligence
Working directly with Product Manager and scrum team
Assume that all the current data on the page is what is needed

RESEARCH

Studied Connery website
- To understand purchase patterns/trends
- To match style
Competitor analysis
- Consumer research data reports

PROPOSED CHANGES

IMPROVED IA / HIERARCHY

Focus on being concise and digestible
Eliminate unnecessary elements
Clearer hierarchy between sections

IMPROVED LAYOUT

Keep columns but restructure content
Better use of whitespace
Page should be clean, intuitive, and logical
Responsive design

STYLE CONSISTENCY

Update color scheme
Better readability throughout
Match Connery website style for consistency
Icons to match in weight and style

NEW SITEMAP

USER JOURNEY

REDESIGN – VERSION 1

Initial Sketch

High-Fidelity Wireframe

USER FEEDBACK & IMPLEMENTATION

“Overall it looks much cleaner, more modern.”
“I’m still confused by these columns."
"What is this supposed to mean?” [referring to bar graphs in first cards]

– Middle School Teacher

“I can quickly see top performing products on the cards – is this important?”
"Are these supposed to be tabs on the same box?"
“I think the icons with colorful gradients are a good mix of fun and serious.”

– Chief Product Officer

VERSION 2

Removed pie chart and added callouts to sum up each section

Added more descriptive text and tick indicators

Modernized bar graphs for stronger data representation

Changed Purchase Drivers

to a bar graph

But is this really solving the problem?

EVALUATION & FINAL VERSION

Asked for feedback and self-evaluated for further design solutions
What could be made more efficient?
Are there more important UI elements and data to have on this page instead of products?
- product images are appealing, but are they necessary?
Goal was to tell a story in numbers

VERSION 3

Added more key takeaways for quick snapshot

Expanded Purchase Drivers into separate card

New overview section

ORIGINAL

FINAL VERSION

IMPROVEMENTS

Clean, modern UI with updated typography and style
Improved hierarchy and layout for better use of valuable space
Captivating data visualization with easily digestible callouts
Balances the goals of the business and user