Author Archives: Serena

HEMSÄKER – IKEA household insurance

As UX Designer for iptiQ by SwissRe in the insurtech industry, my role involved the research and the design of a new product of HEMSÄKER, the household insurance branded IKEA and SwissRe.

My role

  • User research.
  • Analysis and Synthesis of the data collected from researches.
  • Reports of findings and insights to be shared and discussed with stakeholders.
  • Competitive analysis.
  • Ideation of the new product’s features.
  • UI design from low fidelity until the interactive prototype.
  • Data driven decisions gathering data from Mouse-flow (heat-maps, scrolls and clicks) and Tableau (conversion rates).
  • Provided scenarios and designs for A/B test.
  • Alignments with developers, documentation, and handover.
  • Alignments with all the stakeholders (marketing, business, product, data scientists, content writers, developers, designers).
  • Usability tests and design iterations.
  • Findings and Insights reports.
  • Update of Design Library and Design System Manager.

NDA

The product I am responsible of is not yet implemented in the IKEA HEMSÄKER’s website. Moreover, is protected by NDA, therefore the screen I share as featured image is of a project phase already online and public, and does not represent the product I am working on. As soon as the product I worked on will be available online, I can share the designs here.

Design tools

Design process

Design process

1• Research

The user research involved:

User interviews

User interviews for 36 participants divided in 3 groups to collect qualitative insights about needs, frustrations, past and current experiences, opportunities, happy paths and so on.

Participants were recruited through a platform. The target was given by the Persona that were individuated for HEMSÄKER.

To synthesise those insights I arranged three affinity maps (one fo each group) to group the quotes of participants according both the affinities and to our research questions.
Then I replicated the same process to have a look also at the insights for the total of participants.

Affinity diagram

Surveys to collect quantitative data

The pool of the survey was 300 participants. the research goals were similar to the ones for the user interviews, to validate and quantify in percentage the answers to our questions.
The results were arranged in a report first, then shared and discussed with stakeholders.

About Persona

There was no need to identify a specific Personas for this product because were identified already for HEMSÄKER. I used these Personas in combination with data from the user research and arranged them in an Impact map.

User Persona

2• Define

Impact mapping

Impact Mapping is a graphic strategy planning method to decide which features to build into a product. In order to do that, I combined research goals, Persona, results from the user interviews (qualitative data), features that can achieve the goal to finally create user stories.

Specifically:

  • Why The business goal answers the most important question: Why do we want to do something?
  • Who are the actors / personas which have an impact on the outcome?
  • How does the business goal have (positive / negative) impact on the behaviour of the actors?
  • What are the deliverables to spark impact and to achieve the goal: Epics, Features, User Stories
  • User Story to bring into the backlog
Impact map
Impact mapping - whiteboard

3• Ideate

Features Ideation

Thanks to all these data and the Impact mapping process, I could define the features needed for the MVP of the product.

The whole experience would have to include:

  • Marketing campaigns to inform the users (newsletters, social media ads, In store ads)
  • Presence of the new product in the early stage of the user journey (Landing Page), without obstructing the main purpose of the user
  • Presence of the new product during the journey, only on touch points where it will not distract the user from its main goal.
  • Presence of the new product in the Customer Self Service (CSS).
  • Reachable information about the new product from the top navigation, which will disappear once the user is deep in the journey.

User flow

User flow for the user lands on HEMSÄKER Landing page, interacts with the new product opening different scenario to finally reach its goal. Includes the Customer Self Service portal.

User Flow

Alignment with devs

During the entire process I always kept the dialogue open with developers for insights about technical feasibility and estimation of effort, in order to be all aligned on which feature could come in.

Feature prioritisation

I collaborated with the Business stakeholder for what concern a user experience prioritisation of features for the product I was working on. Needless to say, for big projects the prioritisation depends from different factors, involves different departments and was at the end done between the Heads and Product Owners.

Placement of the new feature in the landing page and along the journey

To define the positioning of the new product, both in the Landing Page and during the whole journey, I gathered data in Mouse- flow and Tableau.

Using mouse flow I was able to look at scrolls, visibility, clicks rate and movements of the users using our website. I also watched recordings, focusing on the ones marked with high frictions.
I collected data for two different timeframes, taking care of the release date of specific features. I arranged the findings in two tables and documented in Confluence, reporting proposed solution for the placement of the new feature.

