Helping Lion Parcel to provides better experience for internal system, clients & partners
Project Overview
UI Type : CMS Dashboard
My Role : Entire product design from scratch (UI KIT, Mockup, logo, and illustration)
Involved in the project : Oct 2020 - Jan 2021
Brief Background
As part of our effort to be able to provide a reliable platform for our internal team, clients & partners, and some limitations we have that vendors are handling our core system. Thus, Lion Parcel needs a new core system that can cover all activity in the last platform and solve all previous limitations.
1.1 What problem are we trying to solve?
How might we have a portal that provides stable performance and a better experience for internal users, clients & partners to use.
Product Brief
Genesis is a web-based platform that will be used by internal teams, clients, vendors, and partners. It will have the same functionality as our current system but more proper.
Targeted Users
Internal team (i.e. pricing, routing, etc)
Clients (i.e. zalora, ikea, etc)
Partners (i.e. POS/Gerai, CONS, SUBCONS)
Vendors (i.e. PT POS Indonesia, etc)
Design Process
I started to do the Design Thinking process with Double Diamond Framework, to define clearly our design process.
We use 5 key phases: empathy, define, ideate, design & refine, and validation. Technically I use those phases in all of the features in this project.
We use 5 key phases: empathy, define, ideate, design & refine, and validation
2.1 Building Emphaty & Understanding The Problem
Before I start the design, I try the current platform to understand the user pains from that. I want to validate the problem of the existing design and what should I do to fix it.
2.2 Main Problems
Lots of words that are difficult to understand and too technical
So messed up: Design is too old and looks disorganized. There is no clear standard, layout, color, and white spacing
Sometimes users feel lost when using the platform
Old InternalSystem — #sample 1
Old InternalSystem — #sample 2
Defining the Goals and vision
I conducted the problem to set the design goals. As a product designer, i want to make design
by 10 heuristics principles, but still focus to 3 key areas:
Words & Copy
Change everything words as much as possible to be easier for users to understand with Bahasa Indonesia. Make everything clear, like where is heading, create a listing and prioritize the words by means of either using colors or text sizes and etc.
Speak like a human, we need to speak to our users like they talking face to face with a human.
Decluttering
Make everything clean, organized, and standard with a proper design system (UI Kit)
Clarity
Make all items exist and be used in the right conditions.
Don’t make user feel they are lost, better navigation, discovery, and clear error prevention or status.
3.1 Information Architecture
Genesis Sitemap is better structured according to user needs with the order and grouping that has been adjusted to each admin role (internal, consolidator, subconsolidator, POS (Outlet), Client.
3.2 Wireframing
I quickly create some basic wireframe to make everything clear from product manager. Not all design needs a wireframe but this wireframe can give overall layout and structure CMS design.
Design form a Scratch
Genesis is a new product from Lion Parcel, thus as a product designer i have responsibility to create the mockup from scratch like UI kit, logo, and some illustration.
Genesis — Component set, Illustration, Color Usage
4.1 Mockup Design
As simple as possible
Give users clear information — to help prevent mistakes.
Provide tooltip information — Give additional explanations for terms that may be difficult to understand or require more context, helping users remember or better grasp the situation.
Show clear and human error messages — to help users understand the situation quickly and make decisions faster.
Users often take actions by mistake — If a user tries to leave the "Create Activity" flow before finishing, show a confirmation modal to help prevent accidental actions.
Don’t confuse users with inconsistent layouts and placements — Consistency in layout and information placement helps reduce cognitive load. (For example: place all data on the left side, and log activity or actions on the right side.)
How we make the log activity more informed about what is going on, to help them understand where they are, and what should they do on every detail page.
User often performs actions by mistake — So we give action modal in every critical state to make the user more carefully
Working with developers
As a designer, i work with Product manager, FE, BE, and QA to build this project.
I will make a design based on the product requirements by PM at Confluence. then turn it into a design in figma. PM, FE, BE, Designer, QA will grooming discussion to check is the design are posible to engineer create and how the evort to make them.
sometimes engineer will giving me a feedback to make alternative design to make product more possible to they make it.
Collaborate with the product manager and other stakeholders (PM, FE, BE & QA) — to find out the details of the effort and priority of each feature that will be made (confluence).
Share every flow with other stakeholders (PM, FE, BE, and QA) — Using Overflow can help stakeholders easily understand the product overview, processes, and flows. Adding annotations will also help them understand the designer’s thought process.
Epilog
Big challenges require small steps. Take small steps, because big changes can not be brought overnight.
Notes: Total features that we are going to develop ~188 features and ~69% of the design has been completed in Q1 2021
Genesis is already used by all Lion Parcel users in Q3 2021 and still in the process for NPS test.
