Developing the DEX Hub branding and interface was a significant project for the design team in 2021. Our mission was to create a thought leadership website that delivers the most valuable content about Digital Employee Experience to help industry experts optimize their careers. We achieved this by creating an easily navigable website with interactive pages and a strong brand identity.
my role
Branding
Researching and defining the color scheme and illustration style to establish the sub-brand look and feel.
Interface Design
Creating five main pages and three toolkit pages from the research phase to deployment.
Design System Management
Creating a Design System (inspired by the Atomic Design Methodology) and a set of guidelines.
team
Amanda Murrin • Creative Direction
Sarah Gibbons • Illustration and Print Design
Various Nexthink Teams • Content and Development
The Project
Step by Step
Goals & Objectives
Brand Awareness
Position Nexthink as a leader in Digital Employee Experience by creating a solid sub-brand.
Inspire
Deliver an engaging website where business leaders and industry experts learn everything about DEX.
Retain
Keep readers on the website through easy-to-use features and engaging interactions.
Brand Awareness
Position Nexthink as a leader in Digital Employee Experience by creating a solid sub-brand.
Inspire
Deliver an engaging website where business leaders and industry experts learn everything about DEX.
Retain
Keep readers on the website through easy-to-use features and engaging interactions.
The Research Phase
Creation of a New Sub-Brand
Many members of the design team were involved in this project! Amanda Murrin, my direct manager then, teamed up with me on the interface design, Sarah Gibbons on the new sub-brand visual identity, and Jen Costa on the favicon creation. As we say, great teams make great products!
When we first started brainstorming with Sarah, we knew we wanted to create an identity that places emphasis on people. To achieve this, we opted for a vibrant and uplifting palette inspired by the Nexthink brand colors, just a tint brighter. We incorporated rounded and organic shapes to create a warm and inviting environment, complemented by dynamic patterns like waves and wiggles to inspire energy and movement.
The final touch we decided to add was meaningful, minimalist illustrations to accentuate certain aspects of the brand: a book to represent learning and knowledge, a light bulb to symbolize creativity and innovation, an hourglass to remind us that we are in control of our destiny, and an open eye to signify transparency.
From Wireframes to Final Product
Creation of the Website's Core Pages
Defining the structure of our site
Amanda and I worked together to develop the website's key pages, including a Homepage, an Articles page, an Article detail template, a Category detail template, and a Podcast page. We began with extensive research, analyzing other editorial websites to identify successful features and note what didn't work. We created multiple low-fidelity mockups and shared them with the global team to gather feedback. We explored many design options: a navigation bar at the top of the page, a sticky navbar on the side, a masonry grid for displaying articles, and a sidebar. We received valuable feedback, which allowed us to finalize our strategic UI choices:
The website's navigation will be sticky on the side of the screen, making all essential content just one click away. The Articles page will feature an infinite scroll to keep the viewer engaged. The page will have a main feed in the center and a sidebar on the right, allowing specific content to be highlighted.
The sidebar is an excellent option that can adapt and change over time without requiring design or development work. We made a set of components that the content team can reuse, such as a podcast component, three different layouts for featured articles, a data corner, a flipping card... etc.
Sidebar Components
Prototyping in high-fidelity
We created the high-fidelity mockups on Sketch, and prototyping was done using Invision. We found it convenient to work with Invision because the dev team could easily access raw values and measurements through the Inspect feature. One question raised during the prototyping phase was whether a proper Homepage was necessary. We wondered if it would be more intuitive for users to land directly on the Articles page.
Refinement and production
Once all the pages were approved, we handed the designs to the development team; this process took some time as it required quality assurance (QA) to ensure that the final product met our desired specifications and was user-friendly. At Nexthink, we always worked closely with the development team to determine the best type of assets to use, considering website responsiveness, loading time, and accessibility. For this project, we created high-fidelity mockups for all the main viewports, including 1920px, 1440px, tablet, and mobile.
No items found.
Additionnal Interactive Pages
Creation of the DEX Toolkit
One of the key features we developed was a toolkit designed to empower industry experts to optimize their careers in DEX. The first version of the toolkit consisted of a Salary Calculator and a Career Report. Later, we added a DEX Job Board.
I wanted the Salary Calculator to be interactive and intuitive. Users can instantly see whether their earnings are above or below average by entering their annual salary and comparing their income with industry standards.
The creation of the Career Capital Report was a complex process that involved a lot of communication and collaboration within the team. A challenge I faced was the presence of numerous charts in the project. I incorporated the shapes created during the branding phase to provide a rhythm to the page. These shapes helped to create a balance between the content and white space, allowing the viewers to have enough time to read and digest the report.
A few years later, we added a job board to our toolkit. The page lets users stay up-to-date with the latest job opportunities directly from the DEX Hub. When they find a job they are interested in, they are redirected to the company job description to apply.
No items found.
Making the Website Scalable
Documentation Using Design System Management
After the larger pages were approved, we began building our UI Library in Sketch. This helped us ensure consistency across the new pages we were creating and made replicating modifications on all components easier during iteration. We took inspiration from the principles of the Atomic Design Methodology and organized the system to make it easy for the design team to access and use.
Our DSM included the basics (logos, colors, grids, typography styles, and buttons), the molecules (navbars, footer, small UI components, sidebar components), the templates (groups of sidebar components, main feed layout options), and finally, the page templates built with the proper grid, navbar, etc.
Many members of the design team were involved in this project! Amanda Murrin, my direct manager then, teamed up with me on the interface design, Sarah Gibbons on the new sub-brand visual identity, and Jen Costa on the favicon creation. As we say, great teams make great products!
When we first started brainstorming with Sarah, we knew we wanted to create an identity that places emphasis on people. To achieve this, we opted for a vibrant and uplifting palette inspired by the Nexthink brand colors, just a tint brighter. We incorporated rounded and organic shapes to create a warm and inviting environment, complemented by dynamic patterns like waves and wiggles to inspire energy and movement.
The final touch we decided to add was meaningful, minimalist illustrations to accentuate certain aspects of the brand: a book to represent learning and knowledge, a light bulb to symbolize creativity and innovation, an hourglass to remind us that we are in control of our destiny, and an open eye to signify transparency.
From Wireframes to Final Product
Creation of the Website's Core Pages
Defining the structure of our site
Amanda and I worked together to develop the website's key pages, including a Homepage, an Articles page, an Article detail template, a Category detail template, and a Podcast page. We began with extensive research, analyzing other editorial websites to identify successful features and note what didn't work. We created multiple low-fidelity mockups and shared them with the global team to gather feedback. We explored many design options: a navigation bar at the top of the page, a sticky navbar on the side, a masonry grid for displaying articles, and a sidebar. We received valuable feedback, which allowed us to finalize our strategic UI choices:
The website's navigation will be sticky on the side of the screen, making all essential content just one click away. The Articles page will feature an infinite scroll to keep the viewer engaged. The page will have a main feed in the center and a sidebar on the right, allowing specific content to be highlighted.
The sidebar is an excellent option that can adapt and change over time without requiring design or development work. We made a set of components that the content team can reuse, such as a podcast component, three different layouts for featured articles, a data corner, a flipping card... etc.
Sidebar Components
Prototyping in high-fidelity
We created the high-fidelity mockups on Sketch, and prototyping was done using Invision. We found it convenient to work with Invision because the dev team could easily access raw values and measurements through the Inspect feature. One question raised during the prototyping phase was whether a proper Homepage was necessary. We wondered if it would be more intuitive for users to land directly on the Articles page.
Refinement and production
Once all the pages were approved, we handed the designs to the development team; this process took some time as it required quality assurance (QA) to ensure that the final product met our desired specifications and was user-friendly. At Nexthink, we always worked closely with the development team to determine the best type of assets to use, considering website responsiveness, loading time, and accessibility. For this project, we created high-fidelity mockups for all the main viewports, including 1920px, 1440px, tablet, and mobile.
No items found.
Additionnal Interactive Pages
Creation of the DEX Toolkit
One of the key features we developed was a toolkit designed to empower industry experts to optimize their careers in DEX. The first version of the toolkit consisted of a Salary Calculator and a Career Report. Later, we added a DEX Job Board.
I wanted the Salary Calculator to be interactive and intuitive. Users can instantly see whether their earnings are above or below average by entering their annual salary and comparing their income with industry standards.
The creation of the Career Capital Report was a complex process that involved a lot of communication and collaboration within the team. A challenge I faced was the presence of numerous charts in the project. I incorporated the shapes created during the branding phase to provide a rhythm to the page. These shapes helped to create a balance between the content and white space, allowing the viewers to have enough time to read and digest the report.
A few years later, we added a job board to our toolkit. The page lets users stay up-to-date with the latest job opportunities directly from the DEX Hub. When they find a job they are interested in, they are redirected to the company job description to apply.
Making the Website Scalable
Documentation Using Design System Management
After the larger pages were approved, we began building our UI Library in Sketch. This helped us ensure consistency across the new pages we were creating and made replicating modifications on all components easier during iteration. We took inspiration from the principles of the Atomic Design Methodology and organized the system to make it easy for the design team to access and use.
Our DSM included the basics (logos, colors, grids, typography styles, and buttons), the molecules (navbars, footer, small UI components, sidebar components), the templates (groups of sidebar components, main feed layout options), and finally, the page templates built with the proper grid, navbar, etc.
