Latest work as Product designer (2019-2021)

Here is a preview of my most impactful work from 2019 to 2021.

In the first projects, you can see what I’ve done as UX/UI Designer in my Product-based roles. At ViriCiti the main focus was on new features, product redesigns, internal and data visualization tools, while also contributing to the Design System that started getting implemented across all products. ViriCiti’s B2B clients are electric & diesel-powered Public Transport Operators, bus manufacturers, and grocery deliverers using electric vehicles.

Next to my work at ViriCiti, I wanted to have a positive impact on a more personal level. During the first months of the COVID-19 crisis, I volunteered in my spare time with different Product/UX Design teams in the healthcare and food industry.

In my current role at myTomorrows as UX Designer, I am working on designing new platforms for patients, pharma clients, and physicians, as well as building additional products such as landing pages and mobile apps. My team is also focused on redesigning, improving the design system and finding new innovative ways of working. In my daily work, I collaborate closely with many members of the Engineering team and keep in mind business needs by attending client meetings and conducting UX research sessions with different stakeholders. An important part of scaling up the products is related to driving User Research more systematically and involving end-users such as patients, physicians but also internal and external stakeholders during all design steps.

1. SIM Card Management tool (ViriCiti) – redesign

Role: main UX/UI Designer

Problem & main users

SIM cards are used in the hardware implementations of all buses our clients have. An overview of all their statuses from different providers is cumbersome with the current interface in ViriCiti’s Portal. Problematic SIM cards or inactive ones cannot be found easily. As a result, invoicing aspects are affected, SIM cards are sometimes not deactivated on time and the main users, finance people and project managers at ViriCiti are slowed down in their work.

UX/UI Challenges

The UX/UI challenge was to find the optimal amount of interactions that users needed to do in order to find the problematic SIM cards and take action from there.

Multi-action per multiple SIM cards had to be limited per type of SIM card and type of action.

User research and usability testing were done with 3-5 users from ViriCiti and I was lucky to always have access to them.

Solution

The SIM Card Management tool is an internal company tool that simplifies the workflow of finance people and project managers, leading to timely invoices and easy activation/deactivation of SIM cards.

In my design solution, I provided a better table than what existed before in the older interface that was hardly used. I added smart filters that combine different types of data as well as multi-action so that the users have less manual work to do and fewer clicks. With the design choices and the integration of data from different APIs, including one from Vodafone, we enabled the users to have fewer details to fill in regarding the SIM cards.

This was also the first project outside ViriCiti’s main products and for which I collaborated with external developers from an agency.

SIM card management

Some of the UX/UI processes: user research, creative brief, sitemap, userflow, low-fi wireframes, hi-fi designs

2. Smart Driving User Management tool (ViriCiti) – new feature

Role: main UX/UI Designer for this tool, secondary designer for main Smart Driving app

Problem & main users

The new Smart Driving product is aimed at managing bus drivers’ performance according to different scores and indicators. The problem that our clients have is related to user management not being flexible enough and ViriCiti’s old user management tool not being suitable. On one hand, the drivers are split into different groups according to routes and managers they belong to. On the other hand, managers are also grouped per regions. This causes the main users, admins, to not be able to handle the driver groups and manager groups, resulting in a slower onboarding on the new Smart Driving app.

UX/UI Challenges

  • The main UX challenge was to provide our clients’ admins with a clear overview of drivers and managers and allow for easy data manipulation.
  • Initial user research was limited to 1-2 admins due to time constraints, but we later validated the assumptions with each iteration.
  • A secondary challenge was to match the new style UI from the Smart Driving product, which did not have a mature design system at the time.

Solution

This tool allows admins to create manager groups and driver groups that are part of different access control lists throughout the Smart Driving platform.

I designed a table that is user-friendly and in line with the new UI style that Smart Driving has. Admins can create new driver groups or manager groups. They can filter, search, and perform editing actions and delete.

The integration of data from different APIs, including one from Vodafone enabled the users to have less details to fill in regarding the SIM cards used.

For the future iterations, a drag & drop functionality would be done to assign users, as well as activating and deactivating drivers directly through this feature (currently done through ViriCiti’s Portal environment).

Smart Driving User Management

3. Design System (ViriCiti)

Role: contributor Designer/Reviewer

This Design System was born in 2019 when the first ViriCiti design team started out. We began working on a completely new product (Smart Driving) that enabled us to define the new UX and UI. It is a living project that regularly gets updated and it allowed us to move forward in the redesigns of the older products. The Design System ultimately brings alignment across all products and moves forward the Design direction, while providing stakeholders a clear picture of the complexity of our components.

Front-end developers are handed over the different design components through Abstract and from there they integrate them in Storybook. Together with the Product Managers we visually QA these components in different contexts.

4. Smart Charging (ViriCiti) – redesign

Role: UX/UI Designer

Being the main designer for the Charge Stations team, I took the full responsibility of the redesign for which I had been gathering user insights prior to starting the tasks. The priorities set by the Product Manager had to be followed. The business goal was to improve the current user experience (a page in Beta mode) so that it can finally be launched at the end of 2020 and sold to more customers.

Problem & main users

The current Smart Charging feature was developed before the Design team started at ViriCiti. In the past months, the backend team has been working on improving the functionalities. As a result, the frontend also had to make some changes and with this we had to do a first redesign. We knew from users testing in Beta that the UX is a bit confusing, not allowing for many interactions and not providing enough context to them. Some users said they are not interested in the page because it’s not bringing any value. To ViriCiti this feature is very important as it differentiates among competitors. The users of Smart Charging are Charger Monitoring managers and Smart Charging experts from different Operational teams our clients have.