Using Tableau I could check the conversion rate of existing features from the Landing page to the other pages of the website.

Heat maps from Mouse - flow

4• Prototype

Low fidelity wireframes

using Sketch, I designed low fidelity wireframes to start the structure of the first version of the user interface. (These two are only a part).

Low fidelity

Interactive prototype

Once I was sure that I covered all the scenarios, and aligned with devs, I transformed the low fidelity wireframes in middle fidelity, adding the styles from our Brand library. I uploaded the art-boards from Sketch to InVision in order to create an interactive prototype to use for the upcoming usability tests. In this phase the designs were in middle fidelity.

5• test

Usability test

I recruited 6 participants and run moderated usability test for the whole journey, included the Customer Self Service portal.

I assembled a form for each participants to take notes, and then assembled an overall report of findings with notes, comments on pain point and happy points, observations, and proposed solution for iteration.

Iteration in high fidelity

Basing on the findings and comments I documented earlier, I iterated in High Fidelity.

Something more

During my assignment by SwissRe I was responsible also for the re-design of existing components for our Design Library:

New phone input field

Phone input field
Margins and paddings for phone component

New voucher fold for landing page

Designs for empty states in css

Illustrations for empty states

New tab navigation in CSS

Visit Altopiano – Touristic app

What & why

Altopiano delle Rocche is a wonderful plateau located in the regional Park Sirente-Velino in Italy. The economy of the plateau is mostly based on tourism thanks to its natural beauty and the presence of two ski resorts. Although the place is well known to the local tourism, the digital offering of the area is not up to date.

Currently, the information related to the activities, events and natural paths of the area are based on paper material, and it’s hard to find comprehensive information online on one single place.

The local touristic association Visit Altopiano delle Rocche reached out to me to understand how we could improve the overall tourism experience and make the tourists more aware of the surroundings.

My role

  • Identification of the problem.
  • Competitive analysis.
  • Feature ideation and prioritization.
  • Sketches.
  • High Fidelity wireframes and prototype.
  • Collaborate with Development during the implementation.

Design tools

Design tools

Design Process

Design process

1• Research

Stakeholder interview – requirement analysis

During our first contact with the local tourism organizations we tried to understand what type of tourism there was on the area, in order to identify and understand the possible needs of the users and how we could improve the digital offering.

It turned out that most of the tourism is based on recurring tourists: they primarily come in the winter to ski and then, fascinated by the natural surrounding, they return again in the summer.

Compared to the winter activities, summer activities are not as evident to users: in fact, this is a rural area where natural trails are not clearly marked and it is hard for tourists to find them. In this context, it becomes particularly important to empower summer’s sports visibility, in order to rebalance a bit the touristic offer.

User persona

User persona for Visit Altopiano

2• Define

In this context we decided that the best idea for a digital project would be to create a mobile application which leverages on the recursive affection of the tourism, where the territory would be seen as one and which can empower the tourist to easily access events, sport activities and businesses of the area.

We believe that unifying the offering of the area in one digital PLATFORM will bring more value for tourists and inhabitants involving our visitors to be more active “ALL ROUND”, bringing more value to each single local business.

Visit Altopiano delle Rocche

Competitive analysis

After the identification of the main entities to promote, and the kind of product that we needed to build, I proceeded with user research and competitive analysis phase. There is almost no direct competitor in the local environment, but I found many different competitors in other territories morphologically similar to the Altopiano delle Rocche plateau. The main references used for the analysis are: Zermatt (Matterhorn) App, My Livigno App, and Dolomiti.org.

Competitive AnalysisZermatt AppMy Livigno AppDolomiti.org
RestaurantsNoYesYes
Hotel BookingNoNoYes
Weather and webcamsYesYesYes
ShoppingYesYesYes
Trip PlannerAdding to FavoritesYesNo
ActivitiesYesYesYes
EventsYesYesYes
MagazineYesYesYes
Ski resort infoYesYesYes

3• Ideate

Design solution

If from one hand the prioritization of the macro-categories was clear enough, the repartition of them took quite a while especially because we needed to understand how to split each category based on their current data set.

Categories

