WORK EXPERIENCE
The Basement
Client / UCSD Office of Innovation and Commercialization
Role / UI/UX Designer
Year / 2022
BACKGROUND
The Basement is a startup incubation space at UC San Diego focusing on social innovation and entrepreneurship, established by the university in 2015 with support from other successful alumni and venture capitalists. Despite providing valuable resources such as workshops, mentorships, and funding opportunities for students to develop innovative solutions, The Basement faced significant challenges following its relocation into UC San Diego's new Design and Innovation building and the onset of the COVID-19 pandemic.
​
Compounded by a lackluster social media presence and website, these issues led to low awareness of The Basement among students. Recognizing that the upcoming fall quarter with the lifting of COVID-19 restrictions is the prime time for new students to explore and join new organizations and clubs, The Basement's directors saw the urgent need for a website redesign to avoid missing out on a fresh influx of potential members.
The newly remodeled Basement, located within the Design and Innovation Building at UC San Diego.
UNDERSTANDING THE PROBLEM SPACE
Taking on the role of UI/UX designer and developer, I was tasked with independently leading a complete redesign and implementation of The Basement's official website. Upon surveying and interviewing 20 other students and faculty, I identified several critical pain points.
that's me!
THE BASEMENT'S INITIAL PAIN POINTS
1
Organization
The site design suffered from crowded and busy layouts, lacking a clear visual hierarchy. Key information was often obscured by an excess of unrelated content, leading to a visually overstimulating and frustrating experience for visitors viewing at a glance. The absence of clear call-to-actions and information structure hindered the website's ability to communicate with and engage its audience effectively.
2
Navigation
The site architecture of the website and navigation was not intuitive and too cluttered, with no clickable pages for each label in the header—only drop-down menus. This was frustrating for users since they would have to mouse over each label to find what would be relevant to them. Especially for first-time visitors, many were overwhelmed by the amount of options and still could not find what they were looking for.
3
Coherence
The site's content was outdated, rendering the site unreliable, as users couldn't trust its accuracy or relevance, while a dull presentation failed to capture and retain visitors' interest, leading to lower engagement rates and a lack of visual appeal. Inconsistency in tone, style, and formatting across different pages made the site appear unprofessional and poorly maintained, collectively eroding user trust.
1
Layout of affiliates list prior to website redesign.
2
Messy site navigation prior to website redesign.
3
Yikes...
Yeah, you get the point!
IDEATING FURTHER
With this information and industry-standard design and development principles in mind, I started creating user personas, developing mood boards, and establishing a clear information architecture. To start, I launched a Brand Perception survey that I posted to the UCSD subreddit to gauge the current pain points the new website would need to address among the student population. Through the survey as well as through interviewing with the directors of The Basement, I identified 3 main personas for users of The Basement’s website.
​
PERSONAS
Most students had not visited The Basement in any modality, with low familiarity with The Basement overall (~=2 out of 5 on average). The pages that were considered by students as most important for viewing were About Us, Programs, and Events. To further understand their needs, I interviewed students that fit the “Sarah” figure and students that fit the “Josh” figure. Students characterized like “Sarah” were overall less familiar with The Basement but were interested in learning more about entrepreneurship and open to the various events offered—making their needs for accessing key information such as open access hours, how to visit, and a comprehensive calendar evident. Meanwhile, students like “Josh” already were independently involved in the ideation and development process for their solutions, but needed the additional support and resources. The Basement aimed to provide—which emphasized the importance of up-to-date and detailed information about all programs and resources, such as mentorship, being easy to find and read. Investors are also users of the website, and would want to be able to find information on the successful startups available— which the current website heavily lacked.
With this in mind, I set out to create a modern and connected design that showcased high-quality, relevant, and visually engaging photos of the space, students, and other subjects of interest. Since The Basement’s official color scheme was not clearly used on the current website, I wanted to incorporate it more prominently in my redesign. I also wanted to update the design system in use as the current fonts were clearly dated, as remarked on by multiple students.
MOODBOARD
INFORMATION ARCHITECTURE
To address this, I compiled all the website’s content onto a document and organized a new layout with the directors’ guidance. The directors were initially very resistant to condensing or removing the many drop-down options and surplus of pages, as displayed in its original state here. However, I presented solid reasoning for condensing the pages into singular pages with supplemental subpages as needed, assuring them of the enhanced usability and the continued presence of all of the information, just in a more logical layout.
​
With their approval, I curated and edited new content as well as reorganized the navigation and pages as follows:
Before redesign...
... After redesign. Goodbye, clutter!
The first draft for the updated site map for The Basement.
Organizing the site map was an iterative process that required a deep understanding of all of The Basement's unique needs and programs, an endeavor I spent a substantial amount of time familiarizing myself with in 1-on-1 meetings with the primary stakeholders as well as other members of the Industry Advisory Board or mentorship figures.
​
After multiple rounds of back-and-forth iterations and incorporating feedback from students, I finalized my page designs with a focus on clarity, coherence, and user engagement, specifically addressing the pain points and preferences I had earlier identified in the research phase.
1. HOME PAGE
The new home page included links to an external scheduling page, programs directory page (new), directions page, impact page (new), external events page (Eventbrite), Instagram feed plugin (new). I wanted to prominently feature the mission statement given that most students did not even know what The Basement was purposed for even after visiting their website or social media accounts, statistics on The Basement’s accomplishments and alumni testimonials to establish reputability, clear directions and open access hours so students could easily find out how and when to visit, links to the program directory and events page, and The Basement’s Instagram account feed to showcase recent student activity. Additionally, I decided to address the issue of not having an consistently updated Events calendar by directly redirecting users to the Eventbrite page, which was refreshed regularly.
2. ABOUT US PAGE
I created a single About Us page with key elements from the original About Us, EDI Principles, Contact Us, Basement Executive Board, and Faculty Board of Advisors pages. My goal was to merge all pertinent content into one comprehensive page, making the appropriate information readily accessible as well as providing visible and relevant blurbs or hyperlinks for each featured individual, which the original pages lacked.
3. PROGRAMS PAGE
Instead of its previous structure of Programs in the navigation functioning solely as a label for the dropdown list of Programs, I built a landing page for Programs that displayed an overview for all current programs and links to their respective pages in tiles, as well as major updates to the layouts and page designs for the various program pages housed underneath in the drop-down menu.
Mentorship got moved under the Programs section, with pictures of mentors and their contact information as well as high-quality images (previously very pixelated) to accompany each segment to make the page look more visually appealing.
4. RESOURCES PAGE
I created a single Resources page with subpages for Spaces (new), Office Hours (new), and Startup Tools (new). I recognized the importance of showcasing the brand-new facilities and requested high-quality images for the Spaces subpage, assisting in writing the corresponding descriptions. In addition, I added a subpage dedicated to scheduling office hours, in which appointments can be made with specific staff members for consulting or networking. It was also helpful to organize a clear layout for startup tools with corresponding blurbs— as previous pages listing startup resources were locked behind password-protected screens.
5. IMPACT PAGE
I devised a new Impact page with elements from Featured News and Media and updated article content (new). I linked notable news articles related to startups at The Basement with engaging thumbnails.
6. PORTFOLIO PAGE
I updated the Portfolio page with only the highest-achieving startups being spotlighted in their own individual subpages (instead of a collage of logos without any supplementary text).
7. GIVE NOW PAGE
I refreshed the Give Now page with updated infographics instead of its original text-heavy layout.
REFLECTION
As a result of this project, I realized the importance of understanding user needs during the UI/UX design process. Conducting user research and developing personas helped me to identify the pain points of the website— especially in the objective of communicating The Basement’s mission, resources, and impact. In recognizing the most essential aspects users looked for in their browsing experience, I condensed and simplified navigation to be clear and intuitive to use, consolidating from 7 main pages with 20 linked drop-down pages to 6 main pages with only 5 linked drop-down pages. In tandem with this goal, I ensured that key information was prominently and cleanly displayed on the proper pages and added content such as impact statistics and testimonials to build The Basement’s credibility. The clear information architecture was a success, as majority of users interviewed in A/B testing reviewed my new design as “significantly more user-friendly,” as well as all participants agreeing that they could “confidently describe The Basement’s goals and offerings.”
.png)
To effectively design for a clean and connected look across the website, I focused on employing an updated, cohesive color palette and typography system that better aligned with The Basement's brand identity, curating suitable graphics that directed user attention to important information, and capturing and selecting high-quality images. I’m most proud of my landing page design, in which I had the opportunity to hone my front-end development skills, effectively integrating HTML and CSS code for some of the plugins used as well as custom layouts. After conducting user testing and receiving feedback from both the client and interviewed users, the new website design for The Basement received high praise. The directors expressed confidence that the website will be effective in attracting more students, while many interviewed users described their overall experience with the site as “pleasant” and “informative.” Coupled with updating SEO settings, the website saw a 25% decrease in bounce rates and overall 20% increase in site traffic within the first month of its launch—validation that the redesign achieved both aesthetic and functional success.
​
In conclusion, this website redesign project was a valuable learning experience that allowed me to apply my skills and knowledge to deliver a successful redesign that met the client's expectations and was highly received by users. Ultimately, maintaining clear communication with the client helped keep them engaged throughout the process and ensured their needs and goals were met. While gathering content and corresponding back-and-forth was a tedious process at times, it was well worth the extra time and effort to deliver a dynamically transformed product. Moving forward, I will continue to prioritize user needs and feedback and leverage my skills to create designs that are both visually appealing and functional, with a keen focus on delivering measurable results. I am excited to further develop my skills and knowledge in UI/UX design as I embark on other projects.