HRC-banner.png

UX/UI Case Study

Artez Fashion Strategy is the fashion academiprogram In this graduation project, I proposed to explore the possibility to communicate sustainable fashion research to the wider audiences which led to actionable solutions through User Experience Design. By creating the interactive communication design demo, the program could already get a picture of the engaging communication experience and the possible positive impacts.

My Role

I helped bring empathy and user-centred design to the team and project with user research+persona, and visualise the research findings to the inspiring solutions with a user journey map. To bring ideas to life, I demo design interactions for a prospective smart product and build a high-fidelity website prototype in English and Dutch to mimic the ideal experience then test the experience with end users and collect valuable feedbacks to present to partners.

Partner

ArtEZ Master Fashion Strategy

Project Type

UX/UI, Digital Design, Interaction Design

Duration

November 2020 - June 2021  | 8 months

UX Mentor

Hans Kemp | Keen Design

Domain

Fashion Education

The Challenge

Urban heat stress occurs in the Netherland for only 2-3 weeks a year but it leaves a serious impact on our health such as heat stroke. An estimated 400+ citizens die from heat stress in the Netherlands every year due to Climate change. As a designer, I needed to design a compelling experience and propose engaging solutions that made the end users aware of the issue and empowered them to prevent the problems. 

The Solution

The climate issue is complicated to address. While its effect on human health is what we can avoid. My design approach shifted from solving complex problems to making prevention more accessible through the campaign with an engaging digital experience to promote awareness and provide helpful information to end users. Here're the steps I needed to take:

  • doing research on the problem, the country and users to find a thoughtful solution.

  • brainstorming concept themes for collaborative selection with partners. 

  • preparing and proposing the creatives and journey flows to the partners.

  • making changes to design based on discussion and user testing with teams and partners iteratively.

  • applying local language and design norms in interactive design prototypes.

The Process

In 5 months through 5 sprints under SCRUM and Design Thinking process, I worked in a multidisciplinary team with a researcher, programme manager, industrial designer, engineer, and developer. I organised to deliver my design assets successfully and supported my team with other tasks, including project presentations that needed pleasant visualisation such as data visualisation from research/testing, concept sheets, pre-read/presentation for partners, etc.

HRC-process-2.png
IMG_0859_edited.png

User Interview and Persona

Within 3 weeks, I participated in user research, conducting interviews with 14 homeowners in the city areas of Amsterdam and Amersfoort to understand their current experience and the effects of Urban Heat Stress.  After analysing the findings, I made personas to help everyone in the team understand our users better and get on board with them. Here are some examples of the personas.

image006 copy_edited.jpg
HRC-process-3.png

Brainstorming with Experts

To ensure that the design delivered proper solutions to end users and to learn to understand the context, in the research steps, I participated to review the findings and brainstormed with experts from different fields to explore suitable directions through Translate Session Meetings. In each meeting, I learned about the topic, enthusiastically presented the design ideas, actively asked questions, and documented the feedback from the expert to fill the gap in primary design decision-making.

IMG_9110_edited_edited.jpg

Empathy Led Problem Solving

After thinking through users and research, the team brainstormed what the solutions should be from users' perspectives and I broke down what the team brainstormed into 4 design criteria.

HRC-process-4.png

Collaborative Ideas Selection with Partners

I visualised 5 design concepts for partners to choose to develop together.  In the co-creation session, I facilitated and walked through partners each concept and asked them to vote on the concepts they found most suitable with the feedback to improve for the next steps.

sprint2_7.png

The Campaign Journey Map

What are campaigns? 

Campaigns are a communication strategy across channels where end users engage with the organization/company. Every campaign has an aim of whom to target, with what products to target and through what means.

 

These campaign flows showcased the experience that a user would engage from the start with our products to the touchpoints where the problem was addressed. I created the experience flows focusing on a digital experience: website, landing pages, digital twin of the city and the smart product’s flows. 

image.png

Visual & Design Identity

I created the brand style guide and other visual assets for engaging and consistent visual communication. When using the brand elements in a correct way consistently, we can build a powerful and recognizable brand.

 

Here were what I  designed for the branding part:

• Logo design

 UI Style guide

 Branded slide decks

 Illustration

HRC-process.png

Design, Test, and Revise

I designed an interactive mid-fidelity website and the interaction for a smart product to test them with 15 users. After receiving feedback, I revised the design based on the feedback before turning those feedback into a high-fidelity prototype.

HRC-process-5.png

Prototypes

Here’re the prototypes of a website in Dutch and English version.

process-6.png

Results

Kind words from our partner

Ruben/TAUW

Process:

  • Well-organized sessions/sprint reviews (interactive, enjoyable) by talking and discussing with each other

  • Appreciated you sending documents/pre-reads on time

Product:

  • Impressed with how professionally you picked up the project and developed a quite good product

  • Good quality steps

DSC05876.JPG

Other Projects

cover-small.png

Take Care

A conceptual case of a mobile app provides an engaging learning experience.

TL-Visual-Identity-Design20.png

Personal Branding

Visual identity design for my personal branding.

Let's make something great together :)