Lion Parcel Website Redesign

Sena Rizcky Hadi
lp-productdesign
Published in
9 min readJan 25, 2021

“New Look, New Spirit”

About Lion Parcel

Lion Parcel was established on February 14, 2013. Engaged in the field of courier services serving domestic and international shipments supported by the Lion Group network and infrastructure as one of the largest airlines.

Currently, Lion Parcel has 3500 partners spread across Indonesia to help people connect without time and distance.

  1. Collaboration is Key

Cooperation, communication and coordination based on trust are important for us to jointly achieve the company’s vision.

2. Starting with an “idea”

We create new ideas and ideas by taking advantage of opportunities to generate broad contributions and benefits for the company.

3. Care for Others

Show a sense of concern for fellow colleagues and the company environment with an attitude of mutual cooperation and maintaining the company’s reputation

4. Grow And Keep Growing

We are committed to continuously developing the company and its human resources by providing opportunities for self-development, competence, career, appreciation for achievements and achievements.

5. Serving Is Everyone’s Duty

We are committed to providing the best and quality services in helping partners and consumers to grow and develop by providing solutions and inspiration.

The Role of Lion Parcel in the Digital World

In today’s era, websites are becoming more popular and more accessible to the public. This can be seen from the increasing number of websites from year to year.

Global Internet :

The development of technology in modern times is so fast and technology provides many benefits in advancing in various aspects. Humans as technology users must take advantage of existing technology. During the Covid-19 pandemic there were many human changes in various aspects. With the existence of various rules in this pandemic era, all activities are limited from working from home, learning from home and all activities carried out from home, this activity is the role of technology is so important to help keep activities running. One of them is by using a Web or application that can help each person in carrying out activities.

Website in the Logistics World

Because there are more and more human activities to access the internet according to their needs, and one of them is in the logistics sector, therefore Lion Parcel helps the public to more easily access the Lion Parcel website as a place to track goods or check shipping rates easily, even though some logistics companies have implemented the same thing, but what is the role of Lion Parcel so that people can access Lion Parcel easily and comfortably, one of which is in terms of appearance on the website which must be structured, therefore we try to redesign the Lion Parcel website with several methods from Design Thinking .

Goals

“Helping the public more easily access the Lion Parcel website, providing convenience and comfort in tracking shipments or checking shipping rates, as well as finding out information on Lion Parcel products and the Lion Parcel program currently running, especially in terms of a better appearance”

Here are some of the methods we use to redesign the Lion Parcel website:

Design Thinking

IA (Information Architecture)

IA is a branch of User Experience Design, and Information architecture is the structural design of interfaces that allows the user to understand where he is in a product and how he can navigate additional content such as text, photos or videos. IA directs users to where they want them in a logical way. Following is the IA for the Lion Parcel website using the Strict hierarchy pattern method (Each sub-page has one or more subpages).

Image by Sena Rizcky Hadi

Wireframe (Low Fidelity)

It seems familiar in making application designs to hear the terms Low Fidelity and High Fidelity Mockup. In working on a wireframe for the Lion Parcel web itself, it focuses on what elements will be used, referring to architectural information, so we can define a wireframe. The goal is that when they enter the High Fidelity stage, designers can focus on designing the interface in more detail and precision in terms of colors, icons, etc.

Image by Sena Rizcky Hadi

Design Alternatives

Before the next step, we designed several alternative design styles for the Lion Parcel website. The first style is the Flat Design Style, why Flat Design? Flat design is a design with a minimalist approach that emphasizes usability, with a clean design without bevels, shadows, textures, focuses on typography, bright colors and two-dimensional illustrations. Generally, the use of flat design is quickly understood by users. And the second style is more of a modern corporate style, which is dominated more by real photos and combined with ornaments to make it look less old-school, here are two Lion Parcel website design alternatives before reaching the final stage.

Flat Design

Image by Sena Rizcky Hadi

Modern Corporate Style

Image by Sena Rizcky Hadi

Comparison (High Fidelity)

After passing the wireframe (low fidelity) stage, here the designer starts designing a website with a High Fidelity version, many of the elements are redesigned, for example, starting from colors, fonts, illustrations and of course layouts that are easier for the user to understand. At this stage, designers can be more creative and focus on redesigning. Hi-fi is used to be delivered to developers or used for direct testing to the user.

