Web app
Product design
UI design
Design systems
Skava's core offering is its all-in-one ecommerce management platform. It boasts a robust set of features, but also offers flexibility through its microservice architecture and third-party support. Basically, it's a one-stop shop for mid-to-large ecommerce companies.
We needed to overhaul the UX of each service, as well as develop a modern, comprehensive design system. There was also an array of new features to research, design, and implement.
I worked with a team of five other designers, product leads for each piece of the platform, a team of developers, and a project manager.
I worked on this 100% of my work time for about 5 months in 2018, and several months more sporadically before that. However, this is an ongoing product.
Web app optimized for desktop
We met this sprawling challenge with a multi-pronged design strategy.
Skava's brand had changed over the years, so we adopted a new visual language to reflect that. Its identity is now stronger and more consistent.
We took this opportunity to audit every bit of our product, make sure we understood what went where, and clarify exactly how we wanted customers to conceptualize the platform's many interwoven pieces.
As the product had grown in functionality, its usability had fallen by the wayside. We took a look at each service to apply modern best practices.
To ensure consistency and sustainability, we developed a design system - a single source of truth for all of the styles and components we implemented.
Our design lead led the charge on adapting our newest brand guidelines to Skava Commerce. We used this as a jumping off point for the design decisions in the rest of the platform.
Previously, our customers needed lots of training sessions to understand our product and how everything worked together. It's a complex product! But we aimed to cut down this training time significantly by making the product more intuitive.
One of the things that confused everyone was the navigation. We had a contextual nav bar on the left, which left you feeling unrooted and confused about where you were. You also weren't sure what you were impacting whenever you made a change - which is hugely nerve-wracking when you're pushing changes to a live ecommerce site.
We iterated on the navigation structure many times until we had this: an "administrator level" for high-level, rarely-used tasks, and a "store operations level" for all other day-to-day, commonly-accessed tasks. We emphasized the separation of these workflows with a stark visual contrast in the header and navigation areas.
The "administrator level" retained a much stronger Skava brand, while the "store ops level" was scrubbed down to a minimalistic white look that would be a better backdrop for the customers' brands. Again, this was an adaptation of the new branding guidelines.
With the product and dev teams, we exhaustively assessed each piece of the platform to understand its goals, constraints, new features/workflows being developed, and its current pain points.
We aimed for a 1:1 designer-to-service ratio, simply because of the time investment required to fully understand each service and become experts on the services we took on. I worked on Account Management and Pricing.
We iterated on whiteboards, then wireframes, then sometimes back to the whiteboards. We created clickable prototypes to present to our stakeholders and get feedback, and also to do constant gut checks amongst ourselves.
We also discovered something important: on a project like this, it was all the more crucial that the designers frequently checked in with each other and shared their work. Otherwise, we'd end up slowly drifting apart or overlapping in the types of problems we were solving. We had to keep in mind that all the pieces had to fit together in the end. So we instituted a formal weekly check-in to make sure we had the time and space to resync our collective design mind.
We looked to other companies (e.g. Google, Salesforce, Atlassian) who have created extremely robust, mature design systems for inspiration. We knew we'd have to customize our design system for our own needs, but they were a great starting point.
Our eventual goal was to have a website dedicated to this purpose - to host all components, styles, code, usage examples, and written guidelines in one place. This would enable all our teams to instantly find the information they needed.
However, since we were still discovering the problems as we went, we didn't have all the solutions. This meant we needed a more nimble system in the meantime.
We settled on a master Sketch file that we would very carefully update bit by bit as we evaluated our components and developed our design rules (e.g. a search box should always have vertical padding of 48px on top and bottom, but can be combined with a range of dropdown filters).
In this case, it was more important to have an immediate, workable solution than the perfect one right out of the gate.
We released an early version of this redesigned platform in early 2018. The result was not only a clearer user experience, but a clearer internal process for how things got made. While there's still a long way to go, I think the difficult roads we forged will make that journey easier.
