The design behind ShuttleCloud’s migration portals

We are proud of our portals. They allow the end-user to migrate their emails and contacts from one provider to another quickly and efficiently.

On the outside they seem simple and pain-free. And Ultimately, that’s our goal. But there’s a lot of work that goes on behind the scenes to make this possible.

Why do we need a migration portal?

ShuttleCloud works with the world’s biggest email providers. Our migration platform makes it possible to migrate 30 million emails and more than 3 million contacts each day.

It works by integrating our clients' technology with their user interface, However, integrations are long and tedious, they require customization and massive workforce from engineering.

So, our goal was to design a migration portal that would allow adaptation to each client’s aesthetic brand guidelines avoiding customization, as well as maintaining a controlled user journey.

We also wanted to create a straightforward prototype that would help our prospective leads understand how to use our tool.

Low fidelity wireframes

Before setting any design decisions in stone, we tested the portal’s flow through wireframes. After reiterating a few times, we delivered two versions that were ready for early usability testing.

Here we were testing the user experience with Ryan, who had never seen the portal before.

Analytics data

​Qualitative research, i.e. usability testing sessions, allowed us to identify potential usability issues early, which made it quick to fix them before a single line of code was written. 

High fidelity wireframes

After validating our design assumptions, it was time to proceed with the high fidelity wireframes and refine and polish the designs until their completion. This process involved both designing for mobile and desktop devices.

The ​​​Design system

We first created a design system with ShuttleCloud branding: components, palette color, font, buttons, etc. Then, we went through a thorough examination of font readability and color contrast. Finally, we delivered a coding-ready design that standardizes the graphical interface of the service. It was documented in a User Interface style guide.

Design Versatility

To achieve design versatility we created a design guide of easily modifiable components and styles. This system allowed experimenting with color schemes, typography, and styles to see what looked best. Making changes to the design was fast and efficient. But most importantly, it helped us quickly adapt to a different brand aesthetic, so that we could reach new leads with a migration portal that was ready to implement.

If you would like to put our portal to the test, get in touch and we’ll be happy to help.