Testing and verifying our Process on our own website

Design & Process

Process lowers the risks involved with anyone you work.

To explain our process it will be easier to show our process through our website design. Applying the same process on our website revamp. Explaining the nitty-gritty of each and every step that we follow.

Let's dive into the process which is pretty much same for every project we work on.

Cool, now as you are watching this, you are certainly interested in the process.

The process will be customised according to your scope of work.

A simple & better design process

To continuously deliver high quality projects to clients all around the world, requires understanding, planning & spot on execution.
Kickoff Call
Product Sprint
|
Day 01 Discovery
Day 02
Solutions
|
|
Day 03 Wireframes
Day 04
Moodboard
|
|
Day 05 First Impression
Design
Development
stage 01

Initial kickoff call

Picking a target: an ambitious but manageable piece of the problem that we can solve in one week.
To begin the process we need to have the right challenge to make a project happen.

This is the first step in our process where we get on a call with our client.

This part of the process requires inviting the right people to share business goals, technology capability, and user needs.

So we kick off by jumping on a conference call, with the aim to get optimistic and ask :

  • Why are we doing this?
  • Where do we want to be in six months, a year, or even five years from now?
  • What impact this revamp will have?
We start from the end.

We usually start by imagining your end result and risks along the way. Then work backward to figure out the steps you’ll need to get there.

The answers to these questions just raise more questions:

  • Can people use your product?
  • Do people understand your product?
  • Will people find your product useful?

The rationale of this step is to pick a target or a challenge: an ambitious but manageable piece of the problem that we can solve in one week.

Day 01 : Discovery & Analytics

Starting the project from Monday where we click’n’play with the product. And getting to know your website/app to better understand the challenges and problems that we can solve by:

  • Asking obvious questions.
    Pretending to be naive. Asking “Why?” a lot, while scrolling through your website / app
  • Reframing problems as opportunities.
    Listing down carefully the problems and using “How might we” phrasing to turn them into opportunities.
Day 02 : Choosing the strongest solution

After a full day of understanding the problem, on Tuesday we focus on solutions. The day starts with inspiration: looking at great solutions from a range of companies, including yours.

  • Brainstorming
    We brainstorm solutions for the problems identified on Monday.
  • Competitors
    Thoroughly studying other competitors, reviews, and joint areas of business.
  • Sketches
    Using sketches to turn abstract ideas into concrete solutions

By evening, our team have a stack of solutions based on our sketches from the morning and that's great, but it's also a problem.

You can't prototype and test them all - we need one solid plan. So we critique each solution, and decide which ones have the best chance of achieving the long-term goal.

Here we jot down some rough ideas on Figma. Circling the most promising ones and sharing the Figma link with you by Tuesday 6pm.

Day 03 : Information Architecture & Wireframing

On Wednesday morning, we take the winning scenes from our sketches and weave them into a low fidelity wireframe which then becomes a step-by-step plan for our prototype giving us a basic idea of the user flow and finding the loop holes in the user experience.

In this step we work on either the information architecture or wireframe whichever can be completed in a single day. For us, since it was a simple 5 page website so we were able to complete the Information Architecture and the wireframe of the Landing page.

Day 04 : Moodboard

Once we have laid a strong foundation of the website (or app) information architecture which gives us a hawk eye view of the overall website (or app).

We then start our Thursday morning with the inspirations where we capture good ideas on Pinterest creating a mood board (here’s our brand Pinterest moodboard that we created during our revamp) with all the required inspiration fuel to drive this project in the right direction.

Creating mood boards with just enough boards to evoke honest emotions for clients and designers.

By day end, at 7pm, we had the Figma file packed with our vision, reflecting following design elements:

  • overall style
  • color patterns
  • font pair
  • rough illustrations sketches

We normally deliver our vision in a “1+2” format to our client, where one is awesome, and two others are very good.

Day 05 : The first impression

On Friday our aim is to get that first impression of our efforts on screen based on the strong solutions from Tuesday, thought out information architecture from Wednesday and visual mood board from Thursday, we then work on the first screen design that is the Landing page or a few app screens.

Incorporating the colors, typography and the design style into the landing screen on Figma/Sketch app.

Giving the brand a realistic façade.

