Client Work

Client Work

Triton Consulting

Group

Triton Consulting

Group


A complete redesign of Triton Consulting Group’s (TCG) website, a leading student consulting organization at the University of California, San Diego, known for its consulting services ranging from startups to larger firms.


A complete redesign of Triton Consulting Group’s (TCG) website, a leading student consulting organization at the University of California, San Diego, known for its consulting services ranging from startups to larger firms.

Timeline: 4 Months

Role: UX Designer, Web Designer

Team: Marilyn Hoang, Meslissa Phan, Rawan Ghazouli, Aaron Moon, Alex Trinh

The Problem

With the ever expanding organization growing each year and a large portfolio showcasing over 100 successful client engagements, TCG continues to strengthen its reputation and impact.

With the ever expanding organization growing each year and a large portfolio showcasing over 100 successful client engagements, TCG continues to strengthen its reputation and impact.

Some goals set by us and the client
  1. Redesign the website with Framer to enhance information hierarchy and accessibility for potential clients and applicants.

  2. Develop a style guide to improve consistency in their branding materials across their platforms.

  1. Redesign the website with Framer to enhance information hierarchy and accessibility for potential clients and applicants.

  2. Develop a style guide to improve consistency in their branding materials across their platforms.

The Research

Understanding our user and their problems

Understanding our user and their problems

To understand the overall user experiences navigating the current Triton Consulting Group’s website, pain points, and motivation for viewing the website, we conducted user surveys and collected 28 responses.


To understand the overall user experiences navigating the current Triton Consulting Group’s website, pain points, and motivation for viewing the website, we conducted user surveys and collected 28 responses.


Results indicated that 69.6% of users visited the website in order to gain more information about the TCG, alongside 47.8% of users who were interested in joining.

While the majority of users found the information to be relevant to the website, 46.4% of users found that the clarity and organization of this information was average. Furthermore, when considering the visual experience of the current website, results showed that 57.1% of users found the website to be visually average, while the majority of them were unlikely to share the website with their peers.

Based on these results, we then identified three major pain points:

Information organization

We reorganized content to reduce inconsistencies, balance information across pages, and create a smoother, more cohesive experience.

Branding and overall styling

We updated colors and visual styling to better reflect TCG’s professional identity and strengthen their overall brand presence.

Lack of call to action

We introduced clear calls to action for prospects and clients, making next steps easier and more intuitive to follow.

Persona

Who are talking about?

Who are talking about?

From the findings from our user surveys, we defined our audience through two user personas: a TCG applicant and client. Each user persona details their core needs and pain points.

From the findings from our user surveys, we defined our audience through two user personas: a TCG applicant and client. Each user persona details their core needs and pain points.

Competitive Analysis

What makes the best, the best?

What makes the best, the best?

In order to gather insight on how to tackle the issue of how other similar organizations have their websites, we conducted a competitive analysis to gain insight into the existing websites, ranging from other consulting groups to more university organizations.

Paris Baguette's Location Page
Overview

Categorize the best qualities

Categorize the best qualities

The findings from our competitive analysis highlighted the importance of a simplified navbar and condensed information for an effective website.

Simplifed

A common trend among these sites is the use of a simplified navbar with fewer buttons, allowing users to navigate across pages with little action needed.

Condensed infomation

Ensuring a condensed information style, with all content on a single page rather than spread across several pages.

Site Architecture

Ensuring usability is simple.

Ensuring usability is simple.

We restructured the information architecture to make navigation more intuitive by analyzing the relationship between different pieces of content and visualizing how they would be displayed across the site. Our goal was to streamline the experience by reducing the number of pages and consolidating related content into cohesive sections.


To inform our approach, we conducted a competitive analysis, examining the layout and architecture of similar websites. This research revealed a result, we decided to combine these elements into a single, comprehensive About Us page, ensuring that visitors can easily access all relevant information in one place.

We restructured the information architecture to make navigation more intuitive by analyzing the relationship between different pieces of content and visualizing how they would be displayed across the site. Our goal was to streamline the experience by reducing the number of pages and consolidating related content into cohesive sections.


