Oh no.
I'll be honest. While developing this portfolio, I prioritized the exciting and creative aspects and neglected the functionality on smaller screens.
Despite my oversight, I hope you won’t be deterred from exploring my portfolio on a larger screen. You can also check out my resume.
Psst, if you don’t mind viewing broken non-responsive pages, feel free to click here for a sneak peek.
Delivering a new brand and adjacent design system to Dustin’s web, and redesigning the product page.
Delivering a new brand and adjacent design system to Dustin’s web, and redesigning the product page.
Dustin is the leading seller of IT-products and additional services in the Nordics. In 2019, Dustin teamed up with design agency Kurppa Hosk to revamp their entire brand identity.
I represented Dustin in the collaborative effort with Kurppa Hosk to express the new brand identity on the web. I led a cross-functional team of designers and developers as we delivered Dustin’s first-ever design system - alligned with the new brand.
I did also functionally and visually redesign some core parts of Dustin’s web, including the mobile navigation and the product page. We wanted the product page to be a guiding star for Dustin’s brand and represent not only the new visual identity, but also a more refined user experience. The redesign included the addition of new features, a new and improved hierarchy and a fresh UI - all reflecting the new brand.
Company
Dustin
My role
Product design (UX/UI)
Design system lead
Date
2019 – 2021
Credits
Kurppa Hosk (Design agency), Brand platform and visual identity
Linda Stenström and Leo Drakenberg, Creative Direction
Johan Carlsson and Jakob Smedhagen, Design collaboration
“Jan’s expertise in product design and sense of structure were critical for the success of the project to develop and implement a new brand identity for Dustin group.”
Linda Stenström, Creative Director at Dustin
Dustin has expanded their business strategy, becoming a international service provider on top of their hardware sales. This required a new brand which can encompass the new reality of Dustin’s business.
My role as a product designer was to interpret and bring the new brand to the web. I had a central role in the project, consisting of creative directors, digital designers and developers from both Dustin and Kurppa Hosk. Some of my contributions included designs of the search page, product cards, the menu and the product page.
Most UI design done in collaboration with Jakob Smedhagen and Johan Carlsson. Creative direction by Leo Drakenberg and Linda Stenström.
Rebranding process
Exploring the new brand on the web
Concurrently as the brand was being developed, I worked in a team of three product designers, exploring how to express the new brand on Dustin’s web.
Rebranding key pages
We identified the most important and influential pages on Dustin’s web and iteratively redesigned them with the new brand. At this stage the redesigns were first and foremost visual, with little functional changes.
UX redesigns of core flows
To fully embody the new brand, I functionally redesigned some of the core parts of the web. These include the mobile menu and the product page.
Building the UI component library
In conjunction with the redesign of key pages, we identified design components and started building a atomic UI component library. This simple UI library would go on to serve as the bedrock for Dustin's new design system.
Implementing the new brand
I was closely involved as we worked to implement the new brand throughout the web. I ensured that the implementation was true to the brand’s vision and collaboratively explored how the brand should be applied to pages beyond the key pages.
Our primary goal was to update the web’s visual identity. I did also redesign certain pages with a functional approach in order to better reflect the brand promises. The mobile menu and the product page are two examples of this.
Dustin’s new brand brought with ita need to establish methods of maintaining the high standards of design over time. A new design system empowered our product development teams to work more cohesively and efficiently to produce scalable designs in line with the new brand's vision.
I led team of designers and developers as we built Dustin’s first-ever design system. With a focus on preserving the insights and work of the rebranding project, our new design system ensured consistency across product development teams and streamlined our design work for maximum clarity and speed.
I led a team of designers and developers as we built Dustin’s first-ever design system.
Design System inception process
Building a prototype
The first UI component library built during the rebranding project served as a prototype upon which me and Johan Carlsson expanded and tested new ways of working.
Leading the design system team
I led the design system team consisting of two designers and two developers. We developed the new design system and managed contributions from other designers.
Onboarding designers
Product designers were onboarded to the design system by me through collaborations and workshops.
Establishing new ways of working
We explored and defined new processes so that everyone could use and contribute the emerging design system. The design system and the processes surrounding it became a natural rallying point where product designers and marketing teams could ensure UI and brand consistency.
The redesign of the product page was meant to exemplify the new brand promises. Beyond embodying the new visual identity, it also elevated the user experience to a more refined level. The new design introduced new features like variant handling and drove concrete KPIs - such as increasing peripheral sales and product leasing.
I applied a thorough design process to revamp the product page, encompassing research, ideation and wireframing, to prototyping, usability testing and pixel perfect designs. I believe that it shows in the end result.
User research revealed that many customers who purchase computers forget to buy peripherals - a lost opportunity as peripherals are Dustin’s most profitable category. By improving the layout and adding a subtle prompt when users add items to their cart, the redesign was able to increase peripheral sales by over 20%.
Product page redesign process
Gathering insights
I analyzed user data and conducted interviews with customers, as well as assessed competitors’ e-commerce product pages. Considering the product page’s impact on many business areas and multiple stakeholders, early and consistent stakeholder communication was crucial for aligning expectations and incorporating their needs and preferences into the design.
Setting goals
My design work was driven by KPIs, UX metrics, and feature requirements. We set out to achieve several goals, including a significant increase in profitable peripheral sales, a measurable improvement in user satisfaction, and the addition of new features such as the ability to select from multiple product variants.
Iterative design and testing
Explorations of high fidelity UI designs were done in parallel with wireframed explorations of new features. I did usability tests with interactive prototypes at the end of each design iteration.
Launch
The revamped product page has a new hierarchy, new features, and applies the new brand. It significantly improved usability for new customers, while remaining simple to use for returning customers. Dustin’s peripheral sales increased by over 20%.
