Mobile Photo Crop
The problem
- As a business we need to make sure that all the property listing have at least one main picture of
the flat and that the picture is uploaded at the desired height and width ratio.
- As a user I have to be able to upload my property picture in a easy and intutitive way.
- As a user I have to be able to do it from my mobile phone without leaving the posting form.
- As a user I have to be able to easily review the picture I just uploaded.
- As a user I have to be able to take multiple pictures and decide what picture will be the default ad
picture.
- As a user I have to be able to delete pictures I just added.
The Persona:Landlord or Estate Agent or Flatmate
The Scenario: The actor is in the property filling the ad and taking pictures of the
property or he's using his mobile device where the property pictures are stored.
The final prototype I designed is fully interactive and wrapped in a responsive mobile viewer tha will
disappear on a mobile viewport, so feel free to use "The Solution" on your desktop or mobile device.
Please just use Chrome browser.
The Solution
The prototype features are described below.
Paper prototype and preliminary user testing
The initial discussion took place within the business stakeholders and the UX team and generated a
productive and smart iteration of solutions and flows that we were able to test on a controlled group of
users.
The early user testing identified some frictions in the task flow that were promptly addressed and
iterated.
Prototype features
The prototype can be viewed on desktop and mobile browsers, but on desktop will be framed in an mobile
template as the prototype is intended exclusively for the mobile market (the desktop WebApp will have a
slightly different solution).
The main screen welcomes the user with a massive call to action that will invite the user to add the
first picture, on the bottom there is a secondary call to action that allow the user not to add any
picture (the size and the position are a disincentive to this action).
Clicking on the "add picture" button, the prototype will skip the mobile OS specific flow to add the
picture (Use camera or browse your gallery) and will show a fake cropping tool panel that allows the
user to confirm the action and add the picture or cancel the upload.
The new picture will be shown instead of the big call to action so that the user will soon see the result
his editing action.
The overlay controls will be shown for a second to suggest to the user that he can interact with it via a
simple tap on the picture.
After the UI hint, the picture will be labelled as default.
The "add picture" button will now appear on the top right part of the screen (please try it and add more
picture to test the interactivity: note that the fake cropping tool will always look the same).
The last picture added will always appear on the first portion of the screen (inverted order) to allow
the user to see straight away the result of his recent action and not force him to scroll down when more
picture are added.
The user can make other pictures the default one or delete them: a transition will help the user to have
an instant visual feedback of his deleting action.
If the default picture will be deleted, the first picture (the last added) will be automatically labelled
as default.
Back to the projects
Property posting form (Desktop)
The problem
- As a business we need to increase the number of property listings and solve the accessibility and
usability issues of the old posting form.
- As a business we need to prioritise Professional users instead of students and flatmates.
- As a user I have to be able to list my property in a fast and easy way.
- As a user I want to be able to easily locate my property on a map.
- As a user I don't want to answer question that don't apply to my situation.
The Persona:P1--> Estate agent and Professional ladlords;
P2---> Flatmates
The Scenario:The actor is in his office filling the property ad.
The final prototype I designed is fully interactive, so feel free to use "The Solution" on your desktop
device. Please just use Chrome browser.
Note - The solution is not responsive as the WebApp at
EasyRoommate had a separate mobile platform.
The Solution
The old form was simply... a mess :-(
Preliminary data analysis and heuristic evaluation
The first challenge was to undestand what wasn't working in the form and why so many users were simply
bouncing it.
It was too easy to blame the uglyness of it: the problem was deeper. The form wasn't designed with a user
in mind, the form was designed by a developer, years back, to meet business requirement dictated by the
logic of the matching search engine.
The whole form was designed without accessibility in mind and pretty much all the input type where "text"
Almost all the fields were mandatory and most of the sections titles weren't really making any sense:
- why I have to fill a mandatory section for a triple room if I am here to advertise my studio flat?
- what is actually the T3 section???
After the analysis of the quantitative data and after a heuristic evaluation of usability and
accessibility issues of the form I was ready to redesign the Information Architecture and to collect
qualitative data by running in house usability testing and user interviews.
I collaborated with front-end and back-end developers to understand the level of technical debt we had,
before jumping in the design and prototype phase.
At the same time, I was collaborating with Business stakeholder defining the optimal Information
Architecture for the correct personas we were targeting.
With the information gathered, I started iterating quick HTML protptypes based on the UI Brand library I
created few months back.
Thanks to that approach I was able to test and learn very quickly and we were able to iterate through 15
form variations in less than two months.
Form features
The form has been designed following a F-Shaped reading pattern to avoid left-right eye movement to a
minimum.
The form is divided in meaningful sections that help the user perception of a more agile structure.
The left part of the screen is reserved to the sections labels that work as sticky breadcumbs: The user
will always know where he is and why we are asking him a specific question, this will reduce
frustrations and User "lostness".
The central part of the page is dedicated to the main form itself and uses a reduced width wrapper to
contain the UI elements in a comfortable reading area.
The labels are on the top of the inputs to avoid the Z-shaped reading pattern (left – right – bottom-left
– bottom-right) that would be tiring and confusing on a very long form.
The form is “smart” and follows the design pattern of “progressive disclosure” of the information,
learning from the answers collected: Thanks to this feature, we managed to reduce the number of
questions by 16 in certain scenarios.
For instance, if the user is renting an empty property, when it comes to the question: “Number of
housemates already living there” will reply ZERO.
This will leave the form as it is because we don’t need to collect information on the components of the
flatshare, but if at least one other person is present in the flat, then an extra section of the form
will be revealed and the user will have to answer some more questions.
Even in this “worst” case scenario the overall use of smarter UI elements like multiple choice buttons
with visible explicit values instead of dropdowns, will make the filling of this section extremely easy.
The dropdowns (when inevitable) have been optimized to be filled with smart defaults.
So in the scenario of the user answering 4 questions (Occupation, age, gender and smoking habits) about
his flatmates, the task can be completed in just 3 clicks:
- Flatmate occupation is exposed (1 click)
- Age range is conveniently pre-filled: 18 to 99 years old (No click)
- Flatmate gender is exposed (1 click)
- Smoking habits is exposed (1 click)
In an “old school” scenario using dropdowns for all these questions with a placeholder like “select a
value”, the clicks to answer 4 questions would have been 10.
The validation is immediate and in most of the cases is inline, the user is not “allowed” to make
mistakes thanks to forgiving patterns and exposed options.
The right part of the screen is reserved to the input hints and the validation alerts, doing so we can
use a bigger space to serve more meaningful messages without constrains and without polluting the main
form flow.
The user testing revealed that none of the user personas was bothered by the vertical length of the form,
and so we could avoid the typical cloning of the “Airbnb” distracting step to step experience.
Our flow is more consistent and doesn’t drag the users in unknown “next page steps”: our users know from
the beginning what to expect and they can easily estimate the time required to fill the form.
Thanks to this massive restyle and to the optimized user flow and experience, the time required to fill
the form dropped from an average of 5 minutes to a whopping 3!
The bounce rate was reduced by 15%
The Ability to Accomplish (A2A) went up to 87% (previously it was 60%)
Registered users went up of 6% in the first month.
Back to the projects
Property posting form (Mobile)
The problem
- As a business we want to offer a limited version of the property posting form to mobile users.
- As a user I have to be able to list my property using a mobile device.
- As a user I want to be able to easily locate my property on a map.
- As a user I want to input the bare minimum information about the property.
The Persona:Estate agents, Professional ladlords and Flatmates
The Scenario:The actor is on the go (possibly at the proprty location) filling the
property ad.
The final prototype I designed is fully interactive and wrapped in a responsive mobile viewer tha will
disappear on a mobile viewport, so feel free to use "The Solution" on your desktop or mobile device.
Please just use Chrome browser.
The Solution
Prototype features
The prototype form simulates the integration with the google autosuggest results: as soon the user start
typing an address, few suggestions appear and when the user pick an address, the rest of the first part
of the form appears.
It will be pre filled with values coming from the Google API , but the user has the ability to modify
them (but not the main City field).
All the labels use the floating labels design pattern to minimise the vertical use of space.
When the user is happy with the main address he has to confirm his position on the map.
The position will come from the Google API, but the user will be free to change it.
If the user choose to change the position on the map, a toast message will notify him that the position
is been updated, so that he will have a prompt feedback of his action and will feel more confident to
proceed to the next step.
If the position is completely wrong he will be free to go back to step one and double check if everything
is ok and also re-insert his address.
When he will be happy with the map, he will proceed to step 3, where a title will reconfirm him his full
address.
Here the user will again have the ability to change his address via a link that will bring him to step 1.
If he is happy, we will ask him to fill the remaining information about the property and about him.
All the field use correct semantic types and will trigger the correct mobile keyboard on real devices
(numpad for price and phone number, email for email address)
Back to the projects
The Unified inbox (Responsive)
The problem
- As a business we want to generate more users engagement via message activity.
- As a user I want to access all my messages at once.
- As a user I want to label messages related to different ads or properties.
- As a user I want to filter messages related to different ads or properties.
- As a user I want to follow easily the conversation threading
- As a user I want to access my messages via mobile or tablet.
The Persona:Estate agents, Professional ladlords and Flatmates
The Scenario:The actor receives a notification and wants to check and reply to a
message.
The final prototype I designed is fully interactive and responsive, so feel free to use "The Solution" on
your desktop or mobile device. Please just use Chrome browser.
The Solution
Early design iterations and user testing
The project objective is to unify the experience of the mailbox for users that have more than a property
listing on our website.
At the moment if a user is listing more than a property on our site he has to select first which
property he want to interact with (via a “my ads” page), then he will access the mailbox for that
specific property only, to read and interact with the messages of the listing #2, the user should switch
to property number 2 and re access the mailbox again.
This is pretty frustrating and time consuming for our users (especially large accounts of Estate
agents or large landlords firms with many listings) so we had to develop a smart system to unify the
mailbox of all the properties and offer an easy way to filter and interact with them.
The first stakeholder interviews and other user surveys revealed that there was a strong desire of
walking away from the old style mail message look and feel and user experience and in favour of a more
conversational User Interface.
I started explore some options that could work on our old brand guidelines, I collected valuable user
feedbacks and I iterated constantly, landing to the final inVision prototypes that integrated the new
functionalities and the brand guidelines that happened meanwhile - Yes, I designed the new brand
guidelines as well :-)
The final HTML prototype
inVision prototype remote and guerrilla testing produced 20 functional and style iterations. The feedback
collected, allowed me to create a high resolution HTML interactive prototype that was used to run final
usability testing and used by front-end and back-end developers as a feature guide.
The aside panel offers an easy access to the message "labels" so that the user can choose if he wants to
read all the messages no matter the property of just visualise only the specific property (or
properties) messages.
Every label has a counter that shows the number of the new messages (the notification icon in the header
sums the total of the new messages for all the ads).
The select and delete logic flow is fully functional: select the messages using the checkboxes and cancel
the selection or delete the selected messages (in desktop you have the select all/none controller that
is not present in mobile).
The disabled messages ("user is no longer active" subject line) are not going to be clickable but
selectable (to be deleted).
Clicking on every active message will lead you to a dummy conversation with Vanessa where you can test
the functionality of the chat.
Every time you post a reply, after 5 seconds Vanessa reply with a "lallero" (the Italian for whatever),
if you post more than a message before Vanessa replies you can see the style of the concatenate messages
and the concatenate replies on Vanessa's side.
In the mobile view the textarea and the send message button follow the instant message apps style
(Whatsapp and Co).
In the mobile view, as soon the user focus the input to write his reply, the header of the page will
disappear to allow more operational/reading space on small mobile screen that will have the onscreen
keyboard plus the browser native command bar, plus the mobile system header/footer occupying a large
amount of space.
The "show phone number" button is a two-step button: first step/click reveals the number (and allows
tracking the user engagement), the second step/click allow the user to call Vanessa.
The aside panel that in the desktop view shows the inbox/sent/trash buttons and the message labels
filters, in the mobile view become a 2 part component: the buttons (inbox, sent, trash) become the sub
header of the message page, and the message labels filter panel becomes a hidden sliding component that
comes out when the user clicks on the ''filter messages button" (the filter functionality is not
functional in the prototype).
This prototype is now live and is been used by millions of users in the last few months.
The customer satisfaction is high and the engagement among users had a massive jump up.
Back to the projects
The Property map search (Mobile)
The problem
- As a business we want to generate more engagement on the mobile platform.
- As a user I want to search for properties using my mobile phone.
- As a user I want to browse the search results on an interactive map.
- As a user I want to easily swithc between list and map search.
- As a user I want to perform a search using the built-in GPS of my mobile.
- As a user I want to filter my search results easily.
The Persona:Estate agents, Professional ladlords and Flatmates
The Scenario:The actor is searching for properties while commuting or while exploring
his favourite area.
The final prototype I designed is fully interactive and wrapped in a responsive mobile viewer tha will
disappear on a mobile viewport, so feel free to use "The Solution" on your desktop or mobile device.
Please just use Chrome browser.
The Solution
Preliminary design and testing
After detailed stakeholders interviews, I designed several iterations of the new mobile search webapp.
The prototypes were tested in unmoderated remote sessions and in hallway and guerrilla testing.
The initial low resolution prototypes were produced and shared via inVision.
Thanks to the test results and the collected feedback I was able to quicly iterate the design and produce
an High resolution HTML interactive prototype.
Prototype features
The new mobile header is now structured like a native app: logo is centred and the main menu will be
displayed at the top left corner (with the usual notification icon for messages) and it will contain the
links to the main areas of the application.
On the top right side, the user will find the context menu for the specific interaction with the page he
is browsing.
In this specific prototype it will be the advanced filters panel (in the mailbox scenario will be the
message filters panel, for instance).
The sub header has now a permanent search bar integrating the Google autocomplete API (Not included in
the prototype - the results displayed are dummy).
The bottom right part of the screen has a floating button that will switch the view from list to map and
vice versa.
The styling choice of a flipping transition is not random or for the sake on fanciness, it is been made
to suggest the user that the two views (list and map) are two different sides of the same coin (same
results - different view styles).
In the map view, the pins are clickable and will display always the same dummy result.
The pins have three different states to help the navigation: not visited, active and visited.
The advanced filters panel is been populated with custom and very powerful UI elements:
the user will find, as a first controller, a slider that will allow him to set the range of the search
in Km around his position, then he can set his minimum and maximum price thanks to two twin inputs (the
price inputs are accepting only numerical values, every other value will not be accepted and will fire a
soft validation styling (the input and the label in red), an optional validation message will be
implemented in the next release).
The inputs use a custom floating label design pattern to maximise and rationalise the available space in
the form.
more UI elements include dropdown select (with floating labels), customised checkboxes and dual switches
(radio buttons).
The "apply filter" button will simulate the loading transition
Back to the projects
Three Pay as You Go Optimisation
The problem
- As a business we want to promote Pay As You Go as a desirable product.
- As a User I want to be able to access all the information before purchasing a Pay as You Go SIM.
- As a user I want to know that there are no hiddend costs.
The Persona:Young students, first time customers, senior citizens
The Scenario:The actor lands on the PAYG page from a sponsored ad or from a affiliate
page and wants to explore the PAYG catalog and info.
Case study coming soon...
Spoiler: it changed the business point of view on some old products and it oprimised the
sales funnel!
Three January Sales
Case study coming soon...
Spoiler: it introduced a new way of working for the Three product teams and it smashed
the YOY sales revenues!
Lebara SIM Registration
Case study coming soon...
Spoiler: It fixed a massive drop in the sales funnel and it was the first evidence based
design solution at Lebara!
Lebara Top-up redesign
Case study coming soon...
Spoiler: It rationalised the main revenue page product catalog and it scored top ratings
during the qualitative tests!
Lebara new Plans page
Case study coming soon...
Spoiler: it solved the biggest problem of the lebara website aka the discoverability of
the products and it removed at once the multiple product pages bounces!
The tests with more than 50
users worldwide were made on a State-of-the-art prototype using real catalog data and live sorting and
filtering logic.
Pokerstars Instant Bonus and Free Spins redesign
Case study coming soon...
Spoiler: it modernised the announcment and the layout of two of the main engagement
drivers. it solved many known issues related to the discoverability of the bonuses and it introduced and
UX standards at Pokerstars!
The UX methodology at The Stars Group
Case study coming soon...
Spoiler: How I changed the way UX is made and delivered at the Stars Group.
Lebara UX Roadmap 2018
As the Head of UX and UI at Lebara I've presented a detailed report to the Senior Management about the
status of the Web and App products, along with a rigorous Roadmap (based on the Lean design process I
defined at Lebara) to optimise UX and UI issues with a clear estimate of the go-live dates.
In the report I provide evidence-based rationale to take actions and I provide links to the deliverables
produced at various stages of the projects.
Feel free to navigate links and try the solutions (many of which have been pushed live meeting the
predicted deadlines)
The Report
