Portfolio work

  • yarrstar
  • No Comments

G-Star Raw – DTP & Graphic Design
G-Star Raw – DTP & Graphic Design 720 620 yarrstar

G-Star Raw

DTP / Illustration / Graphic

Read about this project

G-Star Raw

For a year, I’ve worked at the fashion brand G-Star Raw. In the beautiful headquarters, I fulfilled the role as a Technical Styling Illustrator. In a huge process of the fashion industry, my responsibility was to create digital illustrations which are used for production.

Role

Technical Styling Illustrator

Deliverables

DTP, Graphic Design, creating multi layered digital drawings of clothing

Year

2013

The project & me

In this year, I’ve been part of a small team (around 15 people) who each had a separate department. My department was Men Denim. In a busy environment, with international colleagues, I had to manage the work of the Men Denim department. Along the way I kept on innovating to speed-up my workflow and successfully created some workflows, which helped all other departments as well.

Deliverables

The stylist creates his/her sketches. The sketches are communicated towards the Technical Styling Illustrator and then a digital illustration is made. In Adobe Illustrator, I’ve created multilayered illustrations. A base layer with the clothing itself, a detail layer for all kinds of artwork, a production layer which passes on all information needed and lastly a colouring layer which brings the illustration to live.

From sketches to illustrations

Every detail included

Ready for production

Tools/processes used in this project

Adobe Illustrator
To create technical drawings

Photoshop
To create fabrics

Automation
To speed up the process

See all work

  • yarrstar
  • No Comments

Drukkerij van Tuijl – Web Design & Development
Drukkerij van Tuijl – Web Design & Development 720 620 yarrstar

Drukkerij van Tuijl

Webdesign & development

Read about this project

Drukkerij van Tuijl

Drukkerij Van Tuijl is a “one stop shopping company”. One address, one point of contact and one complete product. They provide both commercial printing for the business market and family printing for the private market. From short runs to large printed matter. From business cards, folders to canvas prints.

dvt_logo-768x432

Role

Web Designer & Developer

Deliverables

New website according to brand guidelines, Social media assets

Year

2019

The project & me

Drukkerij van Tuijl was running a fairly old website. While they just launched their new branding, I was asked to create a new website for them. The main goal was to create a responsive website that provides ways for new visitors and existing clients to contact the company or to request a quotation.

In addition, existing clients needed to be able to manage their stocks and be able to request a re-fill in stock.

Before
Dvt-mobile

Deliverables

This project is made in the CMS framework of WordPress and integrated with Google Analytics. The website has several target groups with each their own goal, which results in custom made functionalities.

At the end, Drukkerij van Tuijl gained a functional and responsive website for new visitors and existing clients.

Context of the project

Business requirements

  • New visitors need to be able to see what Drukkerij van Tuijl can do
  • New visitors need to be able to request a generic, and specific quotation
  • Existing users need to have their own account page where they can see their current stock
  • Existing users need to have their own account page where they can request re-fill in stock
  • Existing users need to have their own account page where they can call in their products

User requirements

New visitors want to be able to get to know Drukkerij van Tuijl and see the possibilites, request a quotation, on either desktop and mobile.

Existing clients want to have their own account page where they can see their product stock, call in multiple product at the same time or re-fill multiple product stocks.

Results

New visitors environment

The new website contains 4 core pages to trigger the user into reaching the contact form. A homepage to introduce the company and services, an about page to tell the story and convince the user, a service page to explain the services and inspire the visitor and a contact page where visitors can reach out or request a quotation.

Client environment

The client environment contains an account page, where users get an overview of their account and products. An integration with Woocommerce to be able to order from the current stock and a page where users can re-fill their stock values.

Tools/processes used in this project

Sketch
To create designs

Adobe Photoshop
To edit photo’s

WordPress
To build the website in

Hotjar
To analyse user behavior

Google Analytics
To analyse behavior

HTML + CSS
To create custom components

See all work

  • yarrstar
  • No Comments

