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
