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.
To save up vertical space, we incorporated horizontal scroll into different aspects of the site. Users can easily navigate upcoming events on the home page
Content Hidden in Drawers
To preserve space, extra information is kept away in drawers and users can expand to read more. The About page has a lot of information tucked neatly away to avoid overwhelming the user.
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.
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:
Members rely on Facebook for SASE updates as the SASE Facebook page is more active and relevant than the website.
Company representatives that want to work with SASE need more information like 401(c) disclosure, types of collaborations, and incentives.
A lot of alumni care about SASE and usually help out by getting their companies involved through means like sponsorship or event attendance.
Lastly, we discovered that the SASE website lacks all the necessary content to help instigate the flow of interaction between the orgs and members, alumni, and company representatives.
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.
Struggling Student Sky
As a third year transfer, Sky does not feel career-ready and wants to find an organization to gain professional development. He also hopes to find friends as it has been hard to connect to people.
Active Alumni Connor
Connor was an active SASE member in his undergrad but, after graduating, finds it hard to be involved due to work. Still, he tries to find the time to go to events and makes an effort to help the org.
Company Representative Elena
Elena wants to find people with lots of potential for her company. Being a UCSD graduate, she knows the school has reputable students who need jobs. She wants to help her community as much as she can.
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.
We made a few paper prototypes of screens that we planned to have. From the initial wireframing, we moved onwards to digital prototyping.
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.
In our user testing, we discovered that...
In our redesign of the prototype, we addressed the issues by finding ways to fulfill both user and client needs. we created fake interactions because of limitations of our prototyping tool, Figma. Some main functionalities that we had to fake were drawers, that once clicked, would allow tabs to expand if they wanted more information.
I helped to create more relevant content to showcase the potential SASE had to work with companies. This included adding information that may be useful to representatives such as member breakdown, types of collaborations, and a list of companies SASE has worked with in the past.
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 some preferences that users desired due to their own personal values. We could not cater to everybody’s single wishes but designed based on the research we had that could give us more concrete problem spaces and what the client laid out as necessary elements on the website.
As of now, I am continuing the redesign with the client. I hope to create a more fleshed out design with better user interface. Hopefully in the future, SASE will be able to use the design as a blueprint when they revamp their website.