Project Summary
Team: Berkeley Innovative Design
Timeline: 3 months
Skills
UI/UX Design
Frontend Engineering
Prototyping
Tools
Figma
React
My Role
As a member of a four-person web development and design team, I played a dual role as both a UX Designer and Front-End Developer. My primary focus was on the UX design, including information architecture, wireframing, prototyping in Figma, and contributing to the overall user experience. I also translated the designs into functional components using React for the front-end development of the website
Berkeley Legends
Background
The UC Berkeley League of Legends Club sought to create a centralized online hub for potential members and current players. Previously, information regarding events, team rosters, and meeting times was scattered across various platforms, hindering accessibility and engagement. This project aimed to design and develop a comprehensive website to streamline communication and foster a stronger club community. The target audience was UC Berkeley students interested in joining or participating in the League of Legends Club.
Process
Impact and Results
Discovery & Brainstorming
Given the absence of a pre-existing website, we began with extensive brainstorming sessions to define the site's core functionalities and content requirements. We prioritized information that would be most valuable to prospective and current members, such as event calendars, team rosters, and contact information. We worked closely with the project managers to understand the club's goals and vision, ensuring the website aligned with their objectives
The launch of the UC Berkeley League of Legends Club website resulted in a noticeable increase in club applicants and a significant improvement in user satisfaction. Members expressed appreciation for the centralized platform, which made it easier to access information and engage with the club.
The website became a valuable resource for the club, facilitating communication and fostering a stronger sense of community among members.
While we did not track specific metrics, the positive feedback and increased engagement indicated the website's success in achieving its goals.
Information Architecture & Wireframing
I focused on creating a clear and intuitive information architecture, organizing content logically to facilitate easy navigation. I developed low-fidelity wireframes in Figma to visualize the website's structure and layout.
We went through many iterations of the wireframes, as we tried to determine the best way to display the information that was most useful to our users.
Prototyping & Visual Design
Building upon the wireframes, I created high-fidelity prototypes in Figma, focusing on visual design elements that reflected the League of Legends aesthetic while maintaining a clean and user-friendly interface.
We wanted the website to be visually engaging and reflect the excitement of the League of Legends community.
Front-End Development (Focus on Design Implementation)
While I also contributed to the front-end development using React, my primary focus in this context was ensuring the design vision was accurately translated into a functional website. This included implementing responsive layouts, interactive elements, and ensuring visual consistency across all pages.
I used my developing front end skills to make sure the design was functional, and that the website was easy to use.