I designed and prototyped the homepage with Figma, and then built it with Webflow. But let me work you through my process.
Project Overview
Website redesign for a firm that is into real estate services, management of commercial and residential property construction, furnishing, and interior designs.
The goal:
To redesign a responsive website that clearly showcases the company, the services it renders with evidence and testimonial; the work processes, and how they can be reached.
Responsibilities:
Research, Contents, Design, and Build
Project duration:
October, 2022
Design process
Project Brief
After the client reached out to me about the redesign of the website for his company, I ensured that both parties clearly understood the tasks to be carried out on the project hence the need for a project brief.
Besides, I also learned from my mistake from a previous project where I went straight to redesign a task disregarding being on the same page regarding the task with the client. NOT ANYMORE!
I ensured we both agreed on the project brief, which contains the goals, and details of the project. This helped to ensure that we were headed in the same direction for the project.
Questions that I asked to be included in the project brief were
-
What is the purpose of the website (check the project overview above)?
-
Who is it for?
.png)
Moodboard
Once we outlined the requirements for the project, I asked the client if there were websites he would want his website to look like. This is in order to establish the main layout, tastes, look and feel of my client for the design I will be presenting.
I now involve clients in this stage because I have come to discover that clients always have some website design or styles in their mind that they will want their website to look like. This helps me not to be too far from their expectations.
I also presented the client with some designs of websites that are into the same services his company is rendering.
Wireframes and Contents
I was working with a client in a physical setup, so creating wireframes was important as it helped me to make less expensive iterations. Creating these wireframes helped me to discuss with the client the different parts of the website starting with the homepage redesign.
We also established the different pages of the website and the content they will accommodate.
Design guide
I also had a design guide in place which I used for the project. I used the colours from the company logo as my primary colours while I researched typography that aligns with the industry.
Carrying the client along with my design process, and keeping him in the loop; starting with wireframes and adding the contents greatly reduced revisions of the mockups. This fastens the project delivery.
Desktop Mockups
MobileMockups
What I Learned
Thanks for your time
-
The importance of having a design process, but most importantly sharing that process with the clients, involving them as much as they'd want to, and always keeping the client updated greatly helped me on the project.
-
As creatives, we always want to showcase the latest product trends, but implementation is another ball game. I've had to iterate the initiate interactions I had proposed during prototyping and even change the layout of some parts of the website. While I understand that product changes can be made at any stage, understanding feasibility might prevent some. This is where communication with engineers during collaboration before adding interactions will greatly help out.
