CLARA ZORZOLI
Clara is a freelance digital product designer based in Berlin.
With over a decade of diverse design experience, she has left her mark on a wide range of projects, ranging from crafting comprehensive Design Systems and intuitive interfaces to designing typefaces and immersive experiences.
Her portfolio spans the digital and physical realms, encompassing the design of services, editorial publications, data visualisations, animations, album covers, and product packaging.
With a keen eye for detail and a passion for tackling complexity head-on, Clara is now dedicated to crafting innovative solutions that sit at the core of the product experience.
-
Email /
Resume /
LinkedIn / Instagram INDEX / 03 URBI
Designing the experience of moving around the city
Advocacy and creation of a Design System
Design of the app UX and UI
Responsible of the entire app process, from MVP to the stores
Urban MobilityURBI is the app that aggregates the sharing mobility (car, scooter and bike-sharing), with urban mobility services, like Uber, taxi, and public transport. In just one app the user can find and book every service, hassle-free.
The opportunity
The design challenge started by taking an opportunity that came from the developers, who wanted to re-write the code of the application. I jumped on the conversation and proposed to follow a hand-in-hand process and redesign the experience and the interface too, knowing that also from the design side, the app was in need of some reorganisation.
First of all, we gathered data: analytics of the app, costumers reviews, suggestions coming from coworkers, competitor analysis, and all the other information that allowed us to identify both the pain points and the opportunities to improve. We then categorised them and put them together in a mind map to always have a reference.
We then prepared a survey to go deeper on the studies of the users' needs, as well as to test some of ours inevitable assumptions. We were also looking at how different was the use of the app in all the cities we covered (around 30, mostly in Europe).
The survey had both closed and open questions to gather quantitative and qualitative data. After getting around 800 entries we again organised and categorised them by evidence, interpretations, and implications.
It then turned out that our users:
- think the map is overcrowded and slow
- are willing to walk to the closest vehicle if this is within a 10 minutes radius
- already know before opening the app what kind of vehicle they are looking for
- do not log in because the process is unclear
- do not know where in the app they can compare solutions
- take public transport as the first option when there aren't shared vehicles around.
Which translated in working on the vehicle detail, the map filters, a better reservation flow and a clearer comparator. Having this in mind we started sketching solutions, with the focus on the map.
The solution
After some iteration and tests, we released the first MVP of the new URBI app, with a renewed experience.
To overcome the problem of having an overcrowded map, we introduced a drawer, with toggles for every service category that Urbi offers. In this way, it is now possible to quickly filter out the unwanted categories and have a lighter and focused map. The map now also displays a walking radius, to understand have a better overview of what's around.
Right after the filters, the public transport closest departures are listed to allow the user to have always at hand option B. Finally, just on the top of the drawer, a search bar with the right call to action, guide the user to the comparator section, in which they can find all the solution to reach their destination, and pick the best one.
On the vehicle detail section, the buttons were redesigned to make it more clear which are the steps the user should follow in order to be able to reserve and open a vehicle. Furthermore, a completely new "booking section" was created, with more space for the secondary action, as well as more control over each reservation.
The Design SystemTo design the new app, I also proposed to be in charge of the creation, documentation, application and maintenance of the Design System. Urbi grew very fast and after two years of adding features, the product became incoherent and difficult to scale. Also, to be asked to build white labels was getting recurring, and in that context, it was each time more painful and chaotic.
I started by analysing the actual app by making a design inventory. I made screenshots of every page and put them together in a deck. I gathered and identified all the different elements and components, categorised and then merged them. I wanted to understand how deep we needed to go.
Meanwhile, I tried to figure out what kind of system we, the users, needed and what would have been the best model to use. The team was a small one (around 12 people) and the environment not mature enough for big changes. Resources were scarce and time always a big constrain. Plus, we mostly developed mobile apps, except for a couple of landing pages and a b2b dashboard, so we didn't have many different platforms to work on. Going for a light design system, with a centralised team model, seemed the right way to start.
I then collect our design principles and, together with the inventory and the model, made a kick-off presentation to align with the rest of the future users and get more people onboard.
Thanks to the interface inventory I had a clearer idea of which were the key screens, and I started from them to create and test the primitives of the system: space - the relationships; size - the hierarchies; style - the visual content. I created a refreshed visual language and made the style guide for colors, a modular scale for typography, iconography guidelines.
Atomic DesignI started designing the first molecules and components to test them and to understand, together with the developer, the best way to create the documentation, the best place to store it, and the best tools to collaborate. We also created a design showcase, inside the test app, to see live all the behaviours and interactions.