VERKKOKAUPPA.COM

I brought marketing and product development together to work towards a shared visual direction for the store.

Product development owned the online store, but its visual direction was not aligned with the online magazine and other marketing. My work connected UI design, the design library and conversations between the teams.

Client / Project: Verkkokauppa.com
Type: E-commerce & Design Systems
Platform: Web
Started: 2018

My role

Designing interfaces and helping others design consistently

I was responsible for UI design and developing and maintaining the design library. I trained other designers and worked with developers on the structure of React components.

Developers owned the front-end implementation. We also built tools for designers in a sandbox environment. My role connected interface design, shared practices and collaboration between teams.

01 · A shared direction

Bringing marketing and product development to the same table

I contacted a former classmate in marketing and started the conversations. I listened to their needs, explained the product development perspective and brought the product owner into the discussion. Through this collaboration, navigation subcontent was condensed and the homepage began bringing campaigns, related products and content together, for example around a barbecue campaign. I also began introducing user personas into our design thinking.

Verkkokauppa.com storefront concept with campaign panels and product recommendations

Homepage

02 · Design library

Making shared patterns available to other designers

I developed and maintained an atomic design library in Sketch. I worked with developers on the structure of React components, connecting the design elements with the way the interface would be built.

I also trained other designers. A shared direction needed shared working practices and support in using them. Desktop and mobile product card studies show how pricing, ratings, availability and purchase actions were brought into reusable layouts.

Verkkokauppa.com design system overview with navigation components and product card patterns

Design library

Desktop product list with alternative product card layouts

Desktop product cards

Mobile product grid with compact product cards

Mobile product cards

03 · Availability

Separating delivery from store availability

I explored how delivery estimates, store stock and collection options could form clearer groups of information. I also compared putting delivery or store availability first.

The annotated before-and-after studies show the design alternatives and changes to the information hierarchy. They document the design work, rather than a measured impact on purchasing.

Availability