Redesigning a corporate website & scaling a design system
Combining Design & Business Strategy at the digital consulting firm, Konrad Group
An Overview
CHALLENGE
Our clients, Canadian Pacific and Kansas City Southern, merged under CPKC and seek a new combined site to reflect consistent branding, raising awareness of the merger's advantages in scalability and streamlined shipments across North America.
The existing websites lack effective representation of their brand identity, presenting inconsistent and outdated information, and creating a disjointed branding experience.
Our primary objectives were to modernize their branding and curate concise, consistent information. This required a comprehensive overhaul of their online presence, storytelling by capitalizing on CPKC's newly developing and growing company.
ROLE
Associate UI/UX Designer, Intern
DURATION
July - September 2022, in 3 two-week sprints
SKILLS / TOOLS
UI/UX Design, Figma, Figjam, Jira, Confluence
TEAM
Product Manager, Design Lead, UI/UX Designer, Consultants, Engineers
SOLUTION
We restructured our client’s website to build high fidelity desktop and mobile designs for 40+ pages, scalable design system, and content management system (CMS) with 45+ components which generated 400+ pages for launch.
400+
Pages generated for launch using our CMS
41.4%
Increase in website traffic within 2 months
35.6%
Increase in average session duration
Our priority was to place user needs at the core of our design decisions while balancing business objectives of our clients. Collaborating with clients often challenged us to articulate our design choices to advocate for our user’s needs for visiting their website. We chose a user-centered approach in design thinking to create with both our clients and their users in mind.
The Goal
USER GOALS
Efficiently learn about the services, shipment types, and routing options offered by CPKC
Easily communicate with CPKC for detailed shipment information and support
Find the benefits which CPKC will provide over other shipping methods
BUSINESS GOALS
Grow awareness for the CP and KCS merger and the value which it will provide to customers
Create consistent branding and messaging which CP and KCS customers can trust
Promote the benefits which the CPKC rail network will provide to generate new business
COMBINING OUR PRIORITIES, WE CREATED OUR STATEMENT OF OPPORTUNITY:
Provide site visitors with a simple and intuitive way to explore the service offerings and unique benefits CPKC can offer to increase brand trust and generate new leads.
New Customer Clara
Work Experience: 3 years
Role: Logistics Analyst
Industry: Forest Products
Exposure to Technology: Medium
Clara is a new hire at a logging company located in Canada.
As her company grows, their current shipping and logistics partner does not have the capacity to meet their increasing shipment needs.
As a prospective customer, Clara wants to
Learn about CPKC’s services and receive a quote
Evaluate the benefits CPKC would have over their current shipping partner
USER JOURNEY
Click to enlarge
Existing Shipper Sean
Work Experience: 20+ years
Role: Lead, Supply Chain Management
Industry: Agriculture
Exposure to Technology: Low
Sean is a supply chain lead at a Saskatchewan-based agricultural company and has been transporting grain with CP for the past eight years.
As an existing shipper, Sean wants to:
Look for accurate information and new updates
Understand how the merger could impact his existing shipping operations
USER JOURNEY
Click to enlarge
ZOOMING IN
Redesigning the Homepage
Out of the pages we designed, the homepage was our priority as it played the largest role in telling the story of the CPKC merge. Our analysis of the old site and market analytics gave us insight into which parts of the site could become more helpful for their users.
User Story Prioritization Activity
DESIGN THINKING SESSIONS WITH CLIENTS
We dove into design thinking sessions with our clients to address each of these insights.
With the majority of user stories being centered around easier access to information regarding services (including requesting a quote and service updates) as well as careers, we wanted to condense information as much as possible to increase accessibility of those pieces of information.
Developing the Flow of the Homepage
We created a user flow for the homepage that aligned with user stories and needs that targeted the site’s core users while telling the story of the CPKC merge.
We wanted our users to easily access information important to them:
For prospective customers like Clara, this meant highlighting the brand values, services CPKC offers, and ways to get in contact.
For existing customers like Sean, up-to-date and concise information would provide the transparency they need about updates to CPKC’s services.
The needs of our secondary and tertiary personas also played a role in our organization of the homepage and navigation, providing resources for prospective employees and investors.
Homepage Hero
Homepage Hero
A ROADBLOCK TURNED INTO AN OPPORTUNITY
In the beginning, there was a delay from our client’s side, giving me 2 weeks of free time before our team could start our project. I wanted to make the most out of the opportunity to learn and grow during my time at Konrad Group. Communicating my concerns with my design manager, he connected me with my design lead who temporarily added me on another project. During this period, I audited and analyzed the old site in communication with my design lead, generating blue sky concepts for the homepage hero.
MY VISION WHEN CREATING THE HOMEPAGE HERO
Make efficient use of space to highlight information most relevant to target audience, avoiding overcrowding & overwhelming users with information
Create an immersive full-bleed experience with CPKC’s work through video footage and photography
Content managers are able to author and update what’s presented
All design components follow accessibility standards of contrast with background image, text, video play/pause button, etc.
ZOOMING IN
Designing the Homepage Hero
ZOOMING IN
Restructuring the navigation
Through the User Story Prioritization Activity we collaborated with our clients on, we crafted a recommendation of the IA for the new site that combined and simplified the original sites.
01
Combining the IA of both CP and KCS websites
This is a screenshot of a flow we created of the old IA’s of both our clients’ websites. We agreed that there was way too much information, and we needed to simplify.
02
Simplifying IA using insights from user story prioritization activity
Our audits and analysis of the existing sites for our two clients helped us create a middle ground to restructure the IA by condensing similar information, getting rid of pages that barely served low-priority needs, and dividing the navigation bars into a primary and secondary navigation.
03
Differentiating between page types with primary and secondary navigations, toggles, & buttons
We took our highest priority user stories to separate two navigation bars based off of primary usage by our target users, and a second navigation bar for less high priority actions and needs of secondary users.
Equipping our clients for the site launch
SCALABLE DESIGN SYSTEM
Combining CP and KCS's original design systems into one, while accounting for accessibility standards and visual impact, we created a new design system consisting of header, text, button components, etc., guided by our typekit and color guide.
Gathering and analyzing inspiration
Testing out font combinations
Creating the design system and component set
CONTENT MANAGEMENT SYSTEM
Combining insights to create components
The clients wanted a way to author the content of the site beyond our MVP. We wanted an efficient way for easy authoring, collaborating with our engineers using Adobe AEM to create components guided by our design system, aligning with best design practices for use cases and accessibility.
We created a CMS with 40+ types of components for both desktop and mobile.
Learnings & Reflections
Always ask for feedback
My mentor and manager at the time encouraged me to ask for feedback sessions with the other designer on my team, and it became something we scheduled regularly since it worked so well. We used these sessions to discuss our strengths, weaknesses, how we could improve, and how we could work best together in our project. Not only did this improve the way we worked independently and collaboratively, it strengthened our bond as teammates through consistent and transparent communication.
No questions nor designs are stupid
In the beginning of my time working at Konrad, the other designer recognized that I was often trying to make my designs as polished as possible, worried that they weren’t good enough. She communicated this in one of our feedback sessions together, and I challenged myself to ask for help and to learn as much as I could from other designers. Asking others questions about my initial designs or how to create specific prototype interactions equipped me with different skills and perspectives, and was the way I improved my confidence in my design work and technical capabilities.