Society of PC Building

Working with the Society of PC Building Club (SPCB) at the University of Florida (UF) to improve connection and communication within the UF PC enthusiast community

Role

UI/UX Designer

Timeline

Oct 2024 - Dec 2024

Team

Ankita Narayan

Lena Nguyen

Dayanita Kumar

Hana Checketts

Colin Mendoza

Tools

Figma

Skills

User Research

0→1 Prototyping

UI/UX Design

Web Design

The Society of PC Building (SPCB) at the University of Florida is an organization that is founded to serve as a community for students passionate about PC hardware, building, and technology. They focus on offering workshops, live demonstrations, and other events catered to both beginners and experts in order to help students learn, collaborate, and build custom rigs. Overall, SPCB works to foster an environment of innovation, teamwork, and technical growth by connecting students through their shared love for technology.

The main goal for SPCB was to increase their outreach and provide consistent information regarding all their events as a club at UF so as to not confuse their current and prospective members. Prior to designing the website, SPCB had their information spread across multiple platforms such as Discord and Instagram which meant that people could miss out on key information if they were not users of one such platform. Furthermore, their members are very diverse as they stem from the Univeristy of Florida community which is diverse itself. To accomodate the club members, a team consisting of a design section and developer section was formed to produce a website that would act as the collection of all the relevant and necessary information for new, current, and prospective members.

Overview

Problem

How might we design an inclusive website that fosters student connection through accessible and engaging resources?

Market Research

Through analyzing similar websites, we were able to find points of opportunities which we could use to enhance our own web design.

SPCB at the University of Central Florida

Stanford Women in Computer Science

Society of Hispanic Professinal Engineers at UF

Women in Computer Science and Engineering at UF

Bits of Good

  • Stengths: sleek and elegant tech branding

  • Weaknesses: projects page was wordy

  • Strengths: large logo in hero, many images of club events

  • Weaknesses: embedded calendar wasn't updated often and clashed with the branding of the website

  • Strengths: large logo in hero

  • Weaknesses: landing page is not clear if there is more than hero on first glance

  • Strengths: cohesive branding, harmonious and natural flow of information and designs, easy-to-read information which was not overwhelming

  • Weaknesses: projects listed could have a date to indicate recency of project

  • Strengths: blend of orange and blue color scheme was eye-catching details without being too overpowering or distracting, calendar was adaptive and interactive making for a seamless experience, resource page was segmented on their different users

  • Weaknesses: navigation bar was not concise making it confusing where to find materials and information

User Personas

SPCB Club Member

SPCB Club Admin

Despite catering specifically to the students at UF, SPCB has members from a diverse background. In order to create an inclusive environment for all SPCB members, we decided to segment the potential users based on their skill and interest level regarding PCs and technology. Furthermore, SPCB tasked us with designing a separate Admin view for SPCB E-Board members and officers so that they could edit events, projects, and other such details connected to the website. Based on these groupings, we came up with a series of user personas for current and potential club members as well as SPCB officers.

Ease of Use

Clear Organization of Events

Visualize Benefits of SPCB

Display Connection to Community

The main user base of the website is college students who are known to have a very packed and hectic schedule. To appeal to these users, we simplified the flow of the website. This allows for a more intuitive and straightforward experience that prioritizes the users' mental load and streamlines their information gathering and processing.

Benefits can look different for everyone based on their goals. Whether it be an inviting community or technical accomplishments, we wanted to highlight what students can get out of joining in order to increase member retention and engagement.

For busy students, scheduling events is a very important aspect of committing to a club. Therefore, we placed emphasis on creating a design that was enagaging and direct to decrease the confusion students may face when trying to coordinate multiple responsibilities.

SPCB boasts a welcoming atmosphere and community which we focused on promoting to students looking for people that share their interests. We wanted to emphasize that students have a society which they could enjoy themselves and learn more about what they love.

Solution

Website Outline

Based on our market research and user personas, we identified key principles and features we wanted to focus on during the creation of the website design.

Landing Page

About Page

Projects Page

Events Page

Admin View

  • Hero

  • Concise About section

  • Preview of various events hosted

  • Contact Us section

  • Mission Statement

  • Event photos

  • SPCB teams' details

  • SPCB Linktree

  • Current and past projects displayed

  • Details of each project including title and timeline

  • Dashboard

  • Project editing page

  • Event editing page

  • Team editing page

  • Calendar with monthly events

  • Past and upcoming events

  • Different tags based on type of event

Initial Designs

Landing Page

About Us Page

Admin View

After brainstorming, we came up with a dynamic and engaging layout that highlights the enthusiastic community of PC builders at UF and everything the club has to offer. Shown to the right are the designs that I personally worked on, but it is not inclusive of the entire web design which is featured in the final design. The focus of the main website's initial sketches was making the designs intuitive to the flow of the page, making it easy to navigate for current, new, and prospective members alike. We transferred these principles over to the Admin view as well so that their tasks could be conducted in an efficient manner.

A/B Testing

(Original design) We focused on the logo as the main highlight of the page to empahsize the club and their affiliation with UF. To enhance the tech branding of the page, we chose to incorporate interactive geometric shapes, namely triangles, which would then continue to be the theme throughout the rest of the pages. However, we did find the design to be a bit plain, so we tried different variations of this design. →

