Infostellar 2019-2020

Restructuring the brand experience of Infostellar

Restructuring the brand experience of Infostellar

Restructuring the brand experience of Infostellar

branding
Duration

12 months

My Role
My Role

Product design

Product design

Disciplines

Brand experience, Corporate identity

Design system,  UI/UX

Published

February, 2020

Made with

Infostellar, Inc.

Overview

Overview

Infostellar established in 2016, a space startup where offers a quick and flexible cloud-based network web platform; StallerStation for ground station and satellite operator.

The first internal version of branding guideline released in the middle of 2019. It's a relatively simple guide that helped all employees and customers to use logos properly and consistently, also aided a tone for building identification and recognition.

On 2020 February, we were happy to release it as Press Resource with a new website. Through a combination of various modes a consumer uses to interact with a brand, Infostellar new brand attempted to create a general atmosphere of goodwill, dependability or trust to create an association between the brand and a specific need or emotion.

All images evolved over an year.

The newest Infostellar was clean, fresh, and innovative. The brand experience was about creating a sensory user experience in order to become memorable to consumers. And most important was establishing a place where connecting and engaging with the target audience, helping convert brand awareness to brand loyalty.

It took a year to accomplish the goal, all those images above evolved to look like this:

new_Infostellar

New brand experience

img-ss-planning

UI/UX design of Ground Station tool

My role

I joined Infostellar as the first designer which a work environment with many space scientists, engineers and experts. My responsibility was increasing the customers and the company's brand awareness by building a brand system with goodwill, trustful and reliable emotions from internal to external.

It was a big challenge which not only created a branding guild but also needed to restructure all the marketing resource and UI and UX work on a web platform.

 Here are the key objectives for this challenge:

objective2
Restructure

Brand tone, voice, look and feel for Brand strategy

objective3
Scalable

Logos, Colours, Font family, layout and illustration.

objective1
Extendable

Markting resources,  design systems, UI/UX of products.

To achieve the goals above, a brand guideline can help me to extend the content of the website, platform, advertisement, and similar marketing collateral, etc. It was an important foundation where impact company as a whole.

Before and After

Problem statement 

Mainly people in the company didn't notice the problem of the branding. Basically, there was only the logo files without any strict guide. They used it by random tasks, all they needed was a logo to display. However, it caused many different sizes and colours that communicated an unprofessional and inconsistency brand awareness and emotions.

problem2

Out of dated style & visual

problem1

Inconsistency logo identity

problem3

No guideline for logo usage

There were a couple of points I founded:

  • Out of dated identity and visual
  • Inconsistency logo identity
  • Logo and Logotype is unrefined
  • No any guideline for logo usage
  • Many slightly different version of logos over the years.
  • The confusing between Product and company logo.

Rebranding process

1

Understanding

Comprehend the history behind the logo and brand. Get to know our competitor, audience background.

2

Refine the Core

Set up the interview and the questionnaire with stakeholders to get more perspectives of Infostellaer's brand

3

Restructure

Improve the logo identity and restructure the look and feel of product side and company side.

4

Visualizing & Extend

Build a branding guide & extend the new brand identity to all design system and context in visualizing as many as possible.

1

Unearth the core of the brand

imaginary

Imaginary signs

Infostellar had a clear definition of mission which making ground segments simple. The vision was defined that established a place where space and satellites are used as widely as mobile internet by our founders from day one.

 The COO gave me more insight into the story behind the naming and logo design. The name was coming from a combination of  "Information" and "Star”, a vision was to expand the internet to the stars. The logo iconic designed by three elements which Moon, Antena and Ground Station to deliver a vision of communication infrastructure to support such humanity’s daily lives.

brand-pillars

Reliable, Modern, Accessible and Professional is brand pillars.

2

Define the logo & logotype

old-logo

While Infostellar logo contained three symbols "Radio wave", "Antenna" and "Moon" to express Infostellar's vision, I decided to keep the moon shape and story behind the concept. The iconic was perfect enough that no need to redesign it. What's needed was to refine it as it should be and establish a better balance between iconic and logotype.

update-logo

I noticed that detail of the original logo didn't follow any grid and systems. The white space between glyph and logotype didn't have clarity. This problem was also reflected in the product, StellarStation as well.

White space

I noticed that detail of the original logo didn't follow any grid and systems. The white space between glyph and logotype didn't have clarity. This problem was also reflected in the product, StellarStation as well.

