With a team of three other talented designers, I redesigned the desktop and mobile website for the Che Cafe, a space on UCSD campus that serves as a music venue, community kitchen, study area, and gathering spot. Its multifunctionality provided a unique challenge since user needs varied greatly depending on the occurring activity. Our final deliverables included functional, high-fidelity Figma prototypes.
Key improvements include better readability, brand cohesion, and site navigation. These goals and our success were evaluated through interviews, testing, and iterations throughout the redesign process. Detailed documentation of interview notes, our creative brief, and competitive analyses are provided to show our extensive considerations of client and user objectives.
Named after Che Guevara, the Che Cafe (est. 1980s) is not quite a cafe, unlike what its name suggests. Instead, the Che Cafe is a non-profit joint music venue and DIY space on the University of California, San Diego's campus. The collective at the Che Cafe adopt and enforce a strong policy of respectfulness, openness, and freedom.
As a music venue, the Che Cafe hosts multiple shows per week, attracting a more "alternative" crowd. As a DIY space, the Che Cafe opens its doors to the public community, mainly consisting of students, and allows them to utilize the space however they see fit. As a result, the Che Cafe also serves as a community kitchen (mutual aid), study area, and gathering spot. Each sector or department of the Che is called a subcollective.
The Che, run solely by volunteers, always seems to have a lot on their plate. As a result, its website was outdated when my team iscovered it and the volunteers were enthusiastic in having their site redesigned when we offered.
To serve as a reference point for the redesign, I've attached a few snapshots of Che's original website design.
Timeline: January 2023 to March 2023.
Project scope: Since my team was working with a client, we needed to coordinate closely with them. As it was a location on campus, we opted to meet there twice a week, giving us the opportunity to chat with visitors (likely users of the site) as well as volunteers working there when they had a spare moment. The redesign occurred over a time frame of one academic quarter, which was 10 weeks. We were to redesign the entirety of the website, desktop and mobile.
My role: I worked closely with 3 other designers. We all contributed on every single step of the process, and all of us attended each meeting. We taught and learned from each other, and our sums were definitely greater than our parts.
In order for us to have a defined goal to work towards, we needed to have a better understanding of the Che and its needs. To do so, we set up a length interview with several prominent volunteers (since the Che is run by volunteers), asking them questions about their brand, their users, their vision for a website, and what they thought about their current website while one of us walked through it in front of them.
We then synthesized the findings of our interview into a collection of priorities for the website redesign:
Great! Now we've got client goals in mind for the redesign.
(View our raw interview notes and priority list here.)
Client goals, however, are only half of the insight we need. We've heard what they want, but we also need to know what users want. As usual, me and my team collected at the Che during multiple times of day and different events to cast a wide net on subcollectives and what kind of people utilize the space. This included visiting during study hours, during volunteer meetings, and during music performances. We interviewed a total of 11 people on topics like:
From the interviews, we learned that because the Che offers such a large variety of services, users often had different backgrounds and goals from each other. To organize the different types of users, we created personas.
(View our raw interview notes here.)
There were three main groups of people who access the Che website. The first involves show volunteers, people who'd like to pitch in during music shows. The second involves study volunteers, people who enjoy using the Che as a study space, and decide to volunteer doing small tasks while they're already there. The last involves performers, music artists who are interested in hosting a show at the Che.
Along with each persona, my team and I created a table of scenarios with use cases to better visualize what the website needs.
This step served its purpose well, and from it, combined with the requests made by our client, we have our feature and functionality list:
We now have both goals (client and users) and content for the redesign established.
Before designing, our last step in the research process is to understand the type of website we are building. None of us have worked with a client like the Che, so looking for inspiration, guidance, and also what doesn't work would be hugely beneficial. We hand-picked a list of nearby locations, mostly focused on those that offer similar services. We noted the branding, functionality, site architecture, navigation, and content of these locations' sites (below).
Here is what we noticed about branding:
Here is what we noticed about functionality:
We charted how other sites organized their pages to serve as inspiration for Che's:
Geisel library had the only site with secondary labels, which were pages nested under a parent page/category, and we charted that too.
Overall, we learned:
Closely related to site architecture, but involves actual UI implementation, is site navigation. This is how some competitors structured their navigation bar:
Finally, we also looked into what types of content each site had, and below is a neat summary table:
We presented the main findings of our competitive analysis as well as a walkthrough of the competitor sites to our client, the Che, to see if there were any particular elements they'd like to include or exclude from the site. They were a fan of especially:
To view all the details of our analysis, please click here.
My team and I have done a lot of work at this point (and haven't even started designing. whew!). To organize everything we've done and set concrete plans for the design, for our own ease of reference and for our client's reference, we formatted our plans/decisions into a creative brief.
For the lovely viewers on mobile, please view the brief here.
Alright! Time to start designing. We started off, of course, with determining the architecture of the site and how we see pages being presented. This is largely guided by our competitive analysis and our summary of content outlined in the brief (synthesized from client and user goals).
We decided on six primary labels: Events, Get Involved, About, Archive, and Booking. Because of Che's site's amount of content, we also opted for secondary labels, nesting a few more pages under About, Archive, and Booking to accommodate for more specialization.
To determine the direction of the look and feel of the site, my team created 4 unique but representative moodboards that all embody some aspects of the Che. They include a few adjectives that describe the corresponding mood and Che's ideology.
These were presented to our client, and volunteers there almost unanimously agreed upon the fourth direction (bottom right). They resonated with the brightness of personality and inclusivity that really characterized the Che.
We started with some extremely low-fidelity wireframes to get some general ideas down before moving on to a prototype of higher-fidelity wireframes with interactivity. We tested the latter wireframes with users to identify weaknesses and strengths to help us with our high-fidelity prototype.
These low-fidelity wireframes are essentially sketches: they allowed us to get a sense of our future design without investing too much time and effort. We were able to play around and try some different ideas; you can see alternatives we considered on the far right.
Although we are designing for both mobile and desktop, for this exploratory phase, we felt just mobile wireframes were enough to translate ideas from brain to "paper". In our next step, we start designing for desktop in parallel with mobile.
Next, we created higher-fidelity prototypes with interactivity. The main purpose of this step was to get the structure and interaction of pages down without being concerned about styling. Below are the mobile prototype (top) and the desktop prototype (bottom).
For still images and a functionality walkthrough, please visit this slide deck.
These prototypes are large and take a minute to load, thanks for your patience!
These prototypes were no easy feat, but it's too early to celebrate. Will they accomplish the goals we had set? Only user testing will tell.
We presented both wireframes to a UCSD student very slightly acquainted with the Che Cafe, although never having visited its site. Using two fictional scenarios derived from our personas, each with their own set of questions and tasks, we tested the UI/UX of our site. Here were our two scenarios:
While most of the test went smoothly, we identified some major hiccups:
Whew! Glad we tested. These are definitely issues we want to address in our high-fidelity designs, since they act counter to our goals. In our next prototype update (see next section), we've made changes to tackle them. These changes are closely detailed in the iterations section.
View our raw user test notes here.
As we translated our wireframes into high-fidelity prototypes, we needed to establish a style guide, components, and some variants. Here are some screenshots of them:
Oh, and I also designed a new banner using old show posters for them to display on the home page! This better aligned with the brand direction the client opted to take.
For our next prototype update, we've applied these design library elements, as well as made the changes to tackle the issues brought up from the wireframes user test. Detailed iteration notes can be found in the iterations section.
To further improve our design, my team and I enlisted the help of fellow student designers for feedback. We're hoping their fresh eyes could see something ours haven't, and we were right. Their suggestions include (but are not limited to):
We continued to iterate our design according to feedback, and the changes are outlined in the iterations section that follows.
So much feedback from user testing and meant we had a lot of updates to make. However, I take that as a good sign. Each tweak is a step in the right direction. For all changes made on desktop, you can assume they were equally reflected on mobile, and vice versa.
It would be impossible to document every single change we made along the way, so here are the most notable ones.
One of the main navigation problems we discovered during our user test is that "archive" wasn't a clear primary label. Instead of conveying that it was a collection of content and media, it was read as a section of outdated material primarily meant for volunteers to access.
Thus, in our navigation bar, we renamed Archive to Gallery.
Even though our new design provided better visual hierarchy than the original site, our critique session showed us there were parts that could be polished up still.
We spaced items that were part of a section closer, while adding space in between sections. Varied text size and weight provided further contrast between headers and body text. Lastly, using color in the headers added one more cue of distinguishment.
Another task our user struggled with during testing was finding how to get involved. She could find the page, but couldn't find the actual action she needed to take. To remedy this, we made more obvious call-to-actions, by starting the Get Involved page with a blurb on how to volunteer and a bright orange button.
A suggestion a fellow student made during critiques was to make the cards more obviously clickable. A lack of affordances made them read more like images and less like interactive cards. By adding an orange drop shadow, it adds dimension to the cards and helps them read more as buttons.
The event cards had a similar lack of affordances. Visual changes were made to make them more card-like and less image-like, and color-coding was added to indicate event type so users can quickly find and identify what they're looking for/at. This color-coding matches the calendar of events (see below), improving site consistency.
Experience the prototype of the final design yourself. (These Figma files are large and take a minute to load.)
We've researched, designed, and iterated, steadily progressing forward. As part of finalizing the design, we revisited the client and user goals set out early in the process. Did we achieve them? We think so, and so does our client. Here are the most notable improvements:
And with that, this project is a wrap!
This project has been a huge undertaking. I feel immensely proud of my team and I for having completed it.
Working with the other talented designers in my team. When everyone is putting their all into a project, and everyone has something to teach and to learn, we are like a well-oiled machine. Bouncing ideas off each other always yielded productive and creative results, and my contribution truly felt invaluable.
The biggest challenge for this project also ended up being the most fun part of the project: components and variations. Because of the scale of the project, as well as building some pretty niche elements (interactive calendars and cards with expanding descriptions), we really had to think hard about how our components and variations were going to work.
Implementation and further user testing would be amazing evaluation for the site. While we were able to talk to users throughout our research and design process, time constraints made it impossible to test extensively. Implementation would also provide insight that prototypes alone can't. For example, booking and reservations are currently done with a Google Form, with responses sent to the Che's email inbox. Would that truly be easier for Che volunteers and bands? It's difficult to know at this stage.