Blismo Website Redesign

Summary
Blismo (YC W22) is the first app in digital receptionist based on the merchant that helps business owners manage their waitlists and appointments.

The goal of the project is to redesign the branding and responsive web landing page in version 7.0 / 11.0
Timeline
3 month
Role
Product Designer
Scope
Product design, Design strategy, Prototype, Branding design
Team
1 PM (CEO), 3 Product Designer, 5+ Software Engineers.

OVERFLOW

PROBLEM

The Blismo is scheduled to apply Y combinator summer of 2022 class. To improve the product, Blismo developed a new core - the automatic receptionist. It caused Blismo to decide to redefine its brand. Apart from the strategic changes, rebranding included a new logo design, and web App design system.

PROJECT PROCESS

Rebranding - 7.0

Branding lies at the intersection of business, marketing, and design. Use design strategy to solve that.

Web Landing Redesign - 7.0/11.0

Blismo’s landing page is a bridge between corporate identity and product. Rethink website's goals.

Web App Redesign - 7.0/11.0

After brand redefining, we start to redesign the web app and alterations to its appearance and functionality.

PREVIOUS EXPERIENCE

Before we jump to the next step, let's take a look at the Blismo 6.0 version.

  • The current brand logo is a bit ordinary and not unique.
  • As a technology company, the previous colors and serif typeface expressed: tradition and enthusiasm.
  • In the landing page, a large number of images are directly applied without processing.
  • Illustrations do not match the landing page style.
  • Too many type style makes the user very difficult to read.
  • Content category too simple. Too much text content.
  • User hard to find the login entry.

Previous branding and landing page

BUSINESS GOAL

Increase business traffic.
Increase payment user amongst.

CHALLENGE

Rebranding is not a simple logo adjustment. One of the primary considerations I took into is wanting to change the whole look and feel, also needed to improve the entire perception of the Blismo.

Another thing I am considering is the variety of users that will visit it, they may look for different information. The primary audiences of the landing page: business owners, and individual employees, come to the site for information such as login accounts, find the newest information, discount and policies. The secondary audience is consumers who get the join waitlist link to the store and are interested in Blismo. They may want to learn more about how the company works and its brand culture.

SOLUTIONS

For Blismo's redefine, I decided to create a more tech visual identity, on this basis, targeting the main audiences barbershop owners, and salon owners, I combined tech style with a smooth and beautiful feel. To tackle the challenge of the two audience tiers, I have listed different audience requirements frameworks for thinking about the landing page content.

RESEARCH

DEFINING STAKEHOLDER NEEDS

After interviewing the founder and getting the reviews from existing payment users, for future branding, I listed the following expectations:

  • Hoping the new brand style have the connection with the new feature.
  • The landing structure should be as simple and clear as possible.
  • Payment users want to learn more about the product and want to check pricing.

COMPETITIVE ANALYSIS

I looked into the market, trying to find inspirations and disparity among existing products and summarized some advantages and disadvantages:

DESIGN GOAL

So far, the design idea started with brainstorming and was gradually clearer with research results carried out.

For the rebranding part:

  • Transfer brand visual identity to modern and elegant style.
  • Design an App icon for the brand logo.

For the landing page part:

  • Renovate the landing page according to the new brand visual identity.
  • Modify the existing slogan and hero according to the main customer group - store owners.
  • Adding flowchart explanation part for the main features.
  • Add actual data, real customer feedback and pricing content.

DESIGN

LANDING PAGES

I.

Design Task

I started to analyze the original landing content and developed a new design idea. First, it needs to have an eye-catching login button. Second, the main content needs to be introduced and explained our product. The last thing is to use real feedback to attract customers to pay for that.

II.

Design Precess

After researching competing websites, I decided to add a responsive design and redesign the page layout. Sort by content category on the landing page. Placed all categories on the top of the navigation, which is convenient for the browser to quickly select and log in to their account. The pricing page has too much content which was chosen to be displayed on a separate page.

Initial Ideas and Lo-Fidelity Wireframes

Use pen and paper to quickly drop down thoughts.

Mid-Fidelity Wireframes

Transfer ideas from sticker notes into Figma. Received a lot of feedback during the polishing process.

Hi-Fidelity Wireframes, and 2 Rounds of Usability Testing

Choosing responsive web design can be applied to cross-platform and multi-screen sizes;
Easy to develop and maintain.

Animation and prototype

The design script happens to be the foremost component that communicates the plot of the animation. It could let me easily communicate with stakeholders..

III.

Highlights

1. Landing layout - From non responsive to responsive design.

Choosing responsive web design can be applied to cross-platform and multi-screen sizes;
Easy to develop and maintain.

2. Functionality- From illustration to workflow animation.

The original illustration style is no longer suitable for new Blismo. I think that by showing the real process will let user know how simple and convenient workflow is.

3. Case Studies- From simple to more real.

Because our management system scenarios are onsite. Used by shop owners, employees, and customers. So Blismo may not have a high exposure in the APP store. However, in terms of store performance, we can see a clear increase in customer traffic and better consumer feedback. I surveyed some of our users and put their feedback in this section.

4. Design Verification

Since the landing page upgraded version was uploaded, which help sales introduce and promote products. Our earnings have grown significantly.

DESIGN SYSTEM

To build the design system the benefit is the ability to replicate designs quickly by utilizing pre-made UI components and elements. After that, our design team can use the same elements to design, reducing the need to reinvent the wheel and thus risking unintended inconsistency.

REFLECTIONS

WHAT I LEARNED

This project started in the middle of the global pandemic. This forced me to start relying on Slack or Lark for work communication. However, timely communication can resolve many problems caused by distance. Our design team often schedules remote meetings for online communication and collaboration with Figma if needed. My coding knowledge allows me to easily communicate and adjust with front-end programmers. Our product construction speed maintains efficient operation.

Joining a startup means that you need to be involved in a lot of tasks, the scope is more than an ordinary product designer. Since I had no previous experience with management system design, it took me some time to learn the product's principles and MVP. Keep exploring, finding problems, solving them, verifying and adjusting the design, and finally achieved a good market response, which made me feel that I have gained a lot of valuable real experience.

View My Other Projects?

Naturalink

Natural Ink

App lets you create eco-friendly tie-dye textiles using natural plant based materials.

VIEW PROJECT
Glow

GLOW

Professional period cycle tracker App and habit guidance, best for PCOS patients.

VIEW PROJECT