VTEX is a global SaaS technology company focused on ecommerce solutions that have a daily impact on the work of thousands of people around the world. More than 2500 leading brands of varying sizes and segments, with operations in 26 countries and in global expansion, rely on VTEX for the online sales of their products.
The main challenge of working in such environment is that the product is the same whether you’re a small store or a huge commerce operation. So every solution we design has to leverage a huge diversity of user needs, and build something that works for everybody.
The main touchpoint of our product with the merchants is the Admin. It’s where our clients configure and manage everything related to their commerce operations. It’s also where most of our design efforts go into.
With the coming of age of VTEX IO, our serverless service for hosting e-commerce applications, we were ready to start using it to host our own Admin.
This was much more than just dogfooding. We knew the “new platform” was more modern, robust and easier to use than anything we ever had before. A new navigation shell and routing system for the new admin was ready for use, now we needed to start replacing the iframes of the old admins with fresh, first-citizen reimplementations of them.
This project was the first section of the Admin that was rewritten using all the newest technologies we had, and was a great way of showcasing the our users that a new generation of technologies and admin panels was coming.
With so much important stuff to build in the platform designing a new Home was definitely not one of the priorities. This project was made possible in an internal Hackathon, where we gathered forces and joined developers from different teams to work together and create a proof of concept in 48 hours.
Our main objective was to create the first new VTEX admin screen, but we didn’t know which one. Given we had limited time and human resources we though that old ugly Home was a perfect fit for the challenge.
As with many projects in VTEX benchmarking was a big challenge. How many big e-commerce SaaS platforms do we know? Not even a handful. How many of them have really great design and targeted a very similar audience compared to us? You got the point. This pushed us to think outside the box and try to get inspiration from different places.
Because of the mentioned project constraints we leveraged the internal knowledge that our Product and Customer Care teams had about the platform and what we could offer.
VTEX is a tool people use to do their work every day, and they spend a lot of time in it, so it has to offer great services and at the same time be welcoming and comfortable to hang out. What other services work like that? I thought it was similar to a Hotel, which offers “comfort-as-a-service”, as well as fulfill people’s basic needs such as food, entertainment, etc. Just like a Hotel we’re also big and very complex inside, but it has to be invisible to the final user.
Now looking at the company’s culture and values:
The hypothesis: the home of VTEX Admin should feel like the lobby of a Hostel.
A lobby is where the mood is set. It’s in the beginning of the journey of using the product, probably the first thing someone sees when starting their working hours. So it should feel welcoming. Sometimes it’s calming, sometimes it isn’t, but it’s always pleasant.
I started building a Moodboard of pictures of the coolest Hostel lobbies I could find, looking for patterns.
From these observations we ended up with these 7 core values:
Materializing the values into actual UI was done in both a top-down and bottom-up approaches:
Top-down: we used the values as a “healthcheck”, to filter ideas that would come from the ideation session with the team and other all stakeholders we could bring together.
Bottom-up: the values themselves helped us imagine new features that we didn’t think of before.
Each component passed through several iterations, playing with variations on visual weight and content writing and collecting feedback from the team.
Here’s how everything worked together. This is the actual state of the page development.