To inform our approach, we conducted a competitive analysis, examining the layout and architecture of similar websites. This research revealed a result, we decided to combine these elements into a single, comprehensive About Us page, ensuring that visitors can easily access all relevant information in one place.

Design - Style Guide

Where to start?

Where to start?

Our goals were based on the needs assessment and competitive analysis, mainly focusing on tackling Triton Consulting Group’s rebranding to display a strong visualization of their message and to ensure it was quick and accessible for both user types to find any information they were looking for.

Color Palette

Color Palette

At the start of the redesign, stakeholders asked us to keep the blue-and-white palette. We made small refinements by lightening the blue, softening the white, and adding subtle gradients to elevate the overall UI.

Typography

Typography

Using a serif font such as PT Serif - Bold for our headers and keeping a professional business feel, fitting of the overall aesthetic of a consulting organization’s website.


As for the smaller sub headers and body texts, we went with DM Sans, a Sans-serif font, since its sleeker look has better readability for larger blocks of information.

Logo

Logo

To maintain consistency throughout the entire website, our stakeholder revised the font of their old logo to follow the style guide we developed. Though a minor change, the impact is drastic, as the users can gain a sense of professionalism and formality through the Serif typeface.

To maintain consistency throughout the entire website, our stakeholder revised the font of their old logo to follow the style guide we developed. Though a minor change, the impact is drastic, as the users can gain a sense of professionalism and formality through the Serif typeface.

Design - Lo-Fi

Wireframes! Wireframes! Wireframes!

Wireframes! Wireframes! Wireframes!

Our team created many different lo-fi wireframes to quickly explore the website layout, navigation, and content structure before moving on to higher fidelity designs.

Our team created many different lo-fi wireframes to quickly explore the website layout, navigation, and content structure before moving on to higher fidelity designs.

With the feedback we received from our stakeholders and mentor on the Lo-fis, we moved forward to implementing them into our second iterations. Here, we focused on combining the components that the stakeholders approved of and applying the elements of the style guide to create a more refined prototype.

With the feedback we received from our stakeholders and mentor on the Lo-fis, we moved forward to implementing them into our second iterations. Here, we focused on combining the components that the stakeholders approved of and applying the elements of the style guide to create a more refined prototype.

Design - Challenges

Portfolio page

Using feedback from our stakeholders and mentor on the lofi designs, we moved into a second iteration. We combined the approved components and applied our style guide to create a more polished and refined prototype.

Using feedback from our stakeholders and mentor on the lofi designs, we moved into a second iteration. We combined the approved components and applied our style guide to create a more polished and refined prototype.

Recruitment Page

Since potential new members were a key audience, the recruitment page was one of the most important screens. However, it lacked consistent branding and offered no clear calls to action for users interested in joining.

Since potential new members were a key audience, the recruitment page was one of the most important screens. However, it lacked consistent branding and offered no clear calls to action for users interested in joining.

Portfolio page

The old Career Page featured a large table listing the names of each of their old alumnus, the companies they work for, the work dates, positions, and more. It was extremely information heavy and formatted in a dull, unengaging way. The career page called for a complete overhaul that made it easier for users to read through.

The old Career Page featured a large table listing the names of each of their old alumnus, the companies they work for, the work dates, positions, and more. It was extremely information heavy and formatted in a dull, unengaging way. The career page called for a complete overhaul that made it easier for users to read through.

Design - Final Product

Completed Project

Completed Project

The Conclusion

Reflection and Future Goals

Reflection and Future Goals

With more time, I would expand the Portfolio page with deeper case studies, finish planned animations, and add alumni stories to make the Career page more personal. This project taught me the importance of clear communication, regular feedback, and balancing strong visuals with an intuitive, user-friendly experience.

With more time, I would expand the Portfolio page with deeper case studies, finish planned animations, and add alumni stories to make the Career page more personal. This project taught me the importance of clear communication, regular feedback, and balancing strong visuals with an intuitive, user-friendly experience.

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30