It will be the forming factor for the whole perception of the work we will be following ahead for the rest of the screens.

By day end we have three design versions of the landing page to choose from.

Sending the first concept of the designs (three versions) to the client by Friday 7pm where you can review and critique with your team over the weekend.

stage 01

Initial kickoff call

To begin the process we need to have the right challenge to make a project happen.

This is the first step in our process where we get on a call with our client.

This part of the process requires inviting the right people to share business goals, technology capability, and user needs.

So we kick off by jumping on a conference call, with the aim to get optimistic and ask :

  • Why are we doing this?
  • Where do we want to be in six months, a year, or even five years from now?
  • What impact this revamp will have?
We start from the end.

We usually start by imagining your end result and risks along the way. Then work backward to figure out the steps you’ll need to get there.

The answers to these questions just raise more questions:

  • Can people use your product?
  • Do people understand your product?
  • Will people find your product useful?

The rationale of this step is to pick a target or a challenge: an ambitious but manageable piece of the problem that we can solve in one week.

stage 02

Product Sprint

Day 01 : Discovery & Analytics

Starting the project from Monday where we click’n’play with the product. And getting to know your website/app to better understand the challenges and problems that we can solve by:

  • Asking obvious questions.
    Pretending to be naive. Asking “Why?” a lot, while scrolling through your website / app
  • Reframing problems as opportunities.
    Listing down carefully the problems and using “How might we” phrasing to turn them into opportunities.
Day 02 : Choosing the strongest solution

After a full day of understanding the problem, on Tuesday we focus on solutions. The day starts with inspiration: looking at great solutions from a range of companies, including yours.

  • Brainstorming
    We brainstorm solutions for the problems identified on Monday.
  • Competitors
    Thoroughly studying other competitors, reviews, and joint areas of business.
  • Sketches
    Using sketches to turn abstract ideas into concrete solutions

By evening, our team have a stack of solutions based on our sketches from the morning and that's great, but it's also a problem.

You can't prototype and test them all - we need one solid plan. So we critique each solution, and decide which ones have the best chance of achieving the long-term goal.

Here we jot down some rough ideas on Figma. Circling the most promising ones and sharing the Figma link with you by Tuesday 6pm.

Day 03 : Information Architecture & Wireframing

On Wednesday morning, we take the winning scenes from our sketches and weave them into a low fidelity wireframe which then becomes a step-by-step plan for our prototype giving us a basic idea of the user flow and finding the loop holes in the user experience.

In this step we work on either the information architecture or wireframe whichever can be completed in a single day. For us, since it was a simple 5 page website so we were able to complete the Information Architecture and the wireframe of the Landing page.

Day 04 : Moodboard

Once we have laid a strong foundation of the website (or app) information architecture which gives us a hawk eye view of the overall website (or app).

We then start our Thursday morning with the inspirations where we capture good ideas on Pinterest creating a mood board (here’s our brand Pinterest moodboard that we created during our revamp) with all the required inspiration fuel to drive this project in the right direction.

Creating mood boards with just enough boards to evoke honest emotions for clients and designers.

By day end, at 7pm, we had the Figma file packed with our vision, reflecting following design elements:

  • overall style
  • color patterns
  • font pair
  • rough illustrations sketches

We normally deliver our vision in a “1+2” format to our client, where one is awesome, and two others are very good.

Day 05 : The first impression

On Friday our aim is to get that first impression of our efforts on screen based on the strong solutions from Tuesday, thought out information architecture from Wednesday and visual mood board from Thursday, we then work on the first screen design that is the Landing page or a few app screens.

Incorporating the colors, typography and the design style into the landing screen on Figma/Sketch app.

Giving the brand a realistic façade.

It will be the forming factor for the whole perception of the work we will be following ahead for the rest of the screens.

By day end we have three design versions of the landing page to choose from.

Sending the first concept of the designs (three versions) to the client by Friday 7pm where you can review and critique with your team over the weekend.

The Weekend Review

Weekends where you and your team can review, critique and discuss on the design.

stage 03

Design

Get started quickly with these prepared landing page.
Day 06 : The Changes

We will setup a call with you on the second week of Monday where we will listen to your team's feedback and selecting the final design style from the three versions. Here our main aim will be to improve and enhance the design for the next level.

