Topia: Product design for global mobility platform

 

summary

 

Employer: Topia • Timeline: 2022–2023 • Role: 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.

I was hired as a product designer for 1 year to help with the workload on design team. The projects I worked on were associated with the finance part of the platform and also designing some internal tools for implementing new customers more efficiently.

In addition to product design I also helped to create graphics for marketing and social media by designing an eBook, new presentations template, YouTube thumbnails and LinkedIn graphics.

Technologies:

  • Figma

  • Figjam

  • Mixpanel

  • LucidChart

Design Team:

  • 2 Product Designers

  • 1 Team Lead

  • UX Writer

  • Front-End Developer

My Impact

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
As I was designing for 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.

MARKETING DESIGN TEMPLATES
As far as marketing design, I made a new eBook template 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.

my Process

During my year at Topia I was working on multiple new features or feature enhancements, having projects last anywhere from 1-3 months. This was the process I used for most of them.

#1 Research

Firstly I gathered as much information about the feature, it’s context and user needs to understand the problem. Looking for inspiration on other websites was sometimes also a part of the research phase. Design team had a hard time reaching end customers for various reasons so we normally found other ways to do our research.

#2 Analysis

With all the information gathered, I tried to answer 5W1H questions like Why, Who, Where, How, then write down user goals and user flows.

#3 design

Sometimes I started with brainstorming possible solutions in my notebook, sometimes I hopped straight to Figma to write down which screens I needed to design, create wireframes or use components from Topia’s design system. When I got closer to the final solution, I would create a prototype to better explain and present my ideas and get a feel of what the final product could be like.

#4 Feedback

Part of our design team’s weekly routine was to get feedback from each other during design critiques and from the product team in designated meetings, so I worked iteratively by showing my designs, discussing the solutions and adjusting as needed. I would also present my prototypes to the developers’ team, either when I had finished wireframes or the high fidelity design and get additional feedback.

#5 Handoff

Once the designs were final, I would finish annotating them in Figma so that developers would know how the design behaves, and leave a link to them in the JIRA ticket.

#6 Quality Assurance

I would keep my eye on the JIRA tickets statuses and when they moved into “Ready to Test”, I would go and play with the feature in the test environment. If I found something that needed discussion, I would contact the responsible developer directly or write a bug ticket.

Sometimes new information or technical limitations would appear and a redesign or added features would be needed, which meant going back to step #3.

Projects

Here are some of the projects I worked on at Topia.

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 taking up too much time and resources from developers.

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

Compensation Worksheet for employees

Compensation worksheet shows the HR team how much the employee salary changes after moving them to another country, taking into account currency change and additional benefits they may start receiving.

My task was to think about how to display Compensation Worksheet on the employee-facing platform, as well as design the mobile version of it.

I didn’t manage to finish the project since priorities changed, but since this is the only time I got to do mobile design, wanted to showcase it anyway.

marketing design

Our designers were also asked to help out with marketing design. Here are some of the graphics I designed.

EBOOKS

LINKEDIN GRAPHICS

YOUTUBE THUMBNAILS

What my Colleagues said

“[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. And definitely the most engaged the [developers] have been during a designs introduction meeting.”

— Developers’ Team Lead