The Practice
The Practice
Empowering teams with clarity and vision to create with confidence
Success Metrics
Unified Vision of Success
Optimal Prioritization
Clarity & Confidence
Human-Centered Strategy
Case Study
Cisco’s Homepage Redesign
Visit site
Visit site
Objective
Prioritize the redesign of Cisco’s homepage as part of their evolution of the design system and ongoing commitment to digital innovation.
The Problem
The project did not kick off following HCD method. The marketing leadership team provided a content framework and a list of business requirements and requested the new homepage to be launched in 4 months. How do we simultaneously fulfill the business needs and the short launch window, while at the same time educate and convince leadership of the importance of following human-centered design methodology and deliver the best homepage experience for our customers?
The APPROACH
To fulfill the immediate business need and set the standard for human-centered design thinking, we rallied with dev and brand teams and broke the project into 2 phases.
Phase 1
• Organized the team into 2 tracks to fulfill MVP requirements, and begin testing prototypes
• Performed a quick competitive assessment to establish industry benchmarks
• Started conceptualization, designing page layouts, wireframes and prototypes
• Created a UX vision brief, north star and UX pillars and socialized with leadership
• Organized content requirements with our editorial team
• Directed brand team on a $200k photoshoot
• Coordinated content creation and copywriting
• Launched the new homepage in the 4 months
• Started working in 2-week optimization sprints.
• Performed a quick competitive assessment to establish industry benchmarks
• Started conceptualization, designing page layouts, wireframes and prototypes
• Created a UX vision brief, north star and UX pillars and socialized with leadership
• Organized content requirements with our editorial team
• Directed brand team on a $200k photoshoot
• Coordinated content creation and copywriting
• Launched the new homepage in the 4 months
• Started working in 2-week optimization sprints.
Phase 2
• Organized a/b testing
• Created a testing proposal and testing plan.
• Organized team into 2 concurrent workstreams; innovation and maintenance
• Took inventory of audience insights and performed gap assessment
• Developing a customer research brief and proposal
• Created a testing proposal and testing plan.
• Organized team into 2 concurrent workstreams; innovation and maintenance
• Took inventory of audience insights and performed gap assessment
• Developing a customer research brief and proposal
Results
• Launch an entirely new homepage in 4 months
• Delivered innovative and cutting edge experience
• Built the business case for further customer research
• Gained confidence of executive leadership team in human-centered design method
• Organized our small team to function efficiently within 2 concurrent workstreams
• Established a standard for testing in live code
• Increased CTR
• Continuing to Test, Learn and Refine
• Delivered innovative and cutting edge experience
• Built the business case for further customer research
• Gained confidence of executive leadership team in human-centered design method
• Organized our small team to function efficiently within 2 concurrent workstreams
• Established a standard for testing in live code
• Increased CTR
• Continuing to Test, Learn and Refine
Empathize (planned for next quarter)
• Customer Personas
• Customer Journeys
• Customer Value maps
• Customer Journeys
• Customer Value maps
Define
• UX Vision Brief, North star and UX pillars
• UX requirements prioritization
• Roadmap, sprint planning, team allocation, workflow plans
• Photography briefs
• UX requirements prioritization
• Roadmap, sprint planning, team allocation, workflow plans
• Photography briefs
Ideate
• Exploratory wireframes
• Animation tests, motion studies
• Animation tests, motion studies
Prototype
• Clickable prototypes
• User flows
• User flows
Test
• Testing Hypothesis
• Testing plan, briefs and scripts
• Testing plan, briefs and scripts
Prototypes
Annotations & Red Lines
Scrollytelling Motion Tests Built with FIgma
Final designs