We finally agree on a first proposal having the following features:

  1. Simple landing screen with a hero image.
  2. Scrolling down: the next section in the homepage shows the closest five upcoming events in an horizontal scrolling container (to not take too much vertical space) with a direct link to the dedicated events section. The event section contains all the upcoming events in a top down order: I designed as such due to the shift of high-low seasons which would make a calendar view half a way empty.
  3. Scrolling down in the homepage we find the list of categories, ordered according to the strategic business relevance:
    • Ski and Snowboard: it represents the biggest business preposition of the plateau. It contains a two tabs representing the two ski areas, each containing a detailed description of the ski resort, with direct contacts, webcams and links to ski schools and ski rentals.
    • Sport and Fun: contains all other sports activities as subcategories; hiking, biking and climbing trails, horse riding academies and one subcategory for all other sports (football, tennis, gym etc.).
    • Gastronomy: the offering of gastronomy of the area is quite rich, with more than 30 restaurants, bars, pubs and street food places.
    • Hotel and real estates: central for a touristic place, right after the most important categories.
    • Shopping: any sort shop from sporting, to artisanal shops, to typical mountain food shops.
    • Wellness: complementary to the rest of the offer contains SPA, beauticians and hair saloon.
    • Art and Culture: finally a reference to art and cultural places.
    • Outside of the categories there is only one additional page for the live weather with a widget for upcoming week forecast and the real time webcams of the villages and ski areas.
Impact - effort chart

We also defined other strategic features which were excluded from the initial proposal due to different reasons:

  • Notifications for the upcoming events. Excluded from the MVP for the complexity and the low value at this stage of the app (also due to the COVID). The clients are anyways considering to introduce it in a later version of the app.
  • Direct in app booking for events, hotels and restaurants. This feature was left apart from the MVP because most of the businesses on the Plateau are not particularly confident with technology and this seemed a really big step to the clients. The feature will be definitely considered for a later version.
  • Trip planner allowing users to add activities to their holiday plan. Since this feature was leveraging on the direct booking (excluded from the initial proposal) the value which a trip planner would bring is not enough compared to the implementation effort.
  • Add activity to favorites. It was left apart in favor of a future possible implementation of the trip planner. Additionally, the clients said that the app will initially have a small dataset.

Sitemap

Sitemap

4• Prototype

Sketches

I then proceeded with pen and paper sketches to create a draft proposal based on the result of the research. I had a couple of meetings with the clients where we went trough the ideas to define better the content and the possible features to support based on the main entities to highlight: sports, events and business places.

Low fidelity

High fidelity

5• Test & implementation

According to the timeline that Visit Altopiano delle Rocche proposed, the app was launched in February 2021 and is currently available on the Google Play store (iOS will come soon).

From the App

Download App

Pavot – Handmade soaps online shop

What & why

Pavot is a single-handled business that sells natural, handmade soaps. The client, the funder and soap maker, needed a website both to gain visibility and increase the sales.

For Pavot I designed a brand new, mobile first e-commerce for handmade, 100% natural, and beautiful soaps.

My role

  • Identification of the problem.
  • User research.
  • Feature ideation.
  • Workflow.
  • Sketches.
  • Low Fidelity prototype, iterate.
  • Style guide, Pattern library and accessibility standards.
  • Content.
  • High Fidelity prototype.
  • Usability test and iterate.

Design tools

Design tools

Design process

Design process

1• Research

Client’s needs & goals

The owner of Pavot is not only a single handed entrepreneur, but also the artisan and designer of the soaps she sells locally. She normally does it through word of mouth, but she desires as well a digital “show room” to gain more loyal customers and to increase her sales.

  • Digital show room to increase visibility and to reach more customers;
  • Online shop to increase sales;
  • Create a tighter relationship with the customers through the newsletters.

User Persona

User Persona

Adel contributes to sustainability taking responsible choices also when it is time to self’-treat. She found the online shop of Pavot while browsing with her mobile and started her customer journey.

2• Define

Brand philosophy

Artisanal, natural, vegan, local, clean.

100% natural, vegan soaps for anyone looking for self wellness in harmony with the nature.

Pavot

Competitive analysis

