Graphic and Product Design for Topia

Employer: Topia • Timeline: 2022–2023 • Role: Graphic Designer, Product Designer


Topia works in B2B space, providing a global mobility platform for big companies to manage their employees’ relocation, business travel and remote work from one place.

I was hired as a designer for 1 year to help with the workload on design team. I created graphics for marketing and social media, including an eBook, new presentations template, YouTube thumbnails and LinkedIn graphics.

My responsibilities also included product design. The UX projects I worked on were mostly associated with the finance part of their Topia One platform and designing some internal tools for implementing new customers more efficiently.

Technologies used: Figma, Figjam, Mixpanel, LucidChart

E-books

YouTube Thumbnails

Topia has a YouTube channel where they share educational webinars and introductionary videos on their product. I was tasked to design more modern and unified thumbnails, and with that, create templates that other designers could use for future thumbnails.

LinkedIn Graphics

Topia marketing team wanted to create a series of LinkedIn posts called “Fast Fact Friday” where they explain most commonly used terms in the mobility industry. I was tasked to create visual graphics for it.

Product Design

Below are some of the product design projects I worked on at Topia. I was using their existing design system in Figma to inform me and put together designs for new functionalities in the app, or improve existing ones. I was working cross-functionally, collaborating with product managers and engineers and also always consulting with the rest of the design team.

Rates Configuration Tool

Topia’s system helps to estimate cost of a move, therefore they have example rates for different services eg. furniture shipping, flight cost, pet shipping etc. Users can use our default set of example rates or import their own.

This internal tool was built to make our implementation team more independent in setting up rates for each new customer without needing manual upload from developers and taking up too much time and resources from them.

Below are some wireframes I created for what the phase 2 of the project would look like with the addition of a map and a list view with advanced filters.

Cost Simulations

At Topia One platform one of their most used features is Cost Simulations that helps to estimate the cost of moving an employee to another location (eg country or state), based on many different factors. I helped to improve this feature multiple ways by

  • designing a sharing functionality so Topia users can share Simulations with coworkers without a Topia account

  • designing an advanced options feature to Simulations for those wanting even more granular control

  • redesigning header section of Simulation scenario inputs and results tables

  • requesting to track more events for analytics that we could use to further improve the experience and make more informed design decisions

  • and more

Testimonials

“[We] appreciated her positive outlook, that she’s a great team member, her work was excellent in the past quarter, and how she’s well organised when she collaborates with external teams.”

— From quarterly feedback conversations

“That was probably the best design presentation our team had since I started working here [3 years ago]. And definitely the most engaged the [developers] have been during a designs introduction meeting.”

— Developers’ Team Lead

My Impact

Visual Direction for Marketing Design

There were many projects where I was able to both design and set the visual direction for the future. When designing eBooks for Topia I simultaneously created a new eBook template with reusable elements that could be used in the future by other designers. Also a new slide deck template with plenty of examples that anyone in the company making a presentation could use, even non-designers. I also set the examples and the visual direction for what their YouTube channel thumbnails should look like.

Tighter Design and Engineering Collaboration

When I joined the company I noticed that the design team and the engineers didn’t really have a strong collaboration going on. I decided to initiate more contact with the engineers’ team that was working on my designs and started attending some of their weekly standups and sprint plannings. Instead of just forwarding Figma files to developers, I made presentations of designs where they would have time to ask clarifications and questions. This improved collaboration was very helpful and inspired other designers to be more collaborative as well.

Improved Metrics Collection

Doing product design, especially when improving their Simulations feature, I noticed there was not enough quantitative data to go off of when making decisions about UI design. Combining my own questions and using HEART model to expand my thinking, I came up with a list of most important event trackers to install into the product so we could track usage patterns in Mixpanel. This new data was and will be very useful and insightful for anyone from developers to product to other designers.