Triton Software Engineering
Redesigning to enhance clarity, engagement, and usability for students & nonprofits.
PROJECT TYPE
Client Project
ROLE
UI/UX Designer
TIMELINE
January - June 2024
TEAM
2 Designers
1 Project Manager
Project Context
Design
After gathering user research findings and narrowing down on pain points, goals and wants, this led us into creating low fidelity wireframes. The goal was to keep it simple and prioritize visual hierarchy as it was important all important information was organized. I was primarily involved with designing the Students and Nonprofits page, ensuring all information was discoverable.
Low-fidelity
High-fidelity
After conducting user testing and receiving feedback, we translated that into high-fidelity designs. I incorporated a call to action button on the nonprofits page to help nonprofits easily reach out to TSE for potential projects. Additionally, users liked having a dropdown menu for frequently asked questions so the page would not be overloaded with information. We prototyped responsive high fidelity designs for desktop, tablet, and mobile.
Students Page
Our Approach Page
Nonprofits Page
Main pages with large CTA
Large home page with brief description
Contact Buttons
Values
Pros for Nonprofits
Projects Page
Reflection
This was my client project and it challenged me to balance creativity with constraints while ensuring our solutions were both impactful and feasible.
One challenge was navigating creative limitations, as the client wanted to retain certain pages, like the About page, in their original form. This required strategic decision-making to optimize the experience within set boundaries. Additionally, technical constraints limited some design improvements, reinforcing the need to collaborate closely with developers to ensure feasibility.
To address these, we maintained constant communication and weekly check-ins with the client, aligning our design decisions with their vision. I learned to utilize data-driven insights to explain changes while respecting constraints. It was a valuable learning experience in stakeholder management, problem-solving, and delivering meaningful design solutions.
What is Triton Software Engineering?
Triton Software Engineering (TSE) is a student-led organization at UC San Diego that designs and develops digital solutions for nonprofit organizations. TSE connects students with real-world projects, helping them gain technical skills while making a positive social impact in the community.
As a UX Designer, I collaborated with a team to redesign the website for Triton Software Engineering, a student-led organization at UC San Diego. TSE approached us to improve their website's flow, navigation, and overall user experience. Our goal was to create a more cohesive and engaging site that effectively communicated TSE’s mission, showcased past projects, and provided clear information for students and nonprofits interested in joining or collaborating. The redesign focused on four key pages: Our Approach, Projects, For Students, and For Nonprofits.
Problem
TSE’s existing website faced several issues:
Information presented was vague and did not clearly convey the organization's purpose or value.
Visual design was outdated and unappealing, making it difficult for users to engage with the content.
Website’s layout was disorganized, with messy recruitment information and an unclear structure for showcasing past projects.
“How might we clearly communicate Triton Software Engineering’s mission, engage users with organized and visually appealing content, and streamline navigation for students and nonprofits interested in collaborating?”
Solution
Redesign the Triton Software Engineering website to enhance its usability, structure, and visual appeal by:
Clarifying TSE's Mission: Create dedicated sections that clearly articulate the organization’s purpose, goals, and impact.
Showcasing Past Projects: Design an intuitive and visually engaging portfolio to highlight successful collaborations, inspiring confidence in potential partners.
Streamlining Navigation: Implement a logical layout with distinct pathways for students and nonprofits, providing tailored, easily accessible information.
Refreshing Visual Design: Incorporate cohesive branding and design elements to make the website inviting and professional.
This redesign will create a more intuitive and impactful experience, empowering TSE to effectively communicate its value and attract collaborators.
Process
The redesign followed an iterative process, involving continuous cycles of user research, design, client check-ins, testing, and feedback.
Research
Website audit on TSE’s current website. I focused on the “For Students” and “For Nonprofits” page.
“For Students” Page
“For Nonprofits” Page
Materials from Client
We gathered materials provided by our client to understand their style guide and what they wanted to be kept the same.
Competitive Analysis
I looked at other websites with a similar mission and conducted competitive analysis noting what worked well. We looked at two large organizations at UCSD:
CS For Each
2. Association For Computing Machinery
Feasibility Vs Functionality
From our competitive analysis, I identified potential features for our site. We created a chart to look at feasibility versus functionality, prioritizing features that were most impactful and realistic to implement.
User Interviews
To better understand users' needs, 10 interviews were conducted to identify exactly what they wanted to change and which features they found effective. This feedback provided valuable insights for refining each page and prioritizing improvements. These interviews also highlight areas needing further research and development before progressing to higher fidelity designs.
A few insights:
8/10 interviewees found the website to be dense with information and text-heavy.
6/10 interviewees wanted more detailed information about roles on the "Our Approach" page, suggesting brief descriptions before expanding dropdowns.
9/10 interviewees found navigation relatively simple, but the information was unappealing to read.
8/10 interviewees thought the website could be more visually stimulating with additional photos and varied visuals.
4/10 interviewees found the Nonprofits page confusing and wanted more features, such as a contact form and clearer communication.
Key Overall Feedback:
The website feels “dense” and “uninviting” due to excessive text and limited visuals.
Users were unclear about available student roles, requiring effort to explore dropdown menus for details.
The user interface and design could be more engaging, with clearer navigation and improved aesthetics.
Who are our users?
I consolidated our research into two user personas:
User Flow
We developed a user flow to better understand how the landing page fits within the overall structure of the TSE website. This flow outlines the inputs and outputs, providing clarity on its role in the user journey.
Ideation
Design System
Given the number of pages and responsive designs, maintaining consistency was crucial. We streamlined the process by organizing all colors, fonts, and sizes in Figma, making it efficient to implement them into our high-fidelity designs.