UX/UI Challenges

As we were approaching the redesign iteratively, we had the following challenges:

  • Identifying the right users with enough experience on Smart Charging (as it was used in Beta by project managers only) and doing proper user research remotely
  • Using already existing insights from the Customer Excellence team based on customer feedback
  • Understanding the backend structure (different charging algorithms & charging calculations) in order to reflect it visually
  • Simplifying the interactions of the user and reducing confusion on the current page (searching & selecting a group, filtering information, etc)
  • Bringing additional information that helps them understand the context
  • Partially integrating elements from the new Design System while keeping the old navigation in place
  • For the first time creating a hybrid UI that has both old and new Design elements and making compromises regarding what is acceptable and what is not
  • Some decisions regarding the structure of the future redesign of the whole web application had to be taken into account

Solution

The first redesign iteration is found as a sub-page of the Charge Stations within the main ViriCiti Dashboard (web application).

The users are now able to select a charger group more easily through a dropdown with search function, instead of using a sub-navigation. They are also now able to select a longer time period for the chart showing insights they are interested in.

By connecting the configuration part in Portal (another ViriCiti environment) the users now see the settings that are currently applied to the charger group they are looking at. If one setting overwrites another, this is reflected in the UI with colours, aiding text, labels on the chart, etc. They can now navigate to the configuration page in Portal directly.

All these allow for a smoother transition to the new Design style. The next iterations involve new features, a possible merging with other pages, and the total redesign of the Dashboard web application that will include responsive behaviour.

Smart Charging redesign

Some of the UX/UI processes: user research, creative brief, persona creation, user flow, low-fi sketching, testing designs, hi-fi designs.

5. Charge Stations – Uptime report – new feature

Role: main UX/UI Designer

Problem & main users

Public Transport Operators often have issues with their chargers’ uptime due to technical problems. Charger manufacturers promise them specific SLAs that don’t always match reality. As a result, PTOs want to have their own tool to check uptime, downtime, offline statuses and they requested from ViriCiti for this functionality. There are two types of users: Charger monitoring managers from PTOs and Data Scientists from PTOs that want to see the chargers and connectors performance, but their needs are different in the amount of information they require.

UX/UI Challenges

  • A simplified view was necessary and it proved to be enough for the managers. However, Data Scientists need to run more thorough reports when they see something is wrong
  • Filtering based on status (Uptime, Downtime, Offline) is done on connector level through aggregations in the backend and those calculations affect the performance of the page. The optimal view is maxed at 10 connectors at a time.
  • There was an existing Energy report that I had to take into account when creating the navigation to this page
  • Introducing elements from the new design system and for the first time using a new colour
  • Limiting the report to 31 days due to data availability and performance

Solution

The new feature is part of the Reports section for Charge Stations. Users (managers from PTOs and Data Scientists) are able to have a quick overview of their chargers in the form of a chart by selecting a number of chargers or charger groups, as well as a time range. The resulted overview is the aggregation per connectors over the selected period of time.

In the .CSV file that can be downloaded by the more advanced users (Data Scientists of PTOs) it is possible to manipulate data and see connector performance per occurrence of status, and not the sum of occurrences. Therefore, their need is met with an external tool they are familiar with.

Uptime Report

6. Landing page & map (#myheroes) – new website


Live now at https://map.myheroes.global/

Read more about the campaign on https://www.instagram.com/myheroes_global/

Role: Volunteer Lead UX/UI Designer, brand designer

#myheroes was born during the first months of the Coronavirus crisis and aims at offering pragmatic step-by-step support to solve the unmet needs of our heroes, the healthcare workers, who are risking their lives to save ours. Often times the needs are around the PPE (personal protective equipment).

On the website, users are able to learn about the project and how they can place requests regarding PPE. It is either through a Tweet with specific hashtags or by filling in a form on the website. After this, they can see their requests on a map in an anonymised manner due to privacy restrictions. In the meantime #myheroes matches the demand with the suppliers through SAP.

During the design & development process I worked with a team of 2 designers, several developers from https://revolve.pro/, and a product manager, all volunteering for the cause. There were some design restrictions as we had to use existing backend architecture and frontend components in order to deliver fast so that the project can be pitched to several stakeholders. Social APIs were used to dynamically bring the messages of healthcare workers and Mapbox was customised to fit the UI. Both Desktop & Mobile versions were designed and developed.

#myheroes

Some of the UX processes: structure of the page with required elements, sitemap, user flow, mobile sketch.

7. Fresh Choices (IDEO/Acumen Academy) – new app

Role: Volunteer UX Researcher, UX Designer

A volunteering project done during the first months of the Coronavirus pandemic, where Design Thinking methodology was applied to our identified problem: Providing healthier food options for people in need (during crisis times).

Fresh Choices is a not-for-profit designed to provide access to healthy food for the 40M Americans struggling to afford food themselves or their family.

Fresh Choices creates a pipeline of healthy food and habit-change for the people who need it most — the food insecure — through a more human-centered approach. We’ve reimagined the existing food bank-to-pantry-to-recipient paradigm and created a more efficient distribution model at the community level.

Fresh Choices


Through our research we came to the following:

INSIGHT #1

Habits are difficult to change (especially in time of crisis).

So, HOW MIGHT WE Impact healthy food selection habit?

INSIGHT #2

Food resources are available, but people don’t know they exist.

So, HOW MIGHT WE Enable awareness of healthy food sources near them?

INSIGHT #3

Having the resources to distribute or collect the food in certain areas.

So, HOW MIGHT WE Improve the resources and distribution to reach people in need?

Low-fi prototype to test with users