‘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
FAX
NEWSLETTER
LEAVE A MESSAGE
ADVICES
CONFIMATION
WISHLIST
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
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