Bringing the product to it's pre-final condition, making small changes in the texts, and illustrations.

Day 07, 08, 09: Rest of the Screens

Once you and your team is sure about the design style we will then start working on the rest of the screens.

Here we will be working on finalising:

  • overall style
  • iconography
  • illustrations
  • website / app content

No need to stay lost while waiting for our message - just pop into Figma at any point and see what we are working on at the moment.

Day 10: Making product shine

During second week of Friday’s call we discuss:

  • the small things we need to work on to make the finished product shine
  • the look of tablet and mobile versions
  • animation flow & design

After that we make final corrections and proceed to the make-up

Call, check if everything is in place, and send you the archive with all the files.

stage 01

Initial kickoff call

Day 06 : The Changes

We will setup a call with you on the second week of Monday where we will listen to your team's feedback and selecting the final design style from the three versions. Here our main aim will be to improve and enhance the design for the next level.

Bringing the product to it's pre-final condition, making small changes in the texts, and illustrations.

Day 07, 08, 09: Rest of the Screens

Once you and your team is sure about the design style we will then start working on the rest of the screens.

Here we will be working on finalising:

  • overall style
  • iconography
  • illustrations
  • website / app content

No need to stay lost while waiting for our message - just pop into Figma at any point and see what we are working on at the moment.

Day 10: Making product shine

During second week of Friday’s call we discuss:

  • the small things we need to work on to make the finished product shine
  • the look of tablet and mobile versions
  • animation flow & design

After that we make final corrections and proceed to the make-up

In this step we work on either the basic user flow or wireframe whichever can be completed in a single day. For us, since it was a simple 5 page website so we were able to complete the Information Architecture and the wireframe of the Landing page.

Design Handoff

Delivering the final files to the developers.

stage 04

Development

Get started quickly with these prepared landing page.
Front-end development

Every company needs a customer-facing website that promotes and generates leads. Just like this gorgeous one you’re reading.

We can help you design and build an entirely responsive, SEO-friendly website powered on the world’s leading CMS, Webflow.

Marketing & SEO

Customizing your pages' meta titles and descriptions (the key ingredients in optimizing your site for search—aka, a person's journey from Google to your website).

Page load optimisation

When a website's slow to load, visitors bounce. That's why we offers the fastest hosting on the internet via our Tier 1 Content Delivery Network, Amazon Cloudfront, and Fastly.

Google Analytics setup

Integrating with Google Analytics so you can track how people get to your site, what they do once they get there, and so much more.

Webflow CMS API

We will add, update, and delete Items from Collections programmatically, right from your terminal.

Responsive by nature

Making sites responsive, so they display and perform beautifully on every device.

3D transforms & animations

Adding a whole new dimension to your website designs through animations.

stage 04

Development

Front-end development

Every company needs a customer-facing website that promotes and generates leads. Just like this gorgeous one you’re reading.

We can help you design and build an entirely responsive, SEO-friendly website powered on the world’s leading CMS, Webflow.

Marketing & SEO

Customizing your pages' meta titles and descriptions (the key ingredients in optimizing your site for search—aka, a person's journey from Google to your website).

Page load optimisation

When a website's slow to load, visitors bounce. That's why we offers the fastest hosting on the internet via our Tier 1 Content Delivery Network, Amazon Cloudfront, and Fastly.

Google Analytics setup

Integrating with Google Analytics so you can track how people get to your site, what they do once they get there, and so much more.

Webflow CMS API

We will add, update, and delete Items from Collections programmatically, right from your terminal.

Responsive by nature

Making sites responsive, so they display and perform beautifully on every device.

3D transforms & animations

Adding a whole new dimension to your website designs through animations.

What happens after
you contact us?

Write us a mail
01. schedule a call

Once you have contacted us, we will reach out to you and find a good time and place to discuss your challenge and goals in details.

02. scope of work

We provide you with a detailed project estimation (services required, price, duration, team composition).

03. get to work

We are ready to start working with you once we agree on the proposal and sign the contract.

Explore our engagement models

OUR SERVICES

Services we can help you with

  • Mobile app design
  • Website design and Development
  • Branding and Content Strategy
  • Custom Illustrations
Engagement models