Leading product design for a unified Career Advice

I led the product design work for a successful Career Advice Site redesign across Jobstreet's, JobsDB's, and SEEK's brands, creating a seamless user experience across multiple domains and languages.

Richard Simms

· Visit Project

Executive summary

In this case study, we detail the process of unifying the frontend design of a Career Advice site across three brands, eight countries, and four languages. We sought to replace the fragmented frontend design with a more coherent interface. Our primary goal was to improve user engagement and satisfaction, increase website traffic, and create potential business opportunities. While streamlining development, resulting in increased efficiency and reduced costs.

OG Image

www.seek.com.au/career-advice

Career Advice

Our team

Product team Their role Jan Lipnicki Product Manager Mike Hopkins Technical Delivery Lead Richard Simms (me) Senior UX Designer David Deville UX Writer Maciej Rakowski Senior Visual Designer Andrew Gloyns SEO Consultant As the product lead, I was responsible for overseeing the design process, coordinating with stakeholders, and ensuring that the final product provided a consistent and seamless user experience across multiple domains and languages. I managed the other designers and coordinated the translation and taxonomy.

design

Our approach

Creating a consistent user experience across multiple brands, languages, and domains can be challenging. I knew that a system was needed to successfully redesign Jobstreet"s, JobsDB"s, and SEEK"s Career Advice websites. To achieve this goal, we adopted the following approach:

Mobile screens

Research

Conducting user interviews, surveys, and analysing site analytics to identify pain points and opportunities for improvement. An Information Architecture (IA) audit helped us identify and evaluate the existing structure of the websites. We assessed the organisation, labelling, and navigation systems to understand user flow and detect any pain points. This process allowed us to make informed decisions about restructuring the content and navigation to enhance the user experience across all three brands.

Richard has spent time going through all the Asia sites to create an IA structure for Career Advice in each location which helps us to better understand the structure and plan for a unified Career Advice across ANZ and Asia.

— Jan Lipnicki, Product manager, SEEK Learning

Wireframe components

Using Figma, we created wireframe components to map out the structure and layout of the new Career Advice websites. These wireframes served as a visual guide for the design and development team and facilitated communication between stakeholders. By designing wireframe components, I was able to capture existing functionality and ensure consistency in the user interface and streamlined the design process.

Mobile screens

Component design

We designed a modular component system in Figma, considering various screen sizes and device types. This approach allowed us to create responsive designs that adapt to different viewing contexts, providing a seamless experience across multiple platforms. Additionally, we designed component variants to accommodate the unique needs of each brand and language, ensuring a cohesive look and feel.

Page templates

To maintain consistency and efficiency, we created page templates for common content types, such as articles, guides, and resource pages. These templates provided a solid foundation for building out the various pages across the three brands, while allowing for customisation as needed. As a result, we achieved a unified design language and simplified the process of creating new pages or updating existing ones.

Mobile screens

Page layouts in multi-language and brands

We designed page layouts with localisation and branding in mind. For each brand, we adapted the colour scheme, photography, and visual elements to ensure brand identity was maintained while still providing a consistent user experience. Additionally, we created multi-language layouts that accommodated different text lengths, directionality, and cultural nuances, ensuring that users in all eight countries and four languages had an accessible and intuitive experience.

Mobile screens

Stakeholder presentations, WIPs, and feedback

Throughout the redesign process, we engaged with stakeholders to gather their insights and address any concerns. I travelled to Kuala Lumpur to facilitate stakeholder workshops and meet members of the Growth team. We conducted weekly Work-in-Progress (WIP) presentations to showcase the latest designs, demonstrate progress, and gather valuable feedback. This collaborative approach allowed us to iterate on our designs and make data-driven decisions, ensuring that the final product met the needs of the users and aligned with the business objectives of Jobstreet, JobsDB, and SEEK.

Mobile screens

Congrats to everyone who has made this a reality - as we scale out Career Advice across the globe and help more candidates, the rest of SEEK is loving your work.

— Kendra Banks, Managing Director of SEEK ANZ

Development

Implementing the new design using a unified code base and replacing versions of the site in Wordpress and coreDNA with a single Hygraph CMS. Whilst, we continuously monitored the performance of the new design and iterated based on user feedback and data.

Impact

How we built confidence

After launching the redesigned Career Advice site, we observed the following improvements:

  • 23% increase in user engagement, measured by time spent on the site and pages visited per session.
  • 15% increase in overall user satisfaction, as measured by user feedback and surveys.
  • 30% increase in website traffic, indicating higher visibility and user interest.
  • 17% increase in value back to the core business, as measured by sequential job applications.
  • 20% increase in potential business opportunities, as evidenced by an uptick in inquiries and leads generated through the site.
  • 60% reduction in development and maintenance costs, owing to the streamlined, unified code base and Hygraph CMS implementation.

What happened next?

Following the success of the redesigned Career Advice site, we took several steps to ensure its continued growth and improvement:

  • Monitored user feedback and analytics to identify areas for further optimisation.
  • Conducted regular usability tests to ensure that the site remained user-friendly and accessible.
  • Implemented a design system to maintain consistency across the three brands and facilitate future updates.
  • Expanded the site to include additional resources and features, such as personalised career advice and localised content for the eight countries and four languages.

Continued collaboration with stakeholders to align the site's objectives with the overall business strategy and explore new opportunities for growth. In conclusion, the unification of the frontend design and transition to Hygraph for the Career Advice site resulted in significant improvements in user engagement, satisfaction, website traffic, and potential business opportunities. Additionally, it streamlined development efforts, leading to increased efficiency and reduced costs. The project's success has set a strong foundation for future enhancements and resulting in a seamless user experience across multiple brands, domains, and languages. By focusing on core principles like IA audit, wireframe components, component design and variant sizes, page templates, and stakeholder engagement. We were able to create a unified design system that caters to the unique needs of each brand while maintaining a consistent experience for users across the board.

Contact

Questions or need more details? Ping me via email , or any of my other social media links.

Newsletter

Get personal updates and readings on topics like product, design, productivity, programming, and more!

Join the 123 other readers.