Page 1

‘18


HELLO, SZIA! My name is Eszter, a Hungarian UX/UI Designer. Since my graduation as a Graphic Designer in 2012, I have gained 6 years of experience in international and multicultural environments (Turkey, Mexico, France). I completed my profession by learning UX/UI Design in Paris where I got a deeper knowledge in digital design. My passion is to convert creative designs from concept to reality by providing value.


DIGITALDROIT W E B S I T E

R E B R A N D I N G

2 weeks project - Sketch, lllustrator, Marvel INTERNAL HACKSHOW - I. Prize (2018)

ABOUT DigitalDroit is a French start-up based in Lyon. Their concept is to provide an online platform where users can view lawyer profiles and choose the best option for a fast amicable divorce process.

CHALLENGE Creating easy access to the lawyers’ profile page. Designing a simple userflow, a more professional, convincing lawyer’s presentation and a short registration.

MY ROLE Do the research, create the concept, redesign the whole visual identity of the website and test the prototype.

RESULT The website allows the users to seamlessly choose their lawyers. The friendly and trendy interface help the clients trust in the service of DigitalDroit.


I. UX DESIGN PROCESS

3

MOST IMPORTANT ASPECTS OF LAWYER CHOICE

HIGHEST

DIVORCE RATE

AMICABLE

DIVORCE

1. LUXEMBOURG 2. SPAIN 3. FRANCE

availability price reputation

* survey data - 53 answers

new law

2017

NO INTERVENTION OF JUDGE

2

SATISFACTION OF LAWYER CHOICE

80

ATTORNEYS AMICABLE DIVORCE

* survey data - 53 answers DATA RESEARCH

USER RESEARCH

In the Empathize phase Data Research allows us to collect all the important information about the subject. I wanted to understand the laws and data around amicable divorces in France.

Surveys & interviews was the first stage of the Design Thinking process to gain an empathetic understanding of the problem that I was trying to solve. I needed to discover who is the target, what are their needs, motivations and problems.


I. UX DESIGN PROCESS

Julie

THE DETERMINED MOTHER

38 TECHNICAL COORDINATOR

PARIS

how might we help Julie

MARRIED

Goal Be sure about her lawyer choice Have a fast, cheap divorce process Protect her kids from negative effects

Frustration

TO FIND A LAWYER SHE CAN TRUST

Doesn’t have enough information Not prepared spiritually for divorce Worried for her kids emotional health

STAGE OF JOURNEY

WORK

LUNCH BREAK WITH COLLEAGUE

WORK

HOME

OPPORTUNITY

concept

FILTERATION

ACTIVITIES FEELINGS

PROVIDE EASY ACCESS

MAKE HER TRUST IN THE LAWYER

PROVIDE INFO & SUPPORTS

WHO CAN HANDLE HER DIVORCE

RIGHT CHOICE

RATING SYSTEM COMMENTS

USER PERSONA / USER JOURNEY

PROBLEM STATEMENT / SOLUTION

User Persona is a tool that helps us to describe who the user is exactly and empathise with him/her in the Define phase. It gives an exact description about the persona’s gains and pains. Throughout the User Jorney we are able to imagine ourselves in the situation of the user. It allows us to identify the opportunities to enhance the experience.

By framing the challenge as a How Might We question, I set myself up for an innovative solution. It becomes a launchpad for the Brainstorming. In the Ideation phase by using the Crazy8 and Round Robin tools I have created my concept, which is based on 2 main features: Filteration and Rating system.


I. UX DESIGN PROCESS MUST HAVE

SHOULD HAVE

HOMEPAGE

RATINGS AND REVIEWS

ABOUT US

LEGAL MENTION

FILTERS / NOTE, GENDER, RDV

MY ACCOUNT PRO

SERVICES

CONTACT US

COMMENTS

MAP / SHOWING LOCATION

ADVICES

CGU

CONTACT INFORMATIONS

CONFIRMATION

CONTACT US

FAQ

DESCRIPTIONS OF LAWYERS

PRICES

BY EMAIL HOMEPAGE

LAWYERS’ OPTIONS

LAWYER’S PROFILE

CONTACT PAGE

SELECT BY PHONE