Set With New Color

Color can create emotions, color varies greatly depending on culture and circumstances. Each color also has its own influence on each function. Can help designers to transfer the right message. Color is a very important component in user interface design, overall the use of colors on the Lion Parcel website has undergone several changes with colors that are softer and more comfortable to look at. However, we don’t remove the previously used colors, we try to expand the existing colors to make them more varied, and we also define the color system for their color derivatives from primary and secondary colors. So that in working on the website there is already a color grip and does not use colors outside the one that has been determined, the goal is that all products from Lion Parcel are uniform and remain in their red thread.

Image by Sena Rizcky Hadi

Set With New Illustrations

Illustration is one that can help explain the content of a story or narrative and illustration can also be a visualization of an article, which can help convey a message to people. In the case of the Lion Parcel website, there are several illustrations that were not conveyed to the user, therefore redesigning the illustrations will help the messages or benefits from Lion Parcel be conveyed better. And the design style taken is Flat Design, apart from being a trend at the moment, flat design is “always make it clear”. The use of shadows, textures and other ornaments needs to be taken into account in the flat design, the challenge is not to eliminate these effects but how we can change these effects as simply as possible. The color combination in an illustration is one of the important points of flat design, the colors used in the flat design must be defined as well as possible, because when using excessive colors in the flat design style, the meaning that will be conveyed can make it less clear, because color psychology greatly affects the user. From the explanation above, the following changes to the illustration on the Lion parcel website:

Old Illustrations

Image by Rezian Al-Islami

New Illustrations

Image by Rezian Al-Islami

Define Typography

Typography is the art of composing, designing and arranging the layout of letters and types to produce a certain impression, so that clarity and aesthetics can help readers easily understand and feel comfortable reading. In brief, there are several elements that can form typography art, including:

  1. Font

Font is one of the important component factors in creating harmony. Using the right fonts can make things more interesting.

2. Kerning

Kerning is the process of adjusting the spacing between characters in a font, the two-dimensional blank space between each pair of characters has the same area.

3. Typeface

Typeface is a group of letters that distinguishes it from other types of letters.

4. Tracking

Tracking is letter spacing, tracking can affect character density.

In using typography on the website it is very important, especially the ease of reading for users is a top priority. On the Lion Parcel website, there are several changes in the typography, one of which is a new font set, besides that typographic elements are more taken into account so that when applying a typography on the website it becomes more structured and harmonious, here is the font change on the Lion Parcel website:

Old Font

New Font

Image by Rezian Al-Islami

Final

Even though it is common in terms of updating a website in terms of product offerings or changing some graphics or layout on a website, redesign must be done totally, one of which is making the website’s visual appearance stunning. Measured from several technical points of view:

1. Conduct research on several reasons how important websites are in the digital world and why websites should be redesigned

2. Designing or revising architectural information to make the website structure better

3. Designing a wireframe (low fidelity) that focuses on what elements will be used and refers based on architectural information

4. Design alternatives, designing several design alternatives so that there are several options to choose from. Generally, in a creative process, one of the design alternatives can help designers get feedback in order to produce better output

5. Illustration, is one that can help explain the contents of the story or narrative and illustrations can also be a visualization of an article, which can help convey messages to people

6. Color, is a very important component in user interface design, and colors can create emotions, colors vary widely depending on culture and circumstances

7. Selection of typography and arrange the layout of letters and types to produce a certain impression, so that clarity and aesthetics can help readers understand and be comfortable to see.

From several technical aspects that were designed, in the process of redesigning the Lion Parcel website, it can be more measured in the process, here are the results of the new Lion Parcel website design

Image by Sena Rizcky Hadi

or you can visit the Lion Parcel website directly at www.lionparcel.com

Before & After

From several processes that have been designed, here is a quick comparison of the old and new Lion Parcel website designs:

Image by Rezian Al-Islami

“Design is not just what it looks like and feels like. Design is how it works.”

— Steve Jobs

Redesigning a website has become a common thing, but it is very important to build a better website so that users are comfortable and understand the information to be conveyed. Of course, to make the website itself better, there are several important aspects that must be considered, especially in terms of design.

And not forgetting the amazing team of designers, who were involved in this project :

Anggita Prameswara Putri, Ika Magdalena, Rezian Al-islami, Sena Rizcky Hadi

Thank You..

--

--