Colors

While we want to bring a fresh, bright and modern emotions to our brand, the original colour of green was muddy. When the green colour applied to logomark,  the readability had trouble when you went through the logotype. Therefore, I replaced the green colour (the green colour from the product logotype) and applied a dark colour to the whole logomark. Now, you can see a vivid logo with clear readability.

While we want to bring a fresh, bright and modern emotions to our brand, the original colour of green was muddy. When the green colour applied to logomark,  the readability had trouble when you went through the logotype. Therefore, I replaced the green colour (the green colour from the product logotype) and applied a dark colour to the whole logomark. Now, you can see a vivid logo with clear readability.

colours

Infosetaller primary colors

3

Restructure the StellarStation logo

As StellarStation first product in Infostellar, there is no sign or clue that you can identify the relationship between company and product. I suggested that keeping the Infostellar's glyph and replace the font type of logotype as Infostellar, also applied the same bright green colour to the product logotype. To eliminate the concern of logo, colours and logotype difference and strengthen the awareness the brand consistently. It was just like Apple, dropbox and other well-known enterprise did. 

product-logo

Original logo (left) and final logo (right)

4

Invest visual identity

competitor

Develop a visual identity

While I got an agreement about keeping iconic with stakeholder. It was time to develop all philosophy into the design and naturally, the image for the entire branding experience. To get more insight into Infostellar of branding experience, I started with two questionnaires which were Design adjectives and Visual style. 

adjective
visual-perspective

The results showed an intresting point of view 

  • Almost 95% of webs have an image(s) of the View from Space or Earth's Countries and Coastlines.

  • 67% of webs were used for Big Background Images as key visual design.

  • 36% of people feel Dark and bright colours are used alternately.

  • Illustrations are less used as the visual design approach.

  • Most of the good webs support the micro-interactions

design-system

Design system for UI kit

5

Create a style system

Once we defined the colours, font brand images, I immediately went to the next challenges; A Design System across our platforms. Unlike branding and visual identity, design systems were a logical move form web, various platforms, and factors. It was not only across branding, screens, platforms, our users but also crucial when it comes to driving consistency of brand and experience across products. 

 As a product designer, everything I did needed to be able to scale. While the operators needed to coordinate their system with StellarStation, the UI component was an important role where needed to less distracting, good readability and leading to clarity in our platform.


The design system was important that engineers can check the UI details, accurate specs, assets and code for UI design adjustment before they start to develop but also a bridge that allows designer (Me) to keep the consistency of the style. Now, I was glad we replaced all the old styles and gave a new look of UI and UX. 

Finally, brand everywhere

I was determined to restructure roll the out brand identity if I can join Infostellar. It was almost rebranding and crafted all the look and feel. If a brand restructures is to be successful, I need to do full commitment. It wouldn’t just place a logo on the website and tweak the colours and pixels.


I have been working with Infostellar’s team tirelessly to apply the brand system to every facet of company and product. It’s been a ton of work with a lot of dependencies and co-works. Many things needed to be revisited again and again as elements of the brand evolved simultaneously. But it was completely worth it. Thank you for all the team members and engineers to making it come to real life.

web-image
billboard
branding
banner1
banner2
S4
S1
S2
S3
name-card
print
post
img-ss-planning

Learning & Takeaway

Before I joined Inforstellar, I had a vision that would great if I could rebrand company identity.  I joined the company as product design, the manly responsibility was focused on UI and UX of the platform. However, when I took the initiative an idea in this project, I wanted to build a friendly and trendy veneer in the space industry.

It wasn't easy tasks when I brought this proposal out, especially, I wanted to replace an existing brand system but fragmentary. Thus, it was an intensive year that everyone was working hard on this progress. For launching the new brand system and applied to every corner, we completed a lot of good brand experience but also facing many struggles.

group-1

As you can see, our office still useing the previous logo. ????

This project taught me a lot about the design thinking process, but also prioritization. It was good to conduct a leap in an early phase but gradual experiments might take times but relatively safer.

 To see people interact with my design and gain feedback from peers and customers. The value of the brand mission has been extended. This project helped broaden my thinking to people who don't know the impact of design but also built a stronger relationship with team members. The design might not important but be a power.

© 2020. Jia-Jhen Li All rights reserved.

ic_ig
ic_linkedin