Design Task for the application process at smood.ch
Business Case Scenario
I have been asked to conduct a study to understand how collection of food at restaurants in Switzerland works and what the restaurant’s needs are. In particular: identifying their workflow, understanding how the smood.ch platform fits into their daily operations, and identifying opportunities to help smood.ch improve our offering.
Collection of food from restaurants is important to smood.ch for two main reasons:
The research shows that normally people pick up food on their way home on average 4 times a month. We could help make that process better for our customers.
Collection helps smood.ch to provide a new selection of restaurants to customers that might not be available for delivery, leading to increased order volumes for our business and restaurant partners.
Some key points
Today the platform is based on delivery workflows and address for delivery. For restaurants and customers doing collection this might not work, since the restaurant can be very far from the delivery address.
Customers normally do pick up during lunch time (restaurants near the office) and on their way home (restaurants that are en route home).
Customers during lunch are more price- and speed-sensitive.
The task
Prepare a presentation which addresses the following:
Gain understanding of the collection workflow from receiving an order to customer pickup.
Identify key differences between delivery and collection customer journeys.
Identify opportunity areas for smood.ch in the food collection area.
Include an example of a collection customer journey you have identified.
Persona
User flow
The diagram shows the flow from the moment the user receives the notification of a pick-up order, until the moment the order is successfully picked-up from our user’s customer.
Concept user journey
This user journey diagram is meant to show the pain points and happy moments of the user during the above described user flow.
Prototype
Here the link to the prototype. I recommend to look at it using a Desktop-device.
Designs
Presentation
This short presentation is meant to show how I would have approached this digital B2B product.
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
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.
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.
2• Define
Impact mapping
ImpactMapping 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: Whydo we want to do something?
Who are the actors / personas which have an impacton the outcome?
How does the business goal have (positive / negative) impact on the behaviour of the actors?
What are the deliverablesto spark impact and to achieve the goal: Epics, Features, User Stories
User Story to bring into the backlog
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.
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.
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).
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:
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 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
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 ALL 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 the 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 Analysis
Zermatt App
My Livigno App
Dolomiti.org
Restaurants
No
Yes
Yes
Hotel Booking
No
No
Yes
Weather and webcams
Yes
Yes
Yes
Shopping
Yes
Yes
Yes
Trip Planner
Adding to Favorites
Yes
No
Activities
Yes
Yes
Yes
Events
Yes
Yes
Yes
Magazine
Yes
Yes
Yes
Ski resort info
Yes
Yes
Yes
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.
We finally agree on a first proposal having the following features:
Simple landing screen with a hero image.
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.
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.
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
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).
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 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 analysis
Lush.ch
iHerb
Etsy
Search bar
Yes
Yes
Yes
Add favorites
Yes, but then are findable only after login
No
Yes, need access
Product suggestion
No
Yes
No
Continue shopping
Yes
No
Yes
Create account
Yes
Yes
Yes
Guest checkout
Yes
No
Yes
Reviews
Yes
Yes
Yes
Order history
Yes
Yes
Yes
Apple pay
No
Yes
Yes
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
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
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;
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 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
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
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.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 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
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
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.
Surprisingly, the price of the house is important but is not the priority number 1.
3 participants of 4 admitted that their number one priority is the position of the house.
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.