Isero Checkout – UX/UI Design
Isero Checkout – UX/UI Design 720 620 yarrstar

Isero Checkout

UX & UI Design

Read about this project

Isero Checkout

Isero is the most specialized hardware wholesaler and service provider for construction professionals and technical services.

During my job at Wunderman Thompson Commerce, I’ve redesigned the checkout completely according to latest UX Princinples.

Role

UX Designer

Deliverables

High fidelity designs in Sketch, uploaded to Zeplin/Abstract

Year

2019

The project & me

As a big process on Jira Software, I was assigned to a ticket containing an open question on improving the checkout. The checkout consisted 5 steps to complete an order, which was quite troublesome for returning and experienced users (B2B).

Deliverables

During this assignment, I’ve kept contact with several stakeholders such as; a product owner, the client and the development team.

At the end of the sprint (Scrum), Isero get’s a redesigned checkout ready for development to take on the next sprint.

User goals & UX Principles

User problem

Customers of Isero have a hard time completing the checkout (given from user feedback), as it is currently 5 steps long with a page refresh in between. These users are B2B customers and are returning frequently to the website to order, therefore the checkout needs less friction in order for users to complete their goal.

Sequencing

The behaviour design technique ‘Sequencing’ was very appropriate here as this checkout contained 5 steps which slowed the user down in completing their goal. During my UX Review (conducted at the beginning of the assignment) I came to a conclusion the 5 steps aren’t needed and could be sequenced further into more logical steps.

Way of working

This project was made in Sketch, a vector based design tool. Within Sketch, I set-up a small Design System to keep things consistent and easy to edit. In Sketch I’ve created 3 base art-boards to represent the dimensions of the media breaks (mobile, tablet and desktop), which is based on the breakpoints of SellSmart/Bootstrap (the system in which the website is build). With a mobile first design this checkout redesign was born.

To communicate to both clients and developers, I’ve used the program Abstract (which is similar to Zeplin).

Designs

Tools/processes used in this project

Sketch
To create designs

Design System
To create consistent design elements

Abstract/Zeplin
To hand-over designs to development

See all work

  • yarrstar
  • No Comments

Body & Fit
Body & Fit 720 620 yarrstar

Body & Fit

UX Design / CRO

Read about this project

Body & Fit

Since 1995, Body & Fit has been the place to be for sports nutrition, nutritional supplements, diet products and a healthy lifestyle.

I’ve worked for this client during my job at Wunderman Thompson Commerce.

Role

Jr UX Designer / Business Analist

Deliverables

Strategy documents, Jira Tickets, Test spec documents, UX Designs, Optimizely Test, Data analysis

Year

2019/2020

The project & me

This project was mainly an Optimization program where we as a team, helped Body & Fit with their strategy, create test hypothesis, design (UX) wireframes and screens, build A/B tests in Optimizely and conduct regular data analysis.

My original role was a Jr UX Designer, where later on I gained more additional responsibility (Business Analist role).
Things I did in this continues project:

  • Assist in strategy sessions
  • Assist on client communications
  • Manage internal workflow by creating jira tickets (writing detailed user stories and providing enough context) and aligning teammembers
  • Create test idea’s based on Data and UX research
  • Write ready to go test hypothesis
  • Create UX Designs and upload them to Abstract/Zeplin
  • Assist on Front-End development where needed
  • Perform after test period data analysis

Deliverables

The project had an agile workflow, formed in a cycle where multiple deliverables came into place. Starting with the strategy, where we held a session to define a goal tree where we aligned business KPI’s to test metrics. Followed by A/B test concepts, alignment with the client stakeholders and a roadmap of where to test and why.

During the workcycle we created for every test a test spec (containing details of the test like; where to test, why to test and what to track), screen (UX) designs, a developed test in Optimizely, a result sheet of the outcomes with conclusions and last but not least recommendations on how to proceed.

Test cycle, example #1

Analysis

Hypothesis

Design

A/B Test result

Analysis

Data analysis

