FURNITURE E-SHOP 

Furniture e-Commerce

FURNITURE E-SHOP

Improving usability, supporting the internal UX/UI team

Improving usability, supporting the internal UX/UI team

Improving usability, supporting the internal UX/UI team

Header-2
WHEN

2019

 

 
WHERE

USEEDS°

 


FIELD

UX & UI, Design Process

The project focussed on the transition into responsive design for a furniture e-commerce. The focus was on the overall usability through new interaction patterns and a user-centered UI.

For 3 months I worked at the client’s office as a UX/UI designer. The rest of the team consisted in a Junior UX designer and an art director that just joined the team and had no user centered design background. The introduction and implementation of a user-centered mindset emerged as a need for the team, and I was happy to advocate for it.

 

My tasks in details 

  • Improvement of the UX concept and interaction patterns, including making the experience responsive.
  • UI general improvement by applying User Centered Design principles.
  • Definition and execution of the design agile process.
  • Support for the team on UX, UI and general User Centered Design topics.
  • Design support in the  development phase.

The current state analysis

During the analysis I realised what the main challanges really were:

  • Non-responsiveness was not the only usability issue. Two examples: the font used for all headlines was not readable; the homepage had two navigations, a top and a side one, with the exact same content.
  • Lack of a design system. An example: all teasers were adjusted manually according to the picture and the text in each language, without a systematic approach.
  • Lack of consistency between the information architecture and interactions patterns in the website and in the app.
  • Lack of lead and strategy in UX/UI design.
inventory_02

The design sprint

The design sprint was needed to boost and show the impact of good design on the business, in a short time and in an environment of low UX/UI maturity.

 

STEP 01: THE DESIGN INVENTORY

To be aware of all the existing modules and interaction patterns, we made an inventory and used this mapping work as a basis for a one-week design sprint with the UX team.

 

STEP 02: BENCHMARK AND BRAINSTORMING

During the design sprint we compared benchmarks and brainstormed to define the interection-patterns that would work on the homepage. The aim of the sprint went further than just kicking-off the design work on the responsive website: it was also an opportunity to show the whole company the impact that a good UX and UI can have on the website and on KPIs.

New concepts

Here below are displayed some of the wireframes built at different stages during the Design Sprint. We used the wireframes to:

  • Identify all the functionalities needed.
  • Prioritize them for the MVP.
  • Identify the best interaction pattern for each functionality.
  • Position them in the layout for the Home Page and Product Description Pages.
Home-Desktops-1080px_WIREFRAME
Category_1600px-

Building a design system

In order to keep working in a coherent and efficient way while expanding the design of the website, the UX team needed a single source of truth for all assets, design patterns and specifications on the topics of usage and implementation.

This complex tool is known as the design system and I initiated it for the team by structuring it and keeping it updated, as the components evolved.

As Nathan Curtis once said, the design system isn't a project, it's a product serving other products. This means on a practical level that in order to function the system requires specific and focussed effort in several directions.

My role was also to share this knowledge with the team and help them answer strategic relevant questions that would be key for the future functioning of the design system:

  • Who’s making the decisions? Modern design systems have a product manager who’s driving decisions, assertively aligning with partners, and serving as the go-to person
  • Who’s doing the work? Sustaining a design system can involve a significant amount of design, development, writing, and other work done by people committed (at least partially, > 4hr/week) to the endeavor.
  • Who’s paying for it? It’s near impossible for a system to survive long term without a sponsor deliberately providing budget in the form of properly allocated time.
  • What are each of you working on right now and where do you record and prioritize things you might work on later? Time for task management, which many high-performing teams increasingly formalize into a backlog over sprints using tools like Github and Jira.
  • What can your customers (products using the system) expect over the next 6–12 months? I wanted to underline the power of an effective, concisely communicated system roadmap. It generates awareness, discussion, faith in the design team intentions that the it will be able to provide what the product teams need.
Screenshot-2019-04-08-at-17.33.51_03

THE RESPONSIVE GRID

Together with the developers we defined the breakpoints that were relevant for the usability and in terms of revenues. We then defined the grid specs for each breakpoint.

grid
Screenshot-2019-04-05-at-17.31.13

DESIGNING THE COMPONENTS

For each component we went into a deeper definition for their interaction patterns and UI.

We tested several solutions for each component in order to find the most fitting one. Here are the main aspects that guided us in the design process:

  • The users’ needs in the different use cases.
  • The business requirements.
  • The features usability in relation with the  content typology and amount.
  • The overall consistency in the design system.
Screenshot-2019-04-05-at-17.31.27

The online implementation

The new website was initially tested live on the Austrian market, starting from May '19, on a small percentage of users. According to the positive results the design was iterated and went gradually live, first in Germany and then on all markets.

The new responsive design

Composition_h24

The mobile design

Mobile_Screens

HP: new navigation and main teasers

Real-Silver-Copy

The product discovery

Real-Silver-Copy-2

The new teasers system

Real-Silver-Copy-3-1

 Learnings from the project

In companies where the UX/UI maturity is not very developed the power of design on the client’s experience and KIP’s performance is often unknown or underrated.

There is a large confusion between what a design library and a system is, and often the basic principles of systemic User Centered Design are ignored in favour of the maintenance of the design status quo. The strategic business value of a well structured and managed design system is also largerly unknown, as well as the effort it requires to function properly.

Design sprints can be a powerful tool to let the stakeholders see in a very short time potential impact that User Centered Design can generate on the experience, on the quality of the service, and therefore on the revenues.


Marina Caramagno   |   marina.caramagno@gmail.com   +49 15229235576