As a kid, I had already picked up an interest in design, creating basic posters and birthday cards with tools such as Paint and Corel Draw at an early stage. As I grew up, my interest grew and I became even more curious about how websites were designed and the process involved in developing one. This led to me constantly playing around with website code, themes, watching tutorial videos, attending coding bootcamps and design seminars, taking on a lot of projects, and constantly developing my skills. Today, I work as a full-time Frontend Developer/Ads Specialist for ID Africa.
I joined IDA in January 2020, and by early March, I was assigned the task of carrying out a full website redesign for the company’s corporate website. This was just shortly before the COVID-19 pandemic broke out, which ultimately led to me completing the project from top to bottom working remotely from home.
Towards the end of May 2020, I completed the full re-design of the ID Africa website (which was tedious by the way *pheew*). It took me about 8 weeks to complete.
Here was my design process summarized in these 8 steps:
1. Studying Existing Website [4 Days]
At the initial stage of the task, my first step was to go through every section of the old website and list out the problems and the certain areas that can be improved on.
Photo of some responses from the survey
I also gathered information using online forms I sent out to users, on what parts of the website they felt could be improved on and their thoughts on the general user experience while navigating through the old website. This also helped to give me a clear understanding.
2. Identifying Goals [6 Days]
At this stage before diving into the design, I listed out the goals to achieve at the end of the website redesign process.
The type of questions I asked myself at this point were:
– Who is the site for?
– What do they expect to find or do there?
– What are we trying to achieve?
– What are the must-haves?
– What’s the deadline?
For me, this is the most important part of any website design process. If these questions aren’t all clearly answered, the whole project can set off in the wrong direction.
3. Competitor Analysis [4 Days]
Honestly, I looked at what other digital media and marketing firms are doing out there. I started with a list of competitors within the same field both in Nigeria, and the top ones abroad, and also moved on to other businesses that serve our target audience outside the marketing comms, digital media & technology field (*names withheld*).
I compared certain features across these companies and listed out what could be used and what we should avoid.
4. User Flow & Wireframes [2 Weeks]
For me, A user flow is a necessary foundation for any well-designed website. It helps give a clear idea of the website’s information architecture and explains the relationships between the various pages and elements.
Photo of a sample wireframe created during the project.
Although a wireframe doesn’t contain any final design elements, it serves as a guide for how the site will ultimately look at the end.
5. High Fidelity Design & Prototyping [1.5 Weeks]
This was the stage where I completed the user interface design for the website, keeping in mind the existing brand elements, color choices, and logos. I used high-quality images across the website to give it a professional look and feel and also to communicate a unique message that aligns with the brand image.
Photo of a sample high-fidelity design created during the project.
Design tools such as Figma, Adobe Photoshop, Adobe Illustrator were quite useful at this stage.
6. Implementation [1.5 Weeks]
At this stage, I had to work closely with the content development team on copywriting and literature, as well as videos to be embedded on the site. This was when I finally started ‘building’ the website itself. I took individual graphic elements from the user interface design to create the actual functional website, which was all done on a staging site (Always ensure you back-up first).
Photo of some additional CSS added to the project.
The site was built using a CMS (WordPress) alongside essential plugins for various sections. My knowledge of front-end web development was also crucial at this stage, as it involved writing valid HTML5, CSS3 and JavaScript code that complies with current web standards.
7. Testing [4 Days]
Once I had completed building the website, the next step was testing. This was done by the management team, quality assurance team and some select users within the industry outside of ID Africa.
All the pages were thoroughly tested to make sure all links were working and that the website loads properly on all devices and browsers.
8. Migration/Launch [3 Days]
This was definitely my favorite part of the project, After all the back and forth through several Zoom calls and emails, I was given the green light to launch! Although this stage sometimes does not always go as planned because of unforeseen events (*pesky bugs*), I’m quite glad that the process went quite well, and my sleep was not fully disrupted.
A key thing to remember about the launch stage is that it’s not the end of the job. Once the site goes live, you continually have to manage and test new features, update content, monitor analytics, etc.