Octavia Kawase Portfolio - UX UI Designer

Page 1

Octavia Kawase

UX UI Designer

Portfolio - 2020


Presentation

Hello! I’m Octavia Kawase,

UX/UI Designer with a marketing and communication background. Currently based in Paris, I used to work in Tokyo, Japan. I have decided to specialise myself into User Experience because I'm passionate about improving the lives of people through design. I am constantly looking to solve new problems, so if you are interested...

Let’s keep in touch!

Email

octaviakawase@gmail.com

Phone

+337 66 07 84 23

Site

octaviakawase.com

Linkedin

/octaviakawase/

Medium

@octaviakawase


Presentation


Projects

My projects


Projects

Have a look at my projects: all of them are both UX UI but they respond to different kind of problems. I always use the design thinking methodology to find the best solution.

Moneyeti

Stitch

Le festival de la Tomate et des Saveurs 2020


Moneyeti

Moneyeti A complete redesign of their website


Moneyeti


Moneyeti

What is Moneyeti?

It is a website that helps travelers saving their money.

There are all information about money for travelers. It provides information tailored to each client’s profile: insurance, sim cards, everything a traveler needs.

About the project

A 2 weeks challenge, very complete.

I started with the UX part by reorganising the website’s content and changing the user flow.

Then, I focused on the UI part by creating a whole new graphic identity.


Moneyeti

Research

about travelers & money

Based on the full travel micro-moments guide, Google 2016 & travel study, Google 2014:

80% of travelers still use cash either because of fear that their credit cards would not work in foreign countries or because of bank fees.

711 millions of euros were lost in one year by French travelers in hidden bank

quantitative data

fees or hidden exchange fees abroad. It represents one hundred euros per trip!

about travelers’ digital habits

60% of travelers are looking for information about a destination on their mobile.

Users search on their mobiles during the weekend while they book on their desktops during weekdays.

88% of travelers with smartphones would switch to another site if they are not satisfied and 45% of them would change if it takes too many steps to book or get desired information.

This is why it is important for a travel website to be responsive, accessible and easy to use as travelers will use both their phone and desktop.

8 travelers confirmed this confusing feeling

qualitative data

These numbers seemed unbelievable, so I wanted to confirm this confusing feeling about money when traveling through interviews.

, f rom 23 to 65 years old.

I interviewed 8 travelers

All of them confirmed similar impressions.

“ I don’t know where to find the exchange offices with the best rates”

“I never know if I should withdraw a lot one time or smaller amount several times”.

None of them were clear about their bank fees.


Moneyeti

Personas

Based on all the quantitative and qualitative researches I created 3 personas that represent 3 different types of travelers.

They have different personalities and for them, “travel” & “vacation” have different signification. Their goals, needs, f rustrations and beliefs are also varied.

However it is very interesting to see how these 3 personas are different but can use Moneyeti for the same reason: find information about their destination to prepare their travel. They can look for different specific information and receive personalised services.

3 personas,

3 differents profiles

Bruno - the traveler master travel: at least 3 times/ year

27

d

years ol

f rom

P

aris

programmer

:

interests

,

music, tech animals

Goals

Frustrations

- travel as much as

- he doesn’t want to loose

possible

money and time at the

- complete his world

airports and exchange

map

offices

Needs

Beliefs

- have the best credit

- travel is not only for

card, sim card in every

vacation, it is a lifestyle

country

- it’s better to travel

- stay connected with

alone to be f reer

family and f riends to

- online banks are

share his travel

convenients


Moneyeti

Cécile - the regular traveler travel: 1 or 2 times/ year

32 years old

f rom Toulouse

teacher

interests:
 food, languages,

Goals

Frustrations

- discover new cultures

- she is af raid to travel

and buy souvenirs for

alone as a white woman

her relatives

- she would like to have

- enjoy vacation with

more money to travel in

f riends

big cities

Needs

Beliefs

- stop being af raid of

- the more she travels

having too much cash on

the more interesting

her abroad

she becomes

- feel safe wherever she

- classic banks are thiefs

goes

bio cosmetics

Marie - the occasional traveler travel: 1 times/ year or less

54

years old

f rom

B

t

res

saleswoman

interests:
 bridge, makeup, painting

Goals

Frustrations

- “dolce far niente”,

- she always feels that

disconnect and relax

travel agencies

during vacation

take advantage of her

- re-energise herself

- it is complicated to

during vacation

good price-

fi

banks

q

fi

nd a

uality ratio by