ARTICLES/ BLOGS

AVAILABILITY OF LAWYERS

VIDEOS

LINKEDIN

FAX

NEWSLETTER

FACEBOOK

LEAVE A MESSAGE

ADVICES

CONFIMATION

WISHLIST

EMAIL

RATE & REVIEW

CONFIRMATION

WON’T HAVE

COULD HAVE

PROCESS OF DIVORCE

FILTER

SERVICES

FAQ

I AM A LAWYER

FILTERS PHOTO OF THE LAWYER

LAWYERS OPTION

MAP OF THE LAWYER’S OFFICE REATINGS

ABOUT US

LAWYER’S PROFILE HOMEPAGE

PRICES

RATE & REVIEW

CONTACT US

CONTACT

INFORMATIONS ABOUT THE LAWYER

COMMENTS OF PREVIOUS CLIENTS

LEGAL MENTION

CGU

NEWS & EVENTS

LINKEDIN

FACEBOOK

FEATURE PRIORITIZATION / SITEMAP

USER FLOW / PAPER PROTOTYPE

Feature Prioritization Once solutions are suggested, it is time to select the most essential features for the MVP thanks to the MOSCOW Method and Value Quadrant. Sitemap Creating a visual model of a Website's content that allows the users to navigate through the site to find the information they are looking for.

Next step was to do the User flow that is the path taken by the user on the website to complete a task. In the early phases of design Low-fidelity prototype (paper prototype) allows for easy and inexpensive modification to existing designs which makes this method useful.


II. UI DESIGN PROCESS

Envoyer

4.7

Envoyer Envoyer 3.2

SecularOne H1 Quicksand H2

Donec facilisis tortor ut augue lacinia, at viverra est semper. Sed sapien metus, scelerisque nec pharetra id, tempor a tortor.

This is a button

* 4.6

Par téléphone

Maître

Anne BERARD Paris (2e)

Par e-mail

juliedumont@gmail.com

4.6

This is a link

MOODBOARD

STYLE TILE

The first step of the UI design process was to create a Moodboard that helped me to determine the design style of the interface. The collage of key images inspired me to create the essence of the brand and to display the “look and feel” of the website.

From the moodboard I was able to move on to the Style Tile that consists of the chosen fonts, icons, buttons, colors and the other different elements of the interface. It helps to form a common visual language between the designers, stakeholders and web developers.


II. UI DESIGN PROCESS

#213FB9

4.7

Anne BERARD

CONFIDENCE FRIENDLY

Paris (2e)

#F7787F

CIVIL CODE TRENDY #E1E9F6

SOPHISTICATED ELEGANT

Maître

4.7

Maître

Anne BERARD Paris (2e)

#112266

ACADEMIC CONTRAST

Rectangular Cards

Envoyer Envoyer Envoyer Rounded buttons

COLOR CHOICES

FORMS & SHAPES

It’s important to choose the right colors for the interface. For the principle color I decided to use the royal blue which reflects confidence. The secondary color based on the color of civil code which is red, but here I applied a lighter red to make the design more trendy and fresh.

I wanted to integrate the logo in the platform. The left corner of the letter “D” inspired me to create rectangular cards and based on the curve of the letter on the other side I decided to apply rounded buttons. In order to avoid a UI that was too official or too friendly, I focused on creating a harmony between the two.


HIGH-FIDELITY PROTOTYPE Marvel With this prototype Julie is able to filter the lawyer who is suitable for her. The comments of the lawyer’s previous clients help her feel confident in the lawyer she chooses. At the end of the divorce, Julie can also rate the work of her lawyer.


CHECK THE DEMO


TERROIRS D’AVENIR E-COMMERCE APPLICATION 3 weeks project - Sketch, lllustrator, Marvel

ABOUT Terroirs d'Avenir is a small grocery shop in Paris. Their concept is to provide healthy local products to the users by creating a strong human link with them.

CHALLENGE Create an e-commerce platform in order to increase the number of customers by giving them the opportunity to buy the products online.

MY ROLE The entire product design from research to conception, visualisation and testing.

