Turning the Tide for Codebrew’s Website
TIMELINE
30th March - 4th April 2023
PLATFORM
Responsive Website
MY ROLE
Product Designer
Introduction
Codebrew is CISSA’s (Computing & Information Systems Students Association) annual flagship hackathon. Every year Codebrew is based of a different theme with different content and tracks. My team were tasked with redesigning the Codebrew website so that it would fit with this year’s theme of “Turning the Tide”.
My Role
My role on the team (CISSA’s Product Team) was to redesign the Hero, About, FAQ and Sponsors sections of the website. I was also involved in the ideation and reviewing stage of the overall website design.
Project Overview
Client: CISSA
Duration: 1 week
Target users: Hackers (Students) of all skill levels
The project was a website redesign of CISSA’s Codebrew 2023 website. The client wanted the website to have a consistent theme throughout the website as well be responsive on the mobile screen. This project was done in a short span of a week.
Purpose: To inform students of the key information of the Codebrew 2023 Hackathon and encourage them to sign up
Problem
Inconsistent design principles
Lack of consistent theme
Poor visibility and readability on mobile screens
Time constraint of a week
The website’s landing page before the redesigned didn’t even have the right graphic up
The legibility of text on the image was difficult to look at
The website’s FAQ, Sponsors and prizes didn’t have enough spacing between them which affected the legibility and grouping
Goal
Replace the current theme with the new theme for Codebrew 2023
By using the graphics provided and creating a colour palette and font styles that complement the content and brand of the website.
Attract more users to the event and website
By creating a layout that is easy to navigate and displaying the content in a way that is easy to understand. This would allow users to gain more information about the event hence leading to more sign ups
Design the mobile size version to be more visible and effective
By hiding excess redundant information as well as increase contrast and hierarchy. This is allows for increase visibility and accessibility to the website.
Analysis
After analyzing the current website our team noted down some elements to change and features to add to improve the website. This served as our checklist throughout the process.
Early Ideation
As the project was just a redesign, the content was already given to us so we just had to elevate the content and information using UI principles such as contrast, proximity and layout. There was no need for low-fidelity prototypes or wireframes so we went straight to editing the high fidelity prototype. We focused heavily on changing the layout so that it will be more readable on the responsive sizes of the website. Contrast was also emphasized upon in order to bring attention to the important information.
Early iteration of the Mobile Hero section
Early iteration of the Mobile About section
Early iteration of the Sponsors section
What is CodeBrew?
Why should I go?
Where is CodeBrew?
When is CodeBrew?
How much is a ticket?
What is the team size?
Who can attend?
Who runs CodeBrew?
What is the theme?
Will food be provided?
Frequently Asked Questions
Early iteration of the FAQ section
The early iterations were mostly about the layout of the website while still on the dark theme of the original website. The change in layout allowed the website to be more responsive especially the mobile site.
Final Designs
During the final stages, we decided that the dark theme background and images had too much going on which caused a lot of readability issues with the text. Therefore we decided to flip the colour palette to allow for a lighter tint of blue. Moreover we decided not place copy on top of images which also fixed the readability issues.
Final mobile Codebrew 2023 landing page
Final design of the mobile about section is a minimal and clean way of presenting information without a distracting image
Final FAQ section is less crowded and easier to access via drop down menus
Final design of the sponsors are laid out in a grid using the law of proximity to group them together
CTA at the bottom of the page to attract users to the hackathon
Future Steps
As a reflection to what went well during this project were:
Collaborating as a team smoothly and efficiently via comments and discussions
Managed to complete the redesign within a short time frame along side University assignments going on
The client was really impressed with the work done for this project
For future considerations on how to improve the design process of the team, would be to hold a early discussion before starting the project to allow a consistent design scheme early. This would eliminate wasting time on changing each designers’ individual style to a uniform design style such as spacing, button sizes and many more.
Credits
CISSA Product Team
Florence Tang
Wei Kai Khoo
Ellen Ho
Lyn Tran