Campaign Website

#Web UI Design #Illustration

In 2021, I worked as a UI/UX design assistant at NextDrive, which is an IoT company that focuses on electricity management. In this project, I helped to design the website to invite people to participate in our energy-saving campaign. I have presented 4 key visuals to the marketing team and assisted in designing 5 webpage UI according to the key visual we chose.

My Role

Visual Design, UI Design, Illustration

Timeline

July 2021 - Sep. 2021

Tool Used

Adobe Illustrator, Figma

Ideation

First of all, since the campaign is about to invite residents to save energy with us as well as help themselves save money, I think the key elements consist of the website should be households, green energy, money, and sustainability of the environment. Then, based on this key words, I try to propose three key visuals of the website.

Design Style & Reference

01

For the first design, I want to use bright colors to create a cheerful experience, to encourage people to participate in this event with us. Also, I hope to use perspective to let the uses focus on the center of the image, where I will put the campaign title and call to action. This design will be finished by illustration.

02

For the second design, I hope to combine the real house image and illustration to let the users pay attention to the illustrations as well as the environment surrounding them. I want to use few colors and thin lines to design a simple and clear illustration.

03

For the last design, I also want to combine the real image and illustration. But this time I will use simple lines only and the background image will be the nature environment, to convey a refreshing experience.

Start to design

With the references I had, I started to design three key visuals and presented my ideas to the design manager and marketing specialist.

01

I used the color style of the character in our company and the character itself to design the first key visual. These colors are bright and vibrant. And I draw some elements such as a light bulb, coins, a house, and an electric car to convey our campaign information. Besides, the perspective effect and the road in the middle can guide the users to focus on the title in the middle and the coins scattered in the corner can add some motion to this image.

02

In my second design, I found an image of a house and draw the illustration of electrical appliances. In this way, users can pay attention to the appliances that will consume energy in their houses and raise awareness to save energy. Furthermore, I let the character open the door and say hello since the character plays an important role in this campaign, representing our company, and will assist users on their way to save money.

03

In my last design, I use greenfield and simple illustrations to create an image of a sustainable home. To tell the users if they participate in this campaign, we can try our best together to benefit our environment in the long term. Also, in order to prevent the illustration from interfering with the words on the image, I lowered the transparency of the illustration.

First Iteration

After presenting my ideas to my colleagues, I received some feedback for my next iteration. I found that the first design was too strong and lively, which didn't fit our business image. The company wants to create a simple and sustainable image for the public, instead of an interesting and vivacious style. Among these three designs, they thought the last one was the most appropriate and hope to use this key visual to extend the subsequent design.

First, I keep the website green and simplify the banner on the top of the website, directing users' attention to our title and campaign description.

I use organic color blocks with light green color and leaf illustrations on the website's background to distinguish different sections in the website. Also, users can navigate the website with these color blocks too.

For the selection of pictures, I keep it simple and clear, avoiding choosing the image with high contrast or bold color. Additionally, I focus on the image of the family, hoping to attract family customers to participate in this event.

For the illustration, I use our characters to strengthen the company image and keep the color green to match the whole website.

In addition, I use simple lines to design icons and demonstrate our registration process, to encourage users' participation.

Lastly, I put the same house icon as on the first picture on the map to show which areas of the people currently participate in this activity. In this way, other people may want to join as well.

Second Iteration

After the first iteration, we found that the word content on the website is too much. Also, there is no secondary color that can be used to emphasize the important messages. The entire color tone is too single to leave an impression in users' minds. Meanwhile, the company hopes to reduce the frequency of character appearance and use simple line illustrations to assist text and pictures.

Instead of using the greenfield image, this time I choose an image with a person to echo our slogan "need everyone's participation to change the world". And the orange sparkles on the person's head represent a little effort from each person.

I used simple illustrations to assist the content.

I used the real mobile user interface on our product to give the users a clear way about our campaign and how can it help people lives.

At the registration part, I use images and small illustrations to help users understand our process more easily.

In the last section, where we show the number of participants, I use a city image and the small sparkles to represent that every corner in the city has people contributing a little of their power to change the world.

Final Design

After the second iteration, I received feedback that the website could have more colors. So I added blue and yellow into my design to create a more colorful but calm visual. I also add more textures to the design to create a more natural expression. In the end, based on the final home page, I designed the other four pages including the campaign detail, product detail, registration form, and FAQ page.

Takeaways

Designing the website for this campaign is definitely a precious experience for me to learn and grow. It taught me the importance of receiving critiques and polished my skill in pitching design ideas. Before I step into the industry, I can design everything I want. But, in the real world, I learned to think and design from a business perspective, trying to understand what is our business goal and what image we want to establish in public. Ultimately, I will be able to provide a more impactful and unique experience to the users.