Platform as a Service

The Kala platform empowers local selling for e-commerce businesses. They partnered with Springboard to continue to polish and complete their existing designs. Our group of four UX Designers were tasked to create an admin experience to help manage marketplaces and their inventory. The scope of the project lasted 5 weeks.

Group Design Process

We first needed to understand the needs of the client, which was to design the marketplace management screens, and complete the seller management screens. Kala had existing screens that were designed and built to production. We needed to review them to identify areas of opportunity and improvement. Our team researched similar models to understand the Kala platform.

Design Comparison & Opportunities

A team-member first looked at other SaaS platforms to get a feel of what they do vs what Kala does and see differences. They took screenshots while looking through user flows like onboarding or filtering lists. These screenshots helped me identify an opportunity to find patterns there and on the Kala screens provided, helping the formation of the screens I created.

Next Steps

We viewed previous screens, reviewed documents on Kala, and spoke to the stakeholders to get a good idea of our purpose and shared roles.

Another team member reviewed the Information Architecture and another created user stories to help encapsulate what the admin wants to perform. At this point, we separated the workload to create different screens based on the different user flows.

My contribution focused on the Seller Management screens – how an admin will manage sellers.

Seller Management User Flow

As a Marketplace Admin, I want to…

1. View all sellers and their products
2. Activate or deactivate sellers
3. Search for sellers by name, type, product categories, etc.
4. View Key performance metrics of sellers, such as the number of active product listings, available listings, orders, and total GMV
5. View seller requests to list on the marketplace
6. Recruit new sellers to sell on the marketplace and provide a personalized message
7. View Seller recommendations from Kala
8. View my own seller dashboard, displaying information such as active product listings, available listings, orders, and total GMV

Methods of Contact & Deliverables

Our team communicated via a shared Slack channel & through e-mail. We video-called about twice a week: once after the weekly meetings with the client, and a day or two before the weekly meetings to check in, share and see progress. Otherwise posting on the shared channel, contributing individually.

For repeating components within the screens, we created a shared Figma file that all could access at any given time.

The edited version of the style guide, components library, previous screens, and other documents sped up the creation of the wireframes exponentially.

We added more icons to our set simply for flexibility. The style remains the same – an outline of an object to represent an action. On and off sliders suggesting to toggle between items.

Edited Secondary + Accent Colors

Edited Grid System

Our team decided to change the grid because it didn’t align with the screen size 1440p. Certain elements didn’t fit within the guidelines and we adjusted everything else to have 12px alignment. The Accent colors were changed to allow some creative liberties with the logo, and where to place it. We removed the Yellow warning state color (seen in “pending” marketplace status).

Results of the Design Audit

For the Seller Invitation flow, I looked at the HiFi design and found these design patterns:

• Breadcrumbs
• Carousel(s)
• Cards
• Grid & List Views
• Button States & Button Status
• Pop-up Modal
• Filter Display / Status
• Card Details

The screens above reflect the admin inviting sellers by viewing options, and selecting them based on recommendations. Seller Details are omitted.

Phase 1 – Wireframing

Action Tasks & Audit:
There were many hidden details found in the seller flow screens, but I mainly found issues with:

• missing filter popup modals
• having buttons that reflect states and actions
• “featured” meaning when sorting sellers
• edge case where the admin might have more than 100 marketplaces affecting view & selection
• preview seller details (like product details overview) to see how they are performing & compare sellers
• messaging when inviting a seller

The screen reflects the invitation user flow and through these changes will improve usability.

Crude Understanding & Direction

Here are iterations of the Seller Management Wireframes. I was unaware of the business model, that Kala is a SaaS, and only until after reviewing the previous design documents and user stories was I able to grasp the depth of the flow. It was unnecessary to reinvent screens especially with existing, working designs.

Design System in Check

Grasping the context, I recreated the Marketplace screens that the previous team worked on. I edited the card design and added details a seller would contain to help the admin sort through and find certain sellers. Perhaps by category, rating, or status. It was with my teammates efforts to add coherent elements like the nav.

Opportunities: Changes & Improvements

One of the first things I changed was the location of the Add Button. The Marketplace Admin wants to view and add more sellers. My initial thought was to see a list of available sellers instead of relying on recommendations. There were two ideas to place the plus icon, at the end of all items like the previous design or as a floating icon. The client mentioned that it would be tedious to constantly scroll down to find the add button if the user had more than 100 or so marketplaces, sellers, brands.

The default state for sorting was “featured”, but that made no sense so I changed it to newest, seller rating, and number of products. Pressing the text with an arrow next to it intuitively sorts the items.

Making it easy for the User

Just like the previous design, when a filter is applied, the status of the button changes and shows the selected filters next to it. This made me think of what filters to add – I identified the following:

• Name (Alphabetical Ascending / Descending)
• Type (Seller, Brand, Local, E-commerce)
• Product Category
• Number of products
• Seller rating
• Status

Current design trends from e-commerce websites show an updated state change, and additional button. Space will be adjusted to fit these elements.

Iteration #1 – identifying what elements to filter & sort. From the previous screens, there were seller type, rating, # of product, and location. Active & featured as well.

Here is where the modal is more stylized, has multiple search functions with the addition of brand and retailer types. Search is too convuluted with 3 locations.

The final HiFi design of the modal. Categories are added, marketplaces have become local or not, and location is focused on state. Search is removed to highlight location targeting.

Finding the Seller

Filtering allows the user to target a specific seller. There were many iterations of the modal with me and another team member collaborating to make it. Without the context of marketplaces (brands, sellers) seller type is simply if the seller offers local inventory. Filters were the focus as the previous design omitted a solidified user flow.

Invitation to Sell

From the filtered List, the Admin can select a seller and choose to interact with them. They may view products, product details, and see a seller overview. From the status, they can decide whether to approve a seller, deny them, pause selling, or recruit them and send a personalized message.

Validating the Design

On our final meeting, our group presented each user flow separately. I showed them a quick overview explaining changes, and how it helps the user manage information and views on the go.

They were satisfied with the end result and ready to take the project to the next step, excited, and ready to code it, thanking everyone for their time.

Reflections & Lessons

I underestimated how long it took to analyze the existing design, taking about a week to audit, and to look at the research my colleague did to compare features and functions.

It proved difficult to continue the seller management screens without guidance and input. I had to redo the wireframes as shown in the previous slides and find opportunities to move it forward.

On the topic of guidance, I also learned the importance of communication shared between colleagues and the clients. How to share and present information to craft a clear message. Time was limited, especially a project done remotely.