Email:

arudakova.des@gmail.com

Email:

arudakova.des@gmail.com

arudakova.des@gmail.com

FLUI Website and Brand Design

FLUI Website and Brand Design

FLUI Website and Brand Design

Internal President.
Leading a Team of 13 designers

Internal President.
Leading a Team of 13 designers

Internal President.
Leading a Team of 13 designers

Client

Client

FLUI Hackathon

What I did:

What I did:

UX Research, UI, Branding, Team Management

Scope:

Scope:

2 m Hiring

3m Brand Design

4m Site Design

2 m Hiring

3m Brand Design

4m Site Design

2 m Hiring

3m Brand Design

4m Site Design

(20 SECOND OVERVIEW)

(20 SECOND OVERVIEW)

(20 SECOND OVERVIEW)

FLUI Hackathon is a student-led UI Design Competition, with over 168 participants, 12 judges, and 42 mentors.

As the Internal President, I recruited and lead a design team consisting of 13 designers, collaborating on UX, Branding, Merchandise and Website design tasks.

Poster Design

Poster Design

Seeing all the participants come together to design made FLUI the most rewarding project of my career thus far!

Event Highlights :)

Event Highlights :)

After months of revisions and stakeholder reviews, a brand-new branding is instilled in the FLUI website for participants to see! 🎉

2024 vs 2025 Website

2024 vs 2025 Website

Light mode logo

Light mode logo

Dark mode logo

Dark mode logo

  • Full Process /

    5 minute read

  • Full Process /

    5 minute read

  • Full Process /

    5 minute read

  • Full Process /

    5 minute read

  • Full Process /

    5 minute read

  • Full Process /

    5 minute read

  • Full Process /

    5 minute read

  • Full Process /

    5 minute read

  • Full Process /

    5 minute read

  • Full Process /

    5 minute read

  • Full Process /

    5 minute read

  • Full Process /

    5 minute read

(MY GOAL)

(MY GOAL)

(MY GOAL)

Creating an enticing hackathon meant that every detail mattered.

Older FLUI branding felt dull and corporate. I wanted FLUI to allude a sense of joy, creativity, and serve as a place that welcomes innovation.

(RESEARCH TIME)

(RESEARCH TIME)

(RESEARCH TIME)

We thoroughly analyzed other design competitions, conducted interviews with past participants and highlighted two key desires:

  • The branding for a design competition should feel inviting and playful, especially to set FLUI apart from code-based hackathons.

  • The website must prioritize easy and accessible navigation to event details, workshop descriptions, and timing.

(WEB ANALYTICS)

(WEB ANALYTICS)

(WEB ANALYTICS)

Google Analytics was used to understand how users were navigating through the website, and what pages interested them most. Upon the redesign (and hard work of our branding team) we were able to increase the site's engagement by 59.7%.

2024 Analytics

2024 Analytics

2025 Analytics

2025 Analytics

Upon analysis, top page sections “What/When/How” and “Timeline” stood out, indicating users interest in seeking information about the hackathon logistics.

In contrast, “Meet the Team” and “FAQ” sections saw lower levels of user interaction. This meant a priority must be placed to highlight hackathon's logistics content in an accessible, easy to browse manner; aligning with the interests and needs of our primary users - student participants.

In contrast, “Meet the Team” and “FAQ” sections saw lower levels of user interaction.

This meant a priority must be placed to highlight hackathon's logistics content in an accessible, easy to browse manner; aligning with the interests and needs of our primary users - student participants.

(WIREFRAMING)

(WIREFRAMING)

(WIREFRAMING)

Scroll to view wireframe


Bringing the essential event information to the forefront, our wireframe highlighted:

Eligibility criteria and format, along with dates and location.

Bringing the essential event information to the forefront, our wireframe highlighted:

Eligibility criteria and format, along with dates and location.

(BRANDING IDEATION)

(BRANDING IDEATION)

(BRANDING IDEATION)

Coming up with our new brand was far from glamorous! It was messy, but so fun.

Originally, I sketched the mascot for our new logo on a piece of napkin. Bringing it to the team, we all agreed that giving a face to our hackathon will make the brand more memorable. Associating FLUI with a a friendly, playful atmosphere.

Originally, I sketched the mascot for our new logo on a piece of napkin. Bringing it to the team, we all agreed that giving a face to our hackathon will make the brand more memorable. Associating FLUI with a a friendly, playful atmosphere.
Originally, I sketched the mascot for our new logo on a piece of napkin. Bringing it to the team, we all agreed that giving a face to our hackathon will make the brand more memorable. Associating FLUI with a a friendly, playful atmosphere.

