More than just a Marketing Website: Introducing the new Genesys!
Genesys is the biggest technology hub in Nigeria, and we were given the task to communicate that image to the rest of the world. Here is how we redesigned the company’s website.
About Genesys
Genesys Tech Hub is a people-centred community, focused on growing talent, sustaining businesses and developing technical capacity in Nigeria. At Genesys, we understand the importance of education and entrepreneurship as key factors for growth. In a recent visit by Prof. Yemi Osibanjo (Vice President, Federal Republic of Nigeria), he acknowledged that the tech hub is the biggest he’s visited so far in the country.
In spite of this acknowledgement by Oga Yemi, somehow this image of what Genesys is and what they do wasn’t truly reflected on the current website.
What’s the Problem?
After a short strategy session with my product team at Agora, we deemed it necessary to redesign the current website for the hub, that will make it easier for stakeholders to understand what exactly the tech hub is all about. During the strategy session, we documented a few things we discovered was wrong with the current website, they included,
- Loading speed: Knowing that Nigeria ranks 134 out of 177 in the global speed test index, we tried testing the current website’s speed using fixed broadband in Nigeria, and found out that it took 31.5 seconds to load the website’s homepage.
- Content: A lot of activities happen in the hub, and it wasn’t reflecting enough on the website. We went ahead to check the average bounce rate on the website, and it had a high value of 60%. We needed to review our content strategy!
- Navigation: We also conducted a small usability test with 14 tech enthusiasts in our community, users who wanted to apply for internship positions or join our talent pool, and they complained that they didn’t really know what link to click or what form to fill.
- Conversion rate: every establishment has a business model, and ours was to provide technical capacity with the talent pool at Agora. So we sent a survey to the Sales department and found out we had a low conversion rate from prospective clients through the website.
With the information we got from our strategy session, we wore our design caps and set to work immediately!
Research
Before jumping straight into twisting screen pixels, we had to first understand what our audience had in mind while visiting the website, what the management wanted to accomplish with the hub, what our competitors were doing, and from all these data, derive the goals we want to achieve with the redesign.
User Questions
We wanted to understand the questions our users asked about the hub, and what they had in mind while visiting the website. To do this we gathered some data from our Google Analytics and also some data from informal surveys shared at physical meetups.
We documented the most frequently asked questions from all the data we could collect. This helped us greatly when planning the content strategy.
Business Goals
After a series of meeting with the management and some stakeholders in the Hub, we also curated a list of business goals that the new website should accomplish.
- Enlighten individuals on the ultimate goal of the hub
- Share the impact Genesys has made so far within the Nigerian tech ecosystem
- Expose the talent pool at Agora to potential clients
- Attract creative people and problem solvers to work with the hub, and grow it to international heights
Competitor Analysis
We took a sneak peek at other technology hubs in Nigeria, to see how their user journeys were like, what they got right and what was missing in their platform. Luckily, an exhaustive article by Techpoint listed many tech hubs in Nigeria with links to their websites, and cut our workload by half!
Our Audience
Knowing that the focus points of Genesys Tech Hub were technology, education, and entrepreneurship, it was easy to come up with a list of users visiting our website. We developed a Persona for each of the users on our list, and in the process, we discovered that all of the personas had some things in common. This helped us define the user goals we wanted to achieve with the website redesign!
User Goals
Based on the research conducted, the new website would help users to:
- Learn about Genesys Tech Hub
- Apply to initiatives hosted by Genesys
- Hire creative talent
Information Architecture
Information Architecture could simply be related to the blueprints of a building, in this case, blueprints of a website. It involves the design of information, its hierarchy, and how it is structured for navigation, findability, and usability.
From our previous usability test, we discovered the difficulty some users experienced while navigating our website, and so we put this into consideration when drawing up our website structure.
We started with restructuring the sitemap, then we went into detail to specify the sections each page would be made up of, and how those sections would lead to other pages in the website.
User Flow
User flow can be understood as a series of steps a user takes to achieve a specific goal. With the information gotten from our research, I went ahead to prepare an ideal user flow for our users.
When designing the user flow, I put into mind the three user goals we wanted to achieve on the website which was to learn, apply, hire.
Wireframing
Wireframing is the process of laying out the information required on an interface without the distraction of visual aesthetics. With more focus on the web feel and view, I sketched out some wireframes with pen and paper. During the wireframing phase, I emphasized on readability by balancing text content with image layouts for better presentation.
P.S: The principles of responsive and adaptive design are important during design to create a user-friendly experience that’s compatible across multiple devices. I failed to pay serious attention to the responsiveness of the website, and as a result, I now have to design a mobile view of the whole website afresh 😢.
Visual Design
While I was laying out the wireframes, the style guide was simultaneously developed by Chika, our slaying female designer in the team. She helped me prepare the final guidelines that specified things like the layout grids, logo variations, colour schemes, and typography. I then used the style guides to design the final user interface of the website.
Icons & Illustrations
In the bid to spark user delight and enforce originality, we went a step further to carefully customize the icons and design custom illustrations used in the website. This was a new field for us so we had a lot of hands-on learning to do.
I brushed up my Illustrator skills while Luke picked up a new drawing gadget, we shaa delivered our drawings on time and the learning experience was worth it! 👏
Animation
Within this period, I had just picked up a new obsession with UI animations and motion design. Since I didn’t own a Mac device to make use of cool animation tools like Principle and Studio (duhh), I resorted to scavenging the Internet to find beginner friendly tutorials on animating with After Effects.
I found the perfect introductory video on Youtube by the infamous Pablo Stanley!
And around that same time, Invision also hosted a #DesignerChat on Twitter (with…drum roll…Pablo Stanley!)
It was just perfect timing! During the #DesignerChat, I got to ask Pablo what learning resources he would recommend to designers just starting out with motion design. He recommended quite a lot of tutorials and resources, but the one that really worked for me was the Motion Design with After Effects course by Design+Code. With that, I was able to create a simple logo animation of the Genesys logo, and kick off my motion design career! 😁
Content Strategy
Content strategy of a website could simply be related to the interiors of a building, it involves the planning and the delivery of website assets and relevant contents for distribution. This was so far the hardest phase of our website redesign project! We had to come up with organic photos and videos, plan and deliver copywriting for the website sections, and craft the UX copy for our action buttons and interactions!
Franky, the guy that has unfailingly captured every moment at the hub and outside the hub, and has generally been our Ngolo Kante in the team helped us a lot in producing all the media we needed for the website, I also got a chance to learn some new photography tricks!
I also had the job of curating all these assets to a single source, organizing them and making the assets available to the development team. Hopefully, a very helpful post by AREA 17 taught me some file organization techniques, and I didn’t get to run mad with all those assets after all.
Tools Used
The tools I used during this project include,
Inspiration: Dribbble, Uplabs, Kirill Zakharov’s Designer Playlist
Communication: Slack, Trello
Design: Pen and Paper, Adobe Illustrator, Figma
Animation: Adobe After Effects
Documentation: Google Docs, Google Drive
Developer Handoff: Figma
Next Steps
Like they say, designing is never finished, and there is still a lot of work left to do. But still, a wise man I know once said: “progress is progress”. Some of the new deliverables we’ve put up in the calendar so far include,
- Mobile view
- Usability Tests
- Analytics
You can check out the live website 👉 here
Thank You!
I want to specially thank my team of design ninjas — Chika, Luke & Franky, for their collaborative efforts and their passion towards the project. Also, special thanks go to Ayamatanga for his undying project management skills, and for greeting us with “Assets” every day until we finished gathering all the website’s assets.
I also want to thank everyone who read this case study till the end without sleeping off! You’re the real MVP! If you really enjoyed this article, please let me know by 👏 or giving your feedback in the comments!
📝 Read this story later in Journal.
🗞 Wake up every Sunday morning to the week’s most noteworthy Tech stories, opinions, and news waiting in your inbox: Get the noteworthy newsletter >