First step was to discover in Google Analytics on where users are struggling. Turning out the cart page had a 72% exit rate, which was a great opportunity to optimise as the page had high enough traffic as well.

Analyse user behavior

The question to be answered was; Why do users exit the cart page at a 72% rate? I used the tool SessionCam (which is similar to Hotjar) to research user behavior to come up with possibilities. These were defined based on User Experience or Behavior principles.

Hypothesis

Hypothesis (PSR-framework)

Problem

Users are currently abandoning the cart page with a 72% drop-off rate. This implies that the user is currently either distracted from progressing from the cart to the checkout on the body en fit FR site.

Solution

In order to test this hypothesis, we will first investigate the reduction of friction and distraction on the cart. We will reorder the cart information flow and remove/ reduce distracting elements that arguably inhibit the user from progressing to the checkout.

Result

This way we will see if users are more motivated to check out following the changes. This should influence our Click Through Rate to checkout and ultimately, our Conversion Rate.

Define relevant metrics

Primary metric

Clicks on “Proceed to Checkout” button (Cart to Checkout – Click Through Rate (CTR))

Secondary metrics

  • Cart Exit Rate
  • Cart Bounce Rate
  • Conversion Rate (Number of orders)

Design

A/B Test designs

Several variant were designed based on the hypothesis. While designing A/B test designs, I had to take into account the technical limitations and frameworks of the tool and the website.

A/B Test result

A/B Test results

After reaching statistical significance on several metrics, we paused the test to conclude results and learn why the test was a winner.

Test cycle, example #2

Analysis

Hypothesis

Design

A/B Test result

Analysis

Data analysis

On Google Analytics we saw a 31% overall drop off rate on the homepage. And after some deeper analysis we knew that​ users who have seen a Product Lister Page (PLP) then a Product Detail Page (PDP) add to cart with a much higher rate than users who go straight to PDP​.

Look at where users come from

From a deeper analysis we saw that 49% of all traffic came from paid search, meaning money spend to attract visitors. 63% of those visitors were bouncing of the website. This was for us an indication for optimization.

Hypothesis

Hypothesis (PSR-framework)

Problem

Visitors to the homepage are currently bouncing at a 31% overall rate and paid search vistors with 63%. This implies that a significant minority of users are not finding the content or seeing the experience that they are looking for/expecting when they arrive to the website.

Solution

To reduce bounce rates we aim to give users a better position and direct experience on the first step of the user journey, and in the first screen shown upon landing on the page (as high up on the page design as possible).​ We will use a mechanism for position and direct which surfaces different combinations of the product categories on the website, in a new and user-friendly design.​

This will enable users to instantly understand the key brand and product information about Body and Fit.

Result

As a result of our changes, we expect to see reduced bounce rates from the homepage. ​ This should in turn leas to a greater click through rates to our category pages and provide a better guided experience for users on the first user journey stage.

Define relevant metrics

Primary metric

Bounce rate – on the homepage

Secondary metrics

  • Exit Rate

  • # of PLP views​

  • # of PDP views

Design

A/B Test designs

Several variant were designed based on the hypothesis. While designing A/B test designs, I had to take into account the technical limitations and frameworks of the tool and the website.

A/B Test result

A/B Test results

After reaching statistical significance on several metrics, we paused the test to conclude results and learn why the test was a winner.

Tools/processes used in this project

KPI Strategy session
To define business goals in a Goal Tree

PSR Framework
To define test hypothesis

Optimizely
To develop A/B tests in and gather data results

Google Analytics
To gather data insights

Sketch
To create designs

Abstract
To hand-over designs to development

Sessioncam
To analyse user behavior

Jira
To create user stories and tickets

Powerpoint
To create decks for presenations

See all work

Let’s connect!

If you feel like connecting, asking a question or having a good conversation please do not hesitate to contact me. I won’t bite 😉

06 31 96 11 83

robbinlenior@gmail.com

Social
Send me a message

Whatsapp

© 2021 Robbin Lenior - UX & Visual Designer with CRO specialty.

Enter your
text here