Roto

In this case study, I improved my UI and UX design skills by redesigning the website for Roto Club, a place known for its lively and inclusive events. Using Figma and lessons from the Udemy course "UI Design Bootcamp: Master Typography, Color & Grids," I aimed to make an online presence that shows off Roto Club's unique vibe. This project helped me learn more about UX and design, leading to a website that truly represents the club and keeps users interested.

‍

Defining the Problem, Goal, and Action

‍

Problem:

Roto only uses Instagram to promote their events. They lack online presence and engagement. Buying tickets is confusing and redirected to another page.

Goal:

My goal was to create a dedicated website for Roto Club that enhances their online presence and engagement. The website should effectively capture Roto's vibrant and inclusive brand, provide a central hub for event information, and simplify the ticket-buying process to make it seamless and user-friendly.

Action: ‍

I wanted to enhance Roto's visibility and user engagement by centralizing event information, simplifying ticket purchases, and reflecting their vibrant, inclusive brand through unique design and interactive storytelling. By implementing intuitive navigation, vibrant visuals, and responsive features, the website aimed to foster greater user interaction and community engagement.

‍

‍

The Design Process

‍

‍

Brand analysis, requirements 

‍

‍

‍

To define Roto Club's brand identity, I initiated a brainstorming session where the client listed adjectives summarizing their brand.

‍

‍

Through discussion and refinement, we narrowed down to five key adjectives that best represent the club's personality. With these adjectives in mind, I proceeded to select colors and typography that would align with their brand essence.

‍

‍

‍

‍

‍

Additionally, I utilized the Bull's eye diagram method during meetings to understand the client's website needs. Using a collaborative Miro template, we prioritized essential features, identified important but non-essential elements, and noted nice-to-have features. This approach ensured a clear plan was developed, integrating both client requirements and my professional insights to align the website design with Roto Club's objectives.

‍

‍Competitor analysis

For insights into effective club website design, I conducted desk research focusing on similar venues. Inspiration was drawn particularly from Spook Club (https://spook-club.com/), which served as a primary model. Additionally, I analyzed other club websites like https://umbracleterraza.com/ and https://akuarelaplaya.es/web/inicio/ to gather ideas on essential features and functionalities necessary for a club's online presence. These analyses provided valuable benchmarks and insights into industry standards, helping to inform decisions and enhance the design direction for Roto Club's new website.

‍

‍

User persona

To ensure the design meets the needs of Roto Club's diverse audience, I developed detailed user personas representing typical users of the website.

‍

Low-fi

I started with low-fi wireframes to outline the website's structure and layout without detailed visuals. These wireframes provided a basic visual framework to gather feedback and ensure alignment with the client's vision.

‍

Hi-fi

Based on feedback from the low-fi wireframes, I created hi-fi wireframes incorporating detailed visuals, colors, and branding elements.

‍

Testing and adjustments 

Using Figma, I developed interactive prototypes to simulate the user experience and gather feedback from the client and potential users. This phase involved: Creating clickable prototypes to demonstrate the website's functionality, Conducting usability testing sessions to identify any issues and gather insights on user interactions,Iterating on the design based on feedback to improve usability and alignment with user expectations.

‍

‍

Summary

This project for Roto Club allowed me to apply and expand my UX/UI skills comprehensively. From initial client discussions and brand analysis to creating wireframes and high-fidelity designs, each step deepened my understanding of effective design principles. Through the "UI Design Bootcamp" course and hands-on practice, I gained confidence and proficiency in tools like Figma, readying me for future design challenges. The final design successfully captures Roto Club's energetic and inclusive spirit, providing an engaging and functional online presence for their diverse audience.