Competitive analysisLush.chiHerbEtsy
Search barYesYesYes
Add favoritesYes, but then are findable only after login NoYes, need access
Product suggestionNoYesNo
Continue shoppingYesNoYes
Create accountYesYesYes
Guest checkout YesNoYes
ReviewsYesYesYes
Order historyYesYesYes
Apple payNoYesYes
Competitive Analysis

3• Ideate

Features ideation for Pavot

  • Product categories;
  • Product search;
  • Product suggestion;
  • Product details;
  • Product reviews;
  • Add product to favorites;
  • Login/Sign up or
  • Checkout as a guest;
  • Account;
  • Order history;
  • Help & contacts.

User flow

User Flow from the moment the user lands in the Pavot’ s homepage until the place of the order.

Sitemap

Sitemap

Design Decisions

When the user lands to the Pavot homepage can:

  • Search using the search bar. Autocomplete, predictive text.
  • Add product to favorites: this action is possible also if not logged. The favorites are stored in cookies;
  • Add products in basket: here the user is asked to login or to sign up/ continue as a guest. The “continue as a guest” feature is the reason for allowing the users to save products in “favorites” without signing in.

4• Prototype

Sketches

Low fidelity wireframes

Style guide

Style Guide

High fidelity wireframes

Homepage

Navigation bar with hamburger menu, Pavot’s logo, search bar, favorites and basket.

An horizontal line always highlights where the user is.

Hero image with value proposition message.

Scroll down to browse products in product categories. Products slide to left.

Product details page

  • Hero image and 3 miniatures;
  • product details;
  • reviews;
  • CTA to add to basket: rounded button and big button;
  • more suggested products.

New customer registration

  • Short form with the essential required data to proceed to create the account or
  • continue as a guest; tertiary button.
  • Term & Conditions plus privacy policy agreement checkbox;
  • Newsletter checkbox.

Other frames

Prototype

Bar Voce – Digital strategy during COVID-19 pandemic

What & why

From the beginning of March 2020 the world stopped due to the Covid-19 pandemic. Italy has been at the centre of this tornado with a lot of cases and business shut down. The month of May brought some hope and some activities started to reopen with strict safety measures.

Among those, the regulatory requirements demanded cafeteria to disinfect menus on every person browse. In this context, the owners of Bar Voce were looking for a digital solution to prevent its employees to loose time in manually disinfecting the menus, and also allowing their customers to safely browse it.

My role

  • Identification of the problem.
  • User research.
  • Feature ideation.
  • Workflow.
  • Sketches
  • Low Fidelity wireframes and prototype, iterate.
  • Style guide, Pattern library and accessibility standards.
  • Content.
  • High Fidelity wireframes, Prototype.
  • Support during implementation phase.
  • On person observations and iterate.

Design tools

Design tools

Design process

Design process

1• Research

stakeholders interview – REQUIREMENTS ANALYSIS

During the first discussion with the clients, their initial idea was to develop a mobile app. I suggested them that this solution was not optimal for their use case: the use of the app implies the users to download it from the store and the time needed for this operation would have slowed down the ordering process. Furthermore the bar did not have a Wi-Fi connection, so the users would have to use their own data connection to download the app.

I then moved the discussion towards the implementation of a tailored website-menu which was coming more easy to use and fast approaching, therefore more suitable for a fast serving bar. The website would be reachable through the scan of a QR code, easing even more the ordering process.

A parallel low-budget idea was to publish a browsable PDF version of the menu and expose it on a dedicated url. I implemented a light version of it but together with the owners of the bar we saw that the final experience for the clients was not appealing. Most important, due to the flat browser interaction on a small screen, was a not a user centered solution.

Finally, we all agreed that a mobile-first website would be a perfect solution, delivering a digital user friendly menu which would look like an app but with a fast access. Additionally, this idea could kill two birds with one stone, as the bar did not have a business website yet.

Another client’s important requirement was to not delay the time of the ordering process. Therefore we all agreed that the website had to be very functional and with as less distractions as possible.

Additionally, the bar needed to have the possibility to change the products on the menu depending on the availability, so a back-office section dedicated to the staff was also strictly required.

User persona

User Persona

2• Define

the 4 “w” for problem statement