In order to include some details and highlight SPCB's accomplishments, we added gear call-to-action items. This design does not place as much emphasis on the logo as originally intended, but does create more of a balanced look to the page. We also changed the interactive elements from geometric shapes to gears for this iteration of the design.

As opposed to the second iteration of this design, this one focuses mainly on the logo which was the original intention. We did find that this does create more of an unbalanced look to the page, especially with fewer call-to-action items present on the page. During the final design process, we ended up placing the main focus on the logo, and redesigning the call-to-action items in a more clear and sleek manner.

Based on our initial designs, we identified potential challenges and corresponding solutions, allowing us to evaluate and compare options to determine which design best aligns with our goals and requirements.

(Original design) Featuring a card design, the first iteration of this design placed emphasis on the main officers and admins of SPCB. Placed underneath them were the rest of the teams along with their respective name and subdivision/position. However, we came to know that SPCB has an incredibly extensive list of teams that would look very cluttered and overwhelming in this format, not to mention the user would have to scroll for a long time just to see the next section. Due to this problem, we played around with different formats to minimize user effort while still displaying the accomplishments of the officers. →

When we established that the layout would have to be changed due to the volume of officers that were to be listed, we changed the design to incorporate more of a slideshow element while still maintaining the card design for displaying the individuals. In this way, each team would have its own deck with officers being highlighted within that deck. Originally, the client wanted the decks to be placed vertically in a rotating style. However, we determined that having horizontal and vertical scrolling within the same section might be difficult for the user to manage.

For the third iteration, we drew from elements of the second iteration, namely the card and slideshow layouts, but instead placed them horizontally to reduce the chance of accidental and frustrating clicks and scrolls from the user. In this way, the teams would each be displayed on an automatically scrolling slideshow and all individual officers would be shown as well.

Hero

About Page

Final Design

  • Clear Call-To-Action

  • Color Scheme: Use of UF blue and orange with blue and black being the main theme with orange being the accent color for a visually appealing contrast

  • Tech Branding: Vertical circuit lines to signal further scrolling and horizontal circuit lines to signal a division in sections

  • Gradients: Gradient card design for contrast against dark background

  • Varied Layout: Division between sections created through visual contrasts in styles

  • Geometric Footer: Modernized footer included on all pages to elevate the feel of the website

  • Teams Slideshow: Distinction between teams shown through alternating blue and orange highlights

  • Main Display: The most current project is displayed first for quick access to SPCB's achievements

  • Project Pop-Up: Past projects are displayed in a pop-up style to reduce the chain of links users have to click

  • Tabs: Project details are separated through different tabs to provide a streamlined yet thorough description of the projects along with a corresponding YouTube and Google Drive link

  • Filters: Users interested in a certain type of event can choose what they view on the calendar in order to find the information they are searching for efficiently

  • Color-coded: Types of events displayed on the calendar have unique colors to differentiate between them

  • At-a-glance view: The number of events per day/week can be judged by the calendar as a whole since multiple events can be displayed on one day

  • Detailed view: Events can be shown with more detail in a pop-up fashion when viewing the Calendar Section or in a card fashion when viewing the Upcoming Events section

  • Simplified layout: Very clear and no-frills design to create an efficient process for admins to edit website details

  • Tags: Built-in color-coded tags for event editing to easily distinguish various events on both the user and admin ends.

  • Navigation: Easy access to all editable categories without having a main dashboard to reduce clutter and confusing nesting properties

*Note: the Admin View does not contain the various pages to avoid repetitiveness

Landing Page

About Page

Projects Page

Events Page

Admin View

Full Website

If I Had More Time…

Reflections

Being able to design a website from scratch and having full creative liberty with my team for the first time was a very fresh and exciting experience! It was also my first time working with developers alongside the design team which opened my eyes a lot to the true process behind creating a website because it felt like we had a lot more freedom to be creative and think outside the box. We didn't feel as restrained as we would've if we had to use website-building platforms due to the design team's limited knowledge in coding.

Furthermore, being a part of such a diverse team where we didn't know each other much beforehand opened a lot of doors for me because it was really interesting to see the various perspectives and designs each one of us brought to the table based on just one prompt or idea. Seeing all of our ideas mesh and blend together was an incredibly rewarding experience.

In terms of the design, I felt that this project challenged me to think outside of the box, as in the past, I was only really exposed to design challenges that I had some knowledge or familiarity with. However, designing for SPCB felt like an unexplored world of design because I truly had no clue about anything related to PCs prior to taking on the project. After extensive research to understand our users' needs and wants, I learned how to create a user-centered design without having to be a part of SPCB or its target audience and how to overcome the difficulties that came with being unfamiliar with the subject. I believe that this experience has allowed me to grow as a designer, allowing me to expand my horizons and design for a more diverse community in the future.

Segment Information

Incorporate designs that allow for the organization of information into more manageable and accessible chunks based on target audience segmentation

Add Responsive Designs

Create a more accessible source of information for mobile users in order to increase reach as the target audience is college students who are often on their phone

Include Metrics

Collect metrics such as number of website visits and links accessed to measure the reach, accessibility, and effectiveness of the website for future modifications and inclusions