Website Design Process Steps

STEP 1

Discover

The first step in this process involves you completing a questionnaire (client request). This gives me a better idea of your project needs and how we can work together. After evaluating your business needs, I will schedule a call with you to discuss things in further detail.

Initiation & Conception

STEP 2

Road-mapping

Once we agree to work together, you will complete a second questionnaire (roadmap) regarding the project timeline, dependencies, expectations and deliverables, etc. Once you decide to work with me, we will have a call to discuss and finalize the project details and ensure that we are both on the same page.

Planning

STEP 3

Research

Analyse

As soon as the project starts, I will spend my time organizing the content you give me into various parts that can easily be accessed later.

Then I will conduct a competitor analysis to see what the trends are in the industry, so that I can learn about that works well and to discover what could be used to create excitement about your brand.

Next, I will organise the research/content into different sections and make a pros and cons list to help me narrow down what works and what features, copies, layouts, etc. I could implement into your project.

I will also pay close attention to and make note of the various font styles, colours, and graphic design trends that could be used to complement your brand.

STEP 4

Define

Next, I will need to get a better idea of the problem I’m trying to solve. For this part, I will create a user story, user persona, empathy map, user journey map and user flow/task flow so that I can narrow down our target audience as it is a vital step in the process to get your site your desired engagement and reach.

After that I will create your sitemap and information architecture, so that I can justify the pages needed for the site to achieve your business goal.

Then I will perform a heuristic evaluation and first-click test/tree test of your site (if you have one) to see how we can best improve its functionality based on our research. I'll also take notes of anything I would like to keep or change.

User Research

STEP 5

Design Research

The next step in my process is to do specific design research. I will view various design websites for some more ideas. I will screenshot any relevant ideas and organise them into different sections once I'm done. Then I will narrow them down even further into usable sections.

Thereafter, I will create a mood board. My intent is to create a signature look and feel, but still one that aligns with the research and project goals.

I will then send the mood board to you for review and ask you to give me some feedback as it will inform the choices I make for the project moving forward. You can learn more about how my review/feedback rounds work below, after step 9.

Once you sign off on the mood board, I will have a brain-storming session to explore the use of different layouts, font styles, graphic design trends, and colours.

Next, I'll create some rough ideas on paper to figure out what the design will look like.

Ideate

STEP 6

Design

Following the paper sketches, I will create mid to high fidelity wireframes in Figma to give you an idea of what I'm planning to create, as I feel it's easier for both you and I to get an idea of what I'm planning on building, so that there are no surprises.

Please note, when I mention mid to high fidelity wireframes, I mean that it won't have the exact images or copy, but the overall look and feel will be similar to the end result.

I will first design the homepage at all break points, then send you the designs for review.

Once you sign off on the designs of the home page, I will then build out the rest of the pages, including all their breakpoints.

I will then send you those for review as well.

Wireframes

STEP 7

Prototype

Before I start on the major development work, I will create the style guide in Webflow to ensure that the designs are consistent. Then I will build out the rest of the pages.

Alternatively, I may build your site in Hostsinger. If I do, I will adjust the design settings before starting the development process to ensure that the settings are as close to the style guide as possible. Please note that there are less customisation options in Hostsinger.

I will then build and iterate on the design in Webflow or Hostsinger.

After building out the designs, I will prototype it in Webflow (connect all the pages). Prototyping is great for viewing the design in real-time and seeing more clearly what the final design will look like.

Prototyping is not needed in Hostsinger.

This part of the project will not include any animations.

I will then send this to you for review.

Execution

STEP 8

Interactions

Once you sign off on the third round of feedback for the prototype stage, I will work on the animations and micro-interactions. This is mostly possible in Webflow.

Please remember that Hostsinger's animations are very limited.

During this time, I will iterate on the design as well and make any necessary changes.

Animations

STEP 9

Accessibility

Next, I will make sure that the site is accessible. I will fix fonts, colours, include alt tags and anything else that's needed.

I will also ensure that images are clear and represent the information well.

I will then ask you to review the project for the final time, so that you can test the site's functionality in its full capacity.

Adjustments

STEP 10

Launch & tutorial

Then, I will publish the site and create a tutorial to teach you how to use the site editor.

You will be able to upload and edit media as well as edit the writing on your site at any point in time once the site is published.

If your domain needs to be transferred, then I can do it as well.

Publish

Feedback

There are 3 review rounds for each of the storyboard, prototype and final product stages of the project.

The first review round is for major content changes, if any.

The second review round is for approval – It is for making sure the correct changes were made (only small tweaks if any).

The third review round is for signing off on any additional changes that were requested.

After each round, a quality checker that is provided by you should edit my work and make sure that everything is done according to the quality control checklist that you and I put together during the roadmap meeting.

Review rounds

STEP 11

Retrospective

In the final stage of the project, I will conduct a retrospective where I will walk you through the work that was done. This will either be in the form of a recorded video or conference call.

You will also receive a project closeout document with FAQs and next steps.

Project Closure

"I am so happy with the look of my website. Emmy was patient with me throughout the entire design process. She helped me visualise my thoughts for the site and went above and beyond to give me a design that speaks to the messaging of my organisation as well as one that met my project goal. I would highly recommend her services. She is organised and provides excellent project management services. I am so grateful to have worked with her."

- Esther Johnson