Feature Page Conceptualization

A new and fresh take on a brand

Company

Viruma

Role

Part-time Developer

Contribution

Design/Development

Brief Description

Allowing users to access viruma

native metaverse app through

web video streaming

This case will cover one of the task given by the company, which is to design and develop a concept page for their new feature page. They want it to be distinct, simply, yet still memorable.

Company Profile Study

Analyzing Main Website

The first question I need to asked was, " How does the company express itself?"Are they minimalist or expressive? Muted or colorful? I visited their website to understand how they wanted to be represented.

Product Identity

Next, I looked at what they are selling and how they market it to their target audience. Sometimes, there are many technical restriction imposed to the designers when creating a layout. Looking their work on a blank canvas helps me to understand the elements they often use often.

Key Observations

Simplicity

Almost every time, the company markets themselves using simple elements, often with black backgrounds. This gave a very apple-esque aesthetic

Lots of Whitespace

Looking from all the materials, whitespace are very prominent in their design. There is no part that are too cramped or even close

That Yellow Accent

Being their logo, the use of yellow is rather unsurprising. However, the yellow accent often provides emphasis on important information. Hence, I kept it in mind when designing the page.

Challenges

During the time of development, there was some team restructuring inside the company. Hence, I was assigned to a new team. Being a relatively new team makes it hard to assess what type of design is possible within the given time period. Hence, it is important to ask the right kind of question.

"What is the capability of the team?"

Our team was very small, only consisting of two people, including me. Hence, it was important to keep the design as straightforward as possible to explain

"When was the deadline?"

Approximately two weeks. However, the manager gave us a green-light whenever we needed more time. This hints that it is plausible to implemented complex effects.

"When was the requirement?"

At one of the meeting, the manager wanted the user to understand the core product, which was a 3D Interactive Model of a building. If possible he wants the user to have the 3D model directly on the website

Design Process

I began my design by looking from the given marketing material. It has 3 specific sections:

What is Interactive 3D Maket

In this section I decided to have a normal product title with a 3D Building rendering with Three.js. The model will have a orbit control, which is very similar to the actual product. This model will then parallax-scroll from the original title screen to above the explanations. This fulfills one of the requirement, which is to give user a sense of what the product is about while giving it a simple straight-forward animation .

Another unused resource is to replace the building with a customer. As the user scroll, the environment around the character will change until they reach a purchasing point. The idea is to tell a customer journey map in a parallax-scrolling form. However, it needed a lot of assets, which we did not have

Benefits

Benefits or any other point form materials are usually conveyed with cards. However, I want to give them some effect that are out of the ordinary. As it happened, I stumbled upon Linear's Website which has a glow effect at the border whenever the user hovers near them.

Features

Although it is also usually in point format, I would like to try a more advanced effect. This time, I took inspiration from Margelo's Website, specifically section that detail their clients. It was coined the "Sticky Parallax Effect" I do not see such effect often, so I decided to give my own spin to it. At the end, I also add blurred parallax-scrolled circles to give more life at the background. This circle is a a combination of the brand"s signature yellow and a pink-ish color to keep it from being too bright

Result

As the time of writing, this specific page will not be live yet. But you may try visiting them at Viruma.id