RESULT Rebranding using a more trendy, modern interface design for a more tech-friendly audience. Application that simplifies the shopping experience allowing the users to browse between different recipes and buy the ingredients using a delivery service.


I. UX DESIGN PROCESS

HOW MIGHT WE PROVIDE

129 ANSWERS

66

WOMEN

78% 75%

?

CARE ABOUT SUSTAINABLE CONSUMPTION EASY ACCESSIBILITY

INFORMATION ADVICES

TO THE PRODUCTS

ABOUT THE PRODUCTS

SHOP FOR FOOD IN SUPERMARKET

“ I like to have information about the traceability of the products. I would like advice on how to use it.” Mia, 32 yo.

DISCOVER RECIPES

DELIVERY SERVICE

EMPATHISE / USER RESEARCH

DEFINE

With Surveys & interviews I wanted to understand more about the users shopping habits. I needed to define the users goals and frustrations.

The research allowed me to define the main issues. At this point I knew what I had to resolve, why and how.

SHOP INGREDIENTS


II. UI DESIGN PROCESS

MID-FIDELITY PROTOTYPE / WIREFRAMES

MOODBOARD

In contrast to a paper prototype with Wireframes the understandability of interaction elements can be validated. This medium fidelity prototype is with limited functionality but clickable areas which presents the interactions and navigation possibilities of the application.

By designing this Moodboard I got inspiration from these photos regarding the color choices. As well the images helped me to create the design style of the application.


HIGH-FIDELITY PROTOTYPE Marvel With this prototype the user is able to browse between different recipes and order straight those ingredients by choosing a delivery service that can be home delivery option or she can go and pick it up in the store personally.

CHECK THE DEMO


SOBERLY W E L L N E S S A P P L I C A T I O N 2 weeks project - Sketch, lllustrator, Marvel

ABOUT Soberly is a mobile application that try to help users to reduice or quit their alcohol consumption. Their concept is to give motivation by offering alternatives and providing supports to assure their phisical and mental health.

CHALLENGE Create a mobile platform through the user can track his/her alcohol consumption and by this system can follow up his drinking habits improvement.

MY ROLE The entire product design from research to conception, visualisation and testing.

RESULT A trendy, fresh application with a modern interface design that helps users to contol their alcohol consumption and give them motivation providing them different sport activities and cultural events to change their lifestyle.


I. UX DESIGN PROCESS

SOBERLY

TRACK consumeD alcohol

ACTIVITIES OPPORTUNITY PARTICIPATIONS

SUPPORT

MENTAL/PHYSICAL HEALTH

CONNECT MOTIVATING COMMUNITY

DATA RESEARCH / CONCEPT

MOODBOARD / VISUAL STYLE

I began the Design Thinking Process with Data research. After defining the problem concerning the French polulation, I started to think about the solution. When I found the right idea, I had to precise my concept and with the Feature prioritization tool I decided to apply a tracking system with an activity suggestion functionality.

By creating the logo I established the style of the application. After I created the moodboards, I applied these colors: Blue that refers to nature, health, trust - Yellow that raises awarness, the color of optimism gives energy - Light Grey makes the interface more sophisticated and the Dark Purple gives a great contrast, it reflects independence and strength. .


II. UI DESIGN PROCESS

#F9B63C

Next

#45C8D9

Next

#281E3F

Next

2

ATOMIC DESIGN / ICONS

COLORS / BUTTONS / PHOTOS

On my sketch files I was using Atomic Design System. Like this I was able to speed up my workflow process and make any changes easily. The icons are rounded, outlined so they make the interface friendly and keep it simple.

The buttons have three functionalities (inactive / active / pressed) and touching the side of the screen so they raise attention to the functionality of “Click to Action”. I was using rectangular photos and I applied duotone effect on them in order to create harmony between the icons and photos.


HIGH-FIDELITY PROTOTYPE Marvel With this prototype the user can track his alcohol consumption so then he can follow up his progress. On the other hand the application gives motivation to the user by offering various programs and sport activities to help them to preserve their health.

CHECK THE DEMO


Eszter Szigethy szigethyeszter8@gmail.com www.eszterszigethy.tumblr.com

UX / UI Design Porfolio  
UX / UI Design Porfolio  
Advertisement