Portfolio About Resume Contact
projectimage
Challenge
To create a consistent style guide that can be used for Web design and Branding.
To design a website (UX case study) with the style guide in mind.
To implement the style guide in various branding materials.
My Role
Branding
UI/UX
Timeline
2017-2019
Introduction
Hack In The North is the annual student-held hackathon of Indian Institute of Information Technology Allahabad. It started of a small scaled event with just 2 sponsors in the first iteration.

Hack In The North grew exponentially and the third iteration of Hack In The North had 42 sponsors. As a result, we had to expand every division of the team, including the design team. The price of such an expansion was that the designs started lacking consistency (the colors and fonts used) as it was no longer just myself on the design team.

To improve the consistency of the designs and to give a clear brand image to Hack In The North, i designed the below style guide.
Style Guide
Website - UX Case Study
The website (www.hackinthenorth.com) is our main webpage. The webpage needed to contain everything important related to the event.
Market Research
I began by analysing websites of successful doemestic and international hackathons. (HackMIT, InOut, PenApps etc.) marketreseacrch

Conclusion : Almost all the websites convey the same type of information : Location, Date, Sponsorship, FAQs. Some websites had very poor information architecture and it was hard to find out certain important information about the hackathon.
User Personas
userpersona

Ideating

To find out what the website was missing and what the participants were still stuggling to find, we analysed two years worth of data from our Facebook messages and emails.
After talking with the team on what information was mandatory on the website and considering all the basic needs of the students (What is the event? When is the event? Registration), the additional questions they sent us over messages and emails, and all the basic needs of the sponsors, i decided to prioritize the needs to help with the information architecture of the website.
Finally, once i sketched out the rough information architecture of the website, i proceeded to sketch out the Wireframes.

Lo-Fi Wireframes

Hi-Fi Wireframes


The website is now live
Conclusion
After using the style guide, the designs had a consistency that was not observed previously. There was a clear design language established for the designers/juniors who had to take up my role after my time with the hackathon is over. It was a great experience to see my designs come to life and seeing people interact with them realtime.

Adogt App Stide App Washr App Hack In The North UI Collection