herself

Needs
 -

&

nd easily all the

information about her

Beliefs

travel as she is the one

- don t need to go far to

organisin

feel in vacation

g

- feel confortable

- make her family happy

- expensive vacations should be token of

q

uality


Moneyeti

Journey map & touch points

Even if these 3 personas have their own goals, they prepare their travel the same way, in 5 steps.

- The dreaming moments: when users are inspired mostly by videos, images, books.

- Planning moments: start to plan, organise their future trip (often via the mobile).

- Booking moments: on weekdays through the desktop, buy tickets and reserve hotels.

- Experiencing moments: enjoy the travel.

- Memories: end of the trip.

Moneyeti has 3 touch points with its users when they travel: 
 during the planning, the experiencing moments and the memories.

Dreaming

Booking

Planning

Memories

Experiencing

- multi-currency credit

- airport: withdraw/

- change the

card

information

leftover money

- information about local

about

currency

change

- change money

where to

- change money

Problem statement

Travelers need a way to easily access all the information about money before, during and after traveling in order to avoid bad surprises on their bank statements afterward.


Moneyeti

The solution in 3 steps

Step 1

information architecture (card sorting)

Moneyeti website is very complete. There are 23 different types of

information

about one destination. Through a card sorting with a total of 12 participants, (divided into 3 different groups) I managed to create 4 new categories:

- Travel preparation

- Change

- Credit card

- Local life

Step 2 user flow/ sitemap

On the website, users need to answer 7 questions about their preferences when they travel to get to the information page of their destination (city page).

This is too long for most users so I decided to change it. I only kept one question (“where do you come f rom�) and transformed the other questions into fil ters on the city page.

I also added a pop up window to ask permission for collecting data. If users agree, they will be able to use Moneyeti to its full potential and have access to all the personalised services. 
 However, if users declined they can still continue on the city page to have general information such as the change of currency or best rates but they will not be able to have adapted information according to their profile.


Moneyeti

Step 3 design

desirability test

To evaluate the design of the current website, I made a desirability test with 23 participants.

The result was:
 disordered (70%), cheap (70%) and old (48%).

new moodboard & brand attributes

I suggested a complete new graphic identity that conveys 5 brand attributes in line with the current one:

- Fun & Fresh 
 for the yeti

- Freedom & Pleasure for the travel

- Cautious 
 about money


Moneyeti

new style tile

I chose curves because they can simultaneously represent mountains but also exchange rates.

I tried to keep the same colours as the original website but I made them lighter to have this f resh and cool sensation of the yeti’s environment.

I created a whole new yeti for the design. He is big and yellow with a huge smile to keep the “fun” personality of the original website. He seems nice and f riendly since he will be the travelers’ companion that provides great and personalized advice.

His footprints also guide users through website.


Moneyeti

1. The homepage Users can scroll the homepage to have all the information about the website (introduction, how does it work, all the content possible, partnerships, media).


Moneyeti

2. Select destination When users select their destination, they only have to indicate their departure place and...
 ”C’est parti mon Yéti !”

(Yeti, Steady... Go!)

3. City page Users can adapt the services by defining their profie through the filter. They can scroll to see all the different content divided in 4 categories.

Link to see the video prototype:
 https://youtu.be/7Lmrt5kz9Tw


Moneyeti

responsive website

desirability test

To evaluate the new design of the website, I made another desirability test with

34 participants.

The result was:
 young (62%), cool (59%) and f riendly (50%).


Moneyeti

Learnings What I have learnt is that travelers use their phone and their computer when they prepare their travel which is why it is very important for a travel website to be responsive.

I also understood that money is a f rustrating topic for travelers as they feel they have a lack of information f rom their bank. They would like more information but don’t know how to access it.

Next steps Moneyeti should create a profile section where travelers could save their information. 


They also need to increase the number of cities to provide the most offers.


And why not develop an application in the future.


Stitch

Stitch Creation of a wellness application for seniors


Stitch


Stitch

About the project Nowadays technology is an opportunity to live a healthier life. Indeed we can see that more and more wellness applications are created: to keep track of our habits, to get motivated, to stay connected with people and even more.

However, seniors (60 years old and more) are not comfortable with technology and are not able to use these new services. This way, they might feel excluded as the applications are not always accessible for this part of the population.

This is the reason why I decided to create an application dedicated to seniors in order to give them the opportunity to benefit from technology and use its wellness services for a healthier life.


Stitch

Research

market research Based on “Les Senionriales” survey, 2016:

