2023 Hacklytics Site | UI/UX Designer

2023 Hacklytics Site | UI/UX Designer

2023 Hacklytics Site | UI/UX Designer

Hacklytics 2023: A Starry Night ✨

Main Skills: Figma, Wireframing, Prototyping, Cross-functional collaboration

Hacklytics 2023: A Starry Night ✨

Main Skills: Figma, Wireframing, Prototyping, Cross-functional collaboration

Hacklytics 2023: A Starry Night ✨

Main Skills: Figma, Wireframing, Prototyping, Cross-functional collaboration

Background

Background

Background

Hacklytics is a hackathon hosted by Data Science GT that occurs annually. The theme of the 2023 iteration of the hackathon was "A Starry Night".
Using Van Gogh’s painting as inspiration, I was tasked with designing the site and developing high fidelity wire frames to flesh out the site and give the developers a blueprint that they could use to build the site.
Hacklytics is a hackathon hosted by Data Science GT that occurs annually. The theme of the 2023 iteration of the hackathon was "A Starry Night".
Using Van Gogh’s painting as inspiration, I was tasked with designing the site and developing high fidelity wire frames to flesh out the site and give the developers a blueprint that they could use to build the site.
Hacklytics is a hackathon hosted by Data Science GT that occurs annually. The theme of the 2023 iteration of the hackathon was "A Starry Night".
Using Van Gogh’s painting as inspiration, I was tasked with designing the site and developing high fidelity wire frames to flesh out the site and give the developers a blueprint that they could use to build the site.

The Challenge

The Challenge

The Challenge

While the site did have some initial designs, I really only had a mood board to go off of, and no designers to work with, as many were busy with their summer plans.

I also had to create a high fidelity prototype within 3 days, as Data Science GT needed the site to be approved by MLH, the governing body for all hackathons in the United States, in order to publish it.

While the site did have some initial designs, I really only had a mood board to go off of, and no designers to work with, as many were busy with their summer plans.

I also had to create a high fidelity prototype within 3 days, as Data Science GT needed the site to be approved by MLH, the governing body for all hackathons in the United States, in order to publish it.

While the site did have some initial designs, I really only had a mood board to go off of, and no designers to work with, as many were busy with their summer plans.

I also had to create a high fidelity prototype within 3 days, as Data Science GT needed the site to be approved by MLH, the governing body for all hackathons in the United States, in order to publish it.

The Final Product

The Final Product

The Final Product

Below is a link to both the final prototype as well as the live site!

Below is a link to both the final prototype as well as the live site!

Below is a link to the final site. View this website on desktop or tablet to view the prototype as well.

Live Site

Brainstorming

The theme that was given to me at the start of this project was “A Starry Night”, which is based on the famous painting by Vincent Van Gogh. Since the painting has served as a source of inspiration for so many artists, it has been interpreted by hundreds, if not more. Because of this there was a plethora of sources of inpiration posted on sites like Dribbble and Behance for me to base the site off of.

The obvious direction that I could’ve taken the visual design of the site in would’ve been to mimic the painting itself, using swirling, oil-paint like illustrations. But I decided to opt out of taking that route for a multitude of reasons:

  • The project needed to be completed on a short time span, so taking the time to develop original illustrations, or obtain permission from artists whose illustrations I admired would’ve consumed too much time.

  • Many other hackathons like HackMIT and HackGT used a similar theme, so I wanted to stray away from it to make the Hacklytics site stand out

Using my ideas from brainstorming, I began fleshing out the details of the project.

Below is the only prior work I had to go off of

Site Layout

Since I also do web development, and I was working very closely with the dev team, I thought about what it would take to implement my design through code while I was creating them.
The dev team used React.js for the frontend, so I thought about how my site would translate into components.
I also thought about how the elements would be arranged, and how difficult it would be to make the positioning of certain objects responsive, so I took into account the use of flexbox or Bootstraps grid system.

Site Iteration and Improvement

Since I was working under an executive board, I took their input to heart as I edited the design. Unfortunately, my figma file was a living document, so I don’t have the drafts and records of these changes, but I did go through multiple iterations of the site. This included tweaking colors to make it less harsh on the eyes, or changing the layout of pages to make it more readable. I even asked my friends to use the wireframes so I had a small sample of user feedback.
The live site shows the current implementation of the design, and as you can see, some things were changed due to our time constraints, and I’ve used those changes to inform my future designs so the handoff to the dev team (or myself) would be seamless in the future.

Interested in having a conversation?

Schedule a call with me!

I hope you have an awesome day!

Interested in having a conversation?

Schedule a call with me!

I hope you have an awesome day!