WEBSITE DESIGN, BRANDING
Figma, Adobe Illustrator
UX Designer + Visual Designer
Websites, today, are expected to be useful, usable, and desirable in terms of content, experience, and aesthetics. The Society of Asian Scientists and Engineers at UC San Diego (SASE at UCSD) is an pre-professional organization whose website does not meet the current website standards to draw in meaningful engagement with members.
Over three months, I worked with two teammates to redesign the SASE website, focusing on cohesive branding and relevant content for potential users.
You can view the final design here ↗
SASE’s primary goal aims to prepare members for their professional careers by providing various forms of support. This includes hosting not only professional development events but also social events to provide a well-rounded org experience. Though SASE provides many opportunities for general members, not a lot of that information can be found on their website.
My team and I met up with our client, the president of SASE, to discuss how to mitigate this issue and goals of the redesign. The client acknowledged the outdatedness of the site and desire for an updated look. She wanted a site that would help members fulfill their social and professional needs. In order to make sure we were on the same page as our client, we met up to present our progress.
We wanted to get more information of the organization from members and non-members so that we can create a site authentic to SASE’s values. Part of our research included having users perform various tasks on the mobile site. Here is the full research brief ↗
Our interviews involved asking participants about their experiences in SASE and then having them complete user tasks on the current SASE website. The interview questions ranged from their reasons for involvement in SASE to what they hoped to get out of/give to SASE. Based on our research, we found:
Our website walkthrough showed us that there were many difficulties with user tasks such as finding specific information on the org, events, and more. Mobile-unfriendliness was a huge part of the struggle.
There are many problems to address when looking at the SASE site. After discussing our research findings together with the client, we decided to focus on content to our potential users as well as updating the visual aesthetics to match the org’s branding on campus.
From our interviews, we created a few personas to highlight the main goals of our interviewees. Based on our research, we decided the main user to focus on would be the general and potential members. Though alumni, and company representatives to a lesser extent, do go on the website occasionally, they do not have much need to do so and find information through different methods such as talking to current board members.
To understand what works and what is successful, we conducted competitive analysis of other similar sites to gain insight and inspiration on how we could improve the SASE website. Based on our analyses, a lot of areas of improvement was in creating a mobile-friendly user-first browsing experience. Interfaces should be about functionality not just for pure visuals.
We had a site architecture based off of how our users expected the user journey to be and off of how the client and we envisioned the site map to be. From there, we made a few paper prototypes of screens that we planned to have. From the initial wireframing, we moved onwards to digital prototyping.
I had a chance to work on the branding with the client. When I presented the different kinds of branding from our competitive analysis, the client expressed wanting a more professional feel to the SASE site. Though SASE also hosts many social events, the client wanted to portray SASE as professional first, then social. Based on her requests, I made a moodboard of possible aesthetics we could incorporate into our redesign.
A problem that I faced in the rebranding process was meeting the standards of SASE’s national brand. SASE is a national org that has its own branding that is quite outdated. Their style guideline only has two colors to it.
Though this gave me a lot of freedom, I still had to make sure that the rebranding for the UCSD chapter still complied with the national brand. My goal for the branding was to add more modern elements to make the site look fresh and updated.
I approached the problem by adjusting the brightness of the colors and using them as accent pieces. The main goal of the rebrand was to adhere to a more professional tone so excessive use of colors could detract from that. I found some modern fonts that would fit the professional theme but still look appealing and modern. I also worked on creating some graphics that could help add to empty spaces and give more flair to the site.
One major struggle that we continually faced throughout prototyping was creating good succinct content. Nowadays, people are less inclined to read whole texts and more likely to scan.
However, our client explained there was a need to keep the text to give better context on the org’s purpose and mission and also to abide by SASE National’s standards. We had to compromise and find ways to satisfy both client needs and research insights and revised our wireframes accordingly.
I continued to work individually with the client on a final redesign. After further discussion, I worked to tweak the visual and UI design to meet the client's needs. The client expressed interest in using our designs are blueprints for future iterations of the website. Here is the final design!
You can view the design here ↗
Throughout our design process, there was a lot of importance in being able to communicate and compromise with the client. Though there were topics that we did not agree on, we fully communicated our rationals with each other to understand each other’s restrictions and values in depth.
Along the lines of compromise, we also had to separate our needs from our wants. There were aspects that needed to be on the website, and other aspects that were preferred but not necessary or not functional. It was not feasible to cater to everybody’s wishes. What helped was basing design choices on our user research and testing we had that could give us more concrete problems to focus on and what the client laid out as necessary elements on the website.