qualitative data

quantitative data

92% of seniors think Internet facilitate daily life

49% think Internet is important for their social life

19% think Internet is essential

43% are on a social media to communicate, meet new people and share photos.

But also:

51% are afraid of personal data violation

27% feel overwhelmed by Internet

survey

I created a survey about the feeling of loneliness that most of us had experienced, especially during the quarantine. This feeling can sometimes grow with age.

On 107 total results, I selected 49 answers - only the ones that were more than 60 years old and that had felt this feeling of loneliness.

I realised that 87% of them sometimes feel lonely. The rest of them feel it even more (often or always).

And all of them use smartphone rather than computer or tablet.

insights Through the survey and 6 interviews, I collected insights that confirmed this feeling.

“During these moments of loneliness, I would love to talk to people, go out or work on a professional project”.

“I miss some people, sometimes I don’t want to do anything but I would like to be surrounded by people”.


Stitch

Affinity diagram The last question of the survey was “what do you like to do when you feel lonely” in order to understand more seniors expectations and have ideas for the application I wanted to create.

I organised the 53 answers (survey & interviews) in 6 different categories through an affinity diagram. 
 The result was: make a project, relax, be with my relatives, find love, do outdoors activities and meet new people.

Persona

Problem statement Claude, the willing retired, needs a way to share activities with people because too much free time alone makes him feel lonely.

Metrics to measure its success: if users have 50% less free time alone and if they feel better (though a satisfaction survey).


Stitch

The solution crazy 8 After several crazy 8 to get different ideas, I chose the simplest solution and also the one that seemed the most important for me: connecting people to each other.

So I wanted to create an application that connects seniors to each other through activities and common interests.

User flow 1st attempt: description

1. When the application opens it displays a map of the user’s current location from which they can see the different events around them that matches with the interests they added in their profile.

2. When an activity is clicked from the map, it navigates to the page’s details (with time, location, organiser and a description). They can register to it.

3. Confirmation page with a field to write an optional message to the organiser.


Stitch

1st attempt: result of 5 usability tests The 5 usability tests showed me that this user flow was too difficult to understand. I had to rethink the solution.

“I don’t know where to click. Where is the activities’ list?”

“Is “activités” where I am offered the activities’ choices?”

2nd attempt: result of 5 usability tests Based on all the feedbacks I received from the 1st prototype, I iterated and found a better solution more accessible for seniors. The application has to be very descriptive rather than visual.

More: text descriptions, bigger buttons.

Less: icons, map.

User Interface moodboard & brand attributes Accessibility: for the simplicity and through round shapes.

Sunny: with bright colours to think of positivity and happiness.

Helpfulness and the link created between people are core ideas that must be noticeable in the design.


Stitch

style tile

The choice of the colours will remind nature, the outdoors activities and real life. I wanted them to be quite soft and not much saturated.

For typography, Handlee is used for the titles and the main buttons; as a handwritten font it brings a bit of authenticity to the design.

While the Open Sans font is more practical and thus more readable to support texts, descriptions and information.

The idea of the wires that links pages comes from the stitches in tailoring that links fabric together as this application links people together around common interests.

And this is also the reason why the application is called “Stitch�.


Stitch

1. The homepage When the homepage is loading, users can notice the logo.

On the homepage, they can choose between 2 main buttons “look for an activity” and “create an activity”.

They can also click on the menu at the bottom to see their profile, calendar and messages.

2. Selection of activities Once users click on “look for an activity”, they arrive on a huge list of activities. 

 They can select as many activities as they want and validate. 

 They can also precise the date and distance from their place.


Stitch

3. Choose the activity After selecting the types of activity, users can choose the activity they want to join from another list with more details. 
 They can also visualise the location of each activity on the map.

4. Description & confirmation Users can see more details of the chosen activity: date, duration, meeting point, organiser and description. They can confirm their participation ans write a message to the organiser.

Others screens es ssag

me

Link to see the video prototype: https://youtu.be/e g5xRB2x1HQ

profile

calen

dar


Stitch

Desirability test & brand personality From the hi-fi wireframes and its desirability test, I was able to define Stitch’s personality. The result indicates the sincerity of the design with attributes like family-oriented, friendly and real.

This is very satisfying because sincerity induces trust which is encouraging since elder people tend to have trust issues regarding technology.

Learnings All along this work I have most of all learned how to design a product for seniors who are a special target. It was great to take the question of accessibility into account for people who are not really at ease with technology.

