preload

Our Approach

Pada tahap awal kami melakukan reset dari segala aspek, Data verbal dan data Visual. Reset yang kami buat menggunakan metode kolektif, mengumpulkan data yang dibutuhkan sesuai dari Goal yang ingin kami capai. Goal untuk proyek yang pertama kami ialah: Educate users on why they should be using call tracking, why PhoneWagon solves their pain points, and ultimately get them to convert into a paying customer.

Setelah kami mendapatkan data verbal kami juga mengumpulkan data visual, kami mengumpulkan referensi visual dari beberapa inspirasi yang diberikan oleh Phonewagon ataupun inspirasi yang kami kumpulkan sendiri. Dari referensi ini kami bisa mempunyai tujuan/arahan visual yang jelas.

Research & Moodboard

We did research from all aspects as the very first step, both verbal, and visual data. We used a collective method, which is to collect data according to the goals we want to achieve. The goals for the first release of the website is to educate users on why they should be using call tracking, why PhoneWagon solves their pain points, and ultimately get them to convert into a paying customer.

After we got the verbal data, we collected the visual data as well. We collected visual references given by Ryan and his team then proposed some ideas that might work well for this product. After all these things, we had a very clear guide both for the project goal and visual idea.

IA & Wireframing

In this step, what we tried is to determine the contents that would be displayed on Phonewagon’s marketing website homepage. Again, we talked much with Ryan and his internal team. We had 2 outputs at the time, the information architecture of the site and also the the user flow.

After all of the structures locked, we selected which content fits the needs, sorted some cards and sticky notes, then we can do the wireframe. We made several wireframes ideas on the homepage before moving forward to another page.

Digital Execution

After finalized the wireframe and created low-fi prototype based on the IA and flow we had via Invision, we play around with some colors and visual elements. We tried a lot, following the guide we had on the first step, gradient color, some 3D pattern, and product visualization with 3D illustration.

After many back and forth process, we found the visual identity for the website. So we continue to produce all screens in hi-fi using this visual design language.

Implementing Visual Language

This is a very interesting step for us, this step is more about exploring and applying the visual language we generated before. We aim to deliver a consistent visual shape page by page, including illustrations and icons inside.

We adapted levels for illustrations. 3D illustrations for main product features, we did it using Cinema 4D.

Then, a simple illustration covering the visual function of the product, it helps to tell user about usage and functionality.

The last one, we used the isometric illustration for all features inside the product.

Browse
More Projects

We help brands communicate to their audience through creative design, clever strategy and technology

fonedynamics

Delivering new way to communicate.

Fonedynamics Ill

Fone Dynamics

Website, Development

vitally

Customer Success for B2B SaaS

Vitally Ill

Vitally

Website, Development

See More Project

Our Clients.

We like to build close relationships with our clients. We believe dynamic collaboration is the only way to get the job done well done.

Interested in Collaboration?

Challenge us. We want to work with you to create the really cool stuff.

Let’s Talk