Initial Sketches of FLUI's Logo

Initial Sketches of FLUI's Logo

Initial Sketches of FLUI's Logo

Then, the sketch was ideated on by mixing in LED-like elements, neon colours and even a custom font made of little ellipses.

Light mode logo

Light mode logo

Light mode logo

Dark mode logo

Dark mode logo

Dark mode logo

Playful Colour Palette

Playful Colour Palette

Playful Colour Palette

Branding Patterns

Branding Patterns

Branding Patterns

Typography (+Custom made font)

Typography (+Custom made font)

Typography (+Custom made font)

(WEBSITE: BUILD. TEST. REPEAT)

(WEBSITE: BUILD. TEST. REPEAT)

(WEBSITE: BUILD. TEST. REPEAT)

From early wireframes to high-fidelity screens, we brought users in at every step. We ran 3 rounds of user testing as we developed the site prior to the hackathon launch.

Feedback Gathering

Feedback Gathering

Feedback Gathering

(HIGH-FIDELITY SITE)

(HIGH-FIDELITY SITE)

(HIGH-FIDELITY SITE)

During the final stretch, I delivered user insights to the developer on a weekly, sometimes even daily basis. I communicated usability features in order of importance. Emphasis was always given to accessibility concerns.

The Event Details page is now directly accessible from the site.

It includes information about workshops, resource links, and the event schedule!

Based on interviews, our site is viewed from a mobile device 80% of the time.

Keeping that in mind, our landing page ensured to clearly highlight the event countdown, description and statistics.

Thus, our landing page ensured to highlight the event countdown, description and statistics.

Website Preview

Website Preview

(KPIs + BEYOND)

(KPIs + BEYOND)

(KPIs + BEYOND)

In measurable terms, we increased the site's engagement by 59.7% with the rebrand, and site re-build.

In measurable terms, we increased the site's engagement by 59.7% with the rebrand, and site re-build.

In measurable terms, we increased the site's engagement by 59.7% with the rebrand, and site re-build.

2024 Analytics

2024 Analytics

2025 Analytics

2025 Analytics

Beyond the digital KPIs, we brought together a total of:

160 STUDENT PARTICIPANTS

Beyond the KPIs, we brought together a total of:


160 STUDENT PARTICIPANTS

… who all left with lots of learnings, friendships, and amazing memories!

who all left with lots of learnings, friendships, and amazing memories!

Check-in

Check-in

Check-in

Bingo Cards

Bingo Cards

Bingo Cards

Judges Panel

Judges Panel

Judges Panel

Workshop Hosts

Workshop Hosts

Workshop Hosts

Merch!

Merch!

Merch!

Presidents Speech

Presidents Speech

Presidents Speech

Winners

Winners

Winners

Org Team!

Org Team!

Org Team!

Thanks for reading:)

Thanks for reading:)

Available for freelance

Back to top

Back to top

Let's create
UX with personality.

And strategy too :)

Angelina Rudakova

Experience and Product Designer

Icon of X social network
Icon of instagram social network
Icon of dribbble website

I'm a yapper. Reach out to me at:

arudakova.des@gmail.com

I am grateful to live and design on the unceded traditional territories of the xʷməθkʷəy̓əm (Musqueam), Sḵwx̱wú7mesh (Squamish), and səlilwətaɬ (Tsleil-Waututh) Nations.

Available for freelance

Back to top

Back to top

Let's create
UX with personality.

And strategy too :)

Angelina Rudakova

Experience and Product Designer

Icon of X social network
Icon of instagram social network
Icon of dribbble website

arudakova.des@gmail.com

I am grateful to live and design on the unceded traditional territories of the xʷməθkʷəy̓əm (Musqueam), Sḵwx̱wú7mesh (Squamish), and səlilwətaɬ (Tsleil-Waututh) Nations.

Available for freelance

Back to top

Back to top

Let's create
UX with personality.

And strategy too :)

Angelina Rudakova

Experience and Product Designer

Icon of X social network
Icon of instagram social network
Icon of dribbble website

I'm a yapper. Reach out to me at:

arudakova.des@gmail.com

I am grateful to live and design on the unceded traditional territories of the xʷməθkʷəy̓əm (Musqueam), Sḵwx̱wú7mesh (Squamish), and səlilwətaɬ (Tsleil-Waututh) Nations.