Who is experiencing the problem?During the Covid-19 pandemic, customers don’t feel safe using a menu touched previously from many others.
What is the problem?The Covid-19 virus transmits itself also through contact of an individual and an object contaminated form the virus.
Where does the problem present itself?The problem occurs during the moment when the waiters bring to the tables a non-disposable menu.
Why does it matter?The customers will feel safer knowing that using their own device will decrease the chances of infection.

The solution is a single page website where the menu’s categories would be immediately accessible with secondary sections dedicated to all the other activity details.

3• Ideate

feature ideation

I then proceeded with the design with paper sketches, also to show to the clients a first prototype idea. We had a dedicated meeting to align on the expectations and we finally agree on a design proposal having the following features:

  • Landing screen with value proposition message to introduce the clients to the brand identity.
  • Scrolling down the menu’s categories, according to the rationale identified previously. Those categories are CTA buttons for the relative category page containing the product’s list.
  • Continuing scrolling down a second preposition message with an explanation of what the bar offers.
  • Scrolling more down there is an interacting slideshow proposing home-made pastry and artisanal cakes, which is the one of the most important business product that the bar offers.
  • Then the address of the bar and a map which would be linked to Google Maps when tapped.
  • Finally a footer with social media icons linking to the social pages, and the system phone call dialer.

DESIGN CONSIDERATIONS

The website should have a mobile first approach for its primary purpose, so the first design proposal was optimized for small and mid sizes devices. On the other hand, being accessible also from desktop, the website should scale correctly for bigger breakpoints. I designed a fluid design, where the content would display on half of the screen width for bigger devices.

4• Prototype

Low fidelity

Homepage in low fidelity
Gelateria low fideloty frame
Caffetteria's low fidelity frames

Style guide

Style guide

High fidelity

We agreed with the customer on the low fidelity proposal so I just moved into the design of high fidelity screens

Prototype

5• Test & implementation

The design was much appreciated by the client and the proposal moved forward to the implementation stage. The process was followed by a freelance web developer: we had an initial meeting where we went trough the design choices, the rationale of the decisions taken with the business owners and the prototype.

During the implementation we had a couple of points of touch to discuss and review the state of the work. Once the website was fully implemented, we had a final comprehensive review to evaluate the results on a UI/UX POV.

Finally I also took care of the design of the QR code holder which is on top of the table and introduces the customers to the online menu.

Barvoce.it was successfully launched the 3rd of June. Some days later I had a trip to Italy to visit the bar and see the product actually in use. The users declared that the product works efficiently and it easy to use. The only exception applies to the older people which are not really confident with technology. For those we still mitigated for a solution with the owner of the bar: they provided two tablets for the waiters to bring to the table whenever they identify or are asked for help in the ordering process.

Your Home – Real Estate Cross Platform

What & why

Your Home.ch is a cross-platforms design for a web app which can be deployed as a market store app or browsed through internet.

“Your Home.ch” is a project focused on the way users do house-hunt online. The idea shaped during the Covid-19 pandemic. I was starting my User Experience Nanodegree, therefore I decided to investigate the Real Estate portals’ world, seeking for pain points and new opportunities to deliver a user-tailored experience
Users often don’t know about the place where they need to relocate. Furthermore, sometime the solution must be found remotely.

Duration: 27th April – 19th May 2020

My role

Your Home.ch is a end to end project and it covers all the aspects of a User Experience and Interface case study:

  • Identification of the problem to investigate.
  • Competitive analysis.
  • User researches for qualitative and quantitative data (interviews, surveys and personas).
  • Synthesis of the collected data (affinity maps, feature ideation, feature prioritization).
  • Sketches, sketches, sketches.
  • Workflow and Lo- Fi prototype, iterate.
  • Style guide, Pattern library and accessibility standards.
  • Content
  • Hi-Fi prototype, iterate.
  • Usability test and iterate.

Design Tools

Design tools

Design process

Design process

1• Research

User persona

Semi- structured interviews

I recruited 4 participants for semi-structured interview sessions. I then organized the datas in a Miro whiteboard with affinity diagrams.

To read the notes please visit the Miro Whiteboard

–Research report

– Miro whiteboard

Survey to collect quantitative data

The next step was to run a survey to validate or not the qualitative datas collected with the semi-structured interview. It was shared within targeted users living in 3 different countries, therefore adopting different portals for their house hunting sessions.

Key findings from researches

