Jaw War - Timileyin Olabajo

ON THIS PAGE

Overview
Problem Statement
Preliminary Work
Design Process
Outcome: Solutions & Metrics
Challenges & Learnings

PROJECT LINKS

Overview

Jaw War is a sessional inter-hall/inter-faculty debate that doubles as the biggest Public Speaking competition in Sub-Saharan Africa hosted by the TLDS, University of Ibadan.

For the 2021 competition, the executive team wanted a rebranding and an official website to better position Jaw War to sponsors and the general public as well as to solve some issues that have faced past Jaw War events.

Problem Statement

Since Jaw War’s inspection, the mode of communication has been inefficient. Many times, event venues are shared at the last minute, press releases are sent through flyers, WhatsApp statuses & broadcast messages e.t.c. This has led to miscommunication or the spread of false information in the past.

The major goal of the website is to serve as the official means of communication by the TLDS (Jaw War’s host) to the general public and sponsors.

Preliminary Work

Before any form of design commenced, I had a series of meeting with key members of the executive team and interviewed past Jaw War speakers and attendees to determine the features of the websites. We agreed on the following features:

• Blog - So audience can see latest updates about events date and venues e.t.c
• Donate portal - So alumnis, audience can donate to the program
• Simple & mobile responsive interface - the website should be simple enough, so users with different tech background can navigate with their phone by themselves.
• Programs Sections - So TLDS (Host of Jaw War) can advertise other programs alongside jaw war
• Team/Alumni corner - So the executive and alumini can be visible on the website.
• Resources - So past topics & speeches can be revisited by the audience and intending speakers
• Gallery - so past Jaw War attendees & speakers can re-experience the event through pictures

After the features outline, I then synced with key members of the executive for a clarity meeting to finalize the website features from both the information architecture and product vision perspectives. Then I proceeded to design the Information Architecture map.

Design Process

Requirement Gathering

The design process started with the requirement gathering phase. After designing the IA Map, the information needed to proceed was very clear.

Images were shared over Google Drive & email. Texts were compiled into Google Docs and shared over Google Drive.

Wireframes

Here, I started working on the individual pages in the website. I used Figma to create simple sketches of the structural makeup of the entire site for the both PC & Mobile versions.

Style Guide

After the key members of the executive team approved the wireframes, I chose the colors and font styles to ensure consistency across the pages.

After hours of research, I narrowed my options to “Roboto”, “Museo Sans” and “Radio Grotesk”. I decided to go with “Museo Sans”, as it was the perfect amount of professionalism without being boring, and it looked amazing with huge blocks of text – useful for blogs.

Visual Mockup

Here, the design has started coming together, Menu and header for each page were created. I also made it Tablet & Mobile responsive.

Few tradeoffs: There were few changes in the visual mockup from the wireframe because I found better alternatives through research and inspiration. An example is the Programs & Blog section, which added the text on the image, unlike the previous instance, where it was under the image.

Outcome

The website was positively accepted by the general public. A lot of users praised its simple and modern design. Visit https://jawwar.com

Solution & Metrics

Thanks to the News & Events portal (Blog) – The TLDS could easily disseminate information via official means. It also serves as a means of verifying accurate information regarding Jaw War.

Booking seats: The website helped solve one of the major issues when organizing large events – Seats. Users could book & reserve seats directly on the website, further increasing the website’s popularity.

Resource portal: The Resources portal was useful to past Jaw War attendees as they could re-experience amazing speeches & debates.

The Resources portal also greatly aided aspiring Jaw War speakers in preparing their speeches.

Website Launch

Challenges & Learnings

Extensive requirement gathering

After the initial requirement-gathering phase, several website contents were still sent, which meant many changes had to be made to wireframes to accommodate these new contents.

My takeaway from this is to have a more extensive requirement-gathering phase, and have at least the full outline for website content & pages, and then use lorem ipsum pending when the full content will be shared to avoid back and forth.

Intentional Friction

We made use of “Intentional Friction” to drive certain user behaviours. An example is disabling right click and copying on the website, so intending speakers wouldn’t easily copy entire speeches in the resources, but these speeches will be used as guides for writing new ones.

Design is never really done. But I’m impressed the website turned out as amazing as it did and the executives were able to achieve the objectives of the website development. See press mention on Premium Times.