Internal Backstage

Manage business plans and memberships efficiently!

Overview

Internal Backstage is a platform designed for the staff in iStaging including sales, pre-sales, and customer success, and its goal is to help them build plans, collect data, edit memberships, and check account status, etc. In this project, I worked as an UI designer with a cross-functional team. When I joined, the product owner in the team has already done preliminary research to validate proto-persona. I used the research data and then I created the information architecture, wireframes to ensure users can access all info they need. After this, I designed the first phase design which has main functionalities in the prototype to demo to the stakeholders

Time

09/2021 - 10/2021

Role

Sole Designer

Challenges

1. No centralized platform to merge info and collaborate with other members

In iStaging, teams use many different services and sheets to keep order records and collaborate with others. For example, they used Google sheets and Knowledge Portal to manage all the plans and feature details. Yet there was no way for them to view complete and immediate statistics of our selling condition. Sometimes, they landed on the website of Knowledge Portal to learn about sales kit and plan overview. However, the website is mostly unorganized and have poor navigation.

2. Users with diverse background

This project involve many users with diverse backgrounds, including sales, pre-sales, administrators, customer success and so. Even though they all worked at iStaging, their perspectives and goals are different. For example, the sales would like to view all plans and features and be able to create for potential customers. The customer success, on the other hand, have to focus on the subscription and member account validation. We should consider the various needs.

Design Goals

Based on the early research by the product owner, we set up the basic design goals via users' feedback. The general goal here is to design an engaging, efficient, and easy-to-use collaborative information-sharing platform.

Priority of the features

Based on our interviews and analysis, we probed all the function list into multiple stages which represents the priority. This helps us create our information architecture. As plan and feature overview, membership account and subscription have the highest priority, we decide to have these functionalities featured at the side bar menu. And as to the statistics, we place them in the home page dashboard to present the sales growth.

Information Architecture

Me and the product owner defined 5 main features: data dashboard, plan and features, memberships, and authority.
The dashboard would be shown as the landing page to introduce the main sales statistics. Here is the information architecture that I created for the site:

Information Architecture

Wireframes

At this stage, we used wireframes to discuss with our sales, pre-sales, and customer success, to better understood what kind of information they want to know about. We created the pages based on the information architecture above.

A few pages of wireframes

Color Palette for IB

Considering that this project is associated with technology and also our staff users asked to design a “soft and comforting” system, we decide to take part of the traditional iStaging pink and purple, and add more light color of orange and blue. I created and defined the color for the website, and further develop the UI based on the guideline.