«I never found services like post offices, supermarkets, pharmacies in the map or in the advertisement, I had always to leave the website and look at them by myself».

Participant 2
  1. Users declare they prefer a Pc to look for a new house, but they use more often the smartphone, even when they are at home.
  2. Surprisingly, the price of the house is important but is not the priority number 1.
  3. 3 participants of 4 admitted that their number one priority is the position of the house.
  4. 3 participant of 4 admitted that the presence of nearby services of a potential house is important or very important.

2• Define

Competitive analysis

Focused on the features used for the actual research moment and on the most important portals of Switzerland (homegate.ch), Italy (immobiliare.it) and USA (Zillow.com).

3• IDEATE

Feature ideation and prioritisation

Through the Synthesis of the datas I ideate the following features:

  • Add “Nearby services” in filters;
  • landing in a map view and
  • show the prices on the map;
  • switch to a List view;
  • show desired nearby services on a map when selected in filters;
  • favourites;
  • notification;
  • on site notifications;
  • account needed for on site notification and to publish advertisements.

For the feature prioritization I collaborated with an experienced software developer and engineer. Thanks again!

It ended up that the Key features, challenging and strategic to implement are:

– the switch between the Map and List view;

  • receive notification;
  • favourites.
  • GPS- on site notification, for which I had to strive a bit, since it is very difficult to implement but actually feasible and strategic.

Easier to implement, therefore less strategic but also fundamentals features are:

  • Main Filters
  • Prices on Map
  • Additional filters;
  • Services on map.

Important decisions

During this stage:

  • I categorized the main filters and the additional filters. The main filters are displayed on the Landing / Homepage and their function is to narrow down the research to a primary scope;
  • User arrive to a Map view of results with interactive price tags, so that the price and position priorities are conjunted in a single view. Of course has the opportunity to switch to a classic List view at any time if wished;
  • I abandoned the idea to divide the map in zones because I realized that is either a too exclusive either a too inclusive action for the users to take: if they know already where, what is the point? If they know already where, how does it help? Does the user know if the locations at the border or just outside the border will be considered? Does a particular user need this consideration or not? What is the benefit at the end? Those and more were all the questions that brought me to the conclusion that the division in zones is fancy but not so useful and that a single interactive map tailors the research to the user needs.

Workflow

During the sketch stage I also started to think about a logic workflow for the users to use the app/website.

The flow I am going to illustrate here is

The journey that the users do from the beginning of the research until the moment they will contact or not the advertiser.

It is not shown the entire asset of the platform fuctionalities.

Flow from the beginning of the house hunt until the contact with the advertiser.

4• Prototype

Sketches

With this good quantity of datas I finally started to sketch, I am happy to share with you some of sketches, which are representative of different sketch phases: from the very first until the more defined ones.

Sketches on different stages of ideation. You can also find them on the Whiteboard.

Low fidelity wireframes

Finally it was time to bring the best ideas developed during the sketch phase in the digital world. After the first iteration, I tested the interactions and resulted that was difficult for the users to identify the List/Map View and Filters buttons on the first flow. Therefore it was needed to iterate with a second version that you can see below.

Design patterns, style guide and accessibility

Finally, I transformed the Low Fidelity prototype in the first High Fidelity prototype.

The Design Patterns I selected are very common and usual to the users. The design is kept to the functionalities without forgetting desiderability in the graphic design.

As usual, I dedicated special attention to color accessibility before to set my color palette. AAA is the goal!

Color contrast ratio in color palette scores AAA on all combinations.

Time to iterate

To have a more complete idea on the usability of the flow before to run a usability test, at this stage I added:

  • the “Nearby services feature” in the filters view;
  • the “Advertisement details page” with all the related house information, the new added Nearby services on map, and advertiser’s contact info and contact form on pop-up, accessible with a floating button.
Detail of the section of the filters where the nearby services were added

5• Test

Using Look Back I recruited participants to test the prototype,.

Insights

  • 40% of participants did not tap on the Price chips on the map to interact with them although asked to interact with the map.

I observed users were unable to find the call to action on the map and on the filters because they didn’t look clickable.

Time to iterate

According to my observations, I added a shadow effect also on the prices on the map containers, that took the tooltip shape.

High fidelity wireframes

Prototype