Through interviews I observed that a part of the seniors have actual interest towards technology but often they don’t have enough self-confidence in using it. They need to be reassured.

Regarding the interface they usually rather prefer a good old list over a map, elements need to be straight to the point and as clear as possible when looking at them.


Stitch

Next steps Short term:

- iterate prototype

- communicate about the application

- add a sharing feature to invite friends and have more users

Middle term:

- measure the number of users to see if the application is a success or not

- make a satisfaction survey

- add review feature to enhance the feeling of trust between users

Long term:

- develop a service that helps seniors to use the application

- make partnership with charity organisations as I saw in the interviews that several seniors want to be active in an organisation


Le festival de la Tomate et des Saveurs 2020

Le festival de la Tomate et des Saveurs 2020 Creation of a microsite for the 2020 edition


Le festival de la Tomate et des Saveurs 2020


Le festival de la Tomate et des Saveurs 2020

About the project For this project I created a microsite for an event that takes place every year.
 A microsite is a small website that communicate about one particular service or product.

I decided to create the microsite for “le festival de la Tomate et des Saveurs 2020” (the festival of the tomato and flavours 2020) as the challenge was interesting because it is complete:
 - redesign the microsite of the festival
 - create its proper identity

Who is “le festival de la Tomate et des Saveurs 2020” ? In 2020, there was the 22nd festival de la Tomate et des Saveurs 2020.

This event takes place every year at La Bourdaisière castle where the National Conservatory of the tomato is located.

6000 visitors gather in the garden to taste, see, cook, learn and discover tomatoes.

However, the festival has no identity nor proper website.

The participants have to go on La Bourdaisière castle’s website to find the only page about the festival with very limited information.

The original desktop website

mobile website


Le festival de la Tomate et des Saveurs 2020

Organisation - card sorting for the sitemap I asked 9 persons to organise the content of the current page through a card sorting.

I decided to focus on what people want to see before going to the festival : meal options and practical information (prices and how to get there).

Middle fidelity prototype I created a middle fidelity prototype based on this user flow. From the home page with the festival description, users can access the burger menu to select the “Informations Pratiques” (practical information) where they can click on “Tarif” (prices) and “S’y rendre” (get there).

User opens menu

Menu is displayed

User clicks on”practical info”

“Practical info” page is displayed

User clicks on “tarif” tab to see content

User clicks on “s’y rendre” tab to see content

User got all info

usability test “There are too much clics” and “tabs not necessary”

The 5 usability tests taught me that having only two tabs is unnecessary since there is not a lot of content. Users felt frustrated to click.

So I deleted this screen and kept only one with all the information.


Le festival de la Tomate et des Saveurs 2020

User Interface moodboard & brand attributes I started to summarise the spirit of the event and I wanted a

family,

bucolic,

summerish, traditional and yummy atmosphere.

Style tile Typography: Yeseva One. The serif conveys the tradition while the irregular lines make it look friendlier and cheerful.

Colours: to avoid the ketchup-like branding I tried to balance with shades of green in a sweet but energetic tone.

Graphic elements: tomatoes and their seeds. Like the explosion of the tomato that spread its seeds everywhere!


Le festival de la Tomate et des Saveurs 2020

The high fidelity prototype menu

homepage

Practical information

meal options

From the homepage, users can access to the menu that slide from the left. 


The tomatoes of the menu and of the selected page one are unified and linked.

Each page has different blocks colours to divide the different sections.

Link to see the video prototype: https://youtu.be/p vMC9nvCPQI


Le festival de la Tomate et des Saveurs 2020

responsive website (desktop version)


Le festival de la Tomate et des Saveurs 2020

Desirability test The new design of the website is sincere because “friendly”, “family oriented” and “original” were the most popular adjectives. But it is also “outdoorsy” and “cool”.

Learnings The less, the better: on mobile device, it’s important to save clicks to get to the main information. People prefer to scroll than click.

Next steps Communicate about this new independent website and its fresh design.

Refine the program: from the card sorting, I realised that users seem to want to differentiate funny animations to serious ones like conferences.


Contact

Let’s keep in touch...

Email

octaviakawase@gmail.com

Phone

+337 66 07 84 23


Contact

...and find more on Site
 Linkedin

Medium

octaviakawase.com
 /octaviakawase/

@octaviakawase


Turn static files into dynamic content formats.

Create a flipbook
Issuu converts static files into: digital portfolios, online yearbooks, online catalogs, digital photo albums and more. Sign up and create your flipbook.