An 11 week project which my team (including myself and two others) undertook to complete a major redesign of UC San Diego's sustainability resource center website.
The project included a client proposal, a week of user research and interviews, a creative brief, information architecture, style guides, storyboards and functional specifications, and plenty of wireframes and mockups.
The live site is here: http://aps-web.ucsd.edu/src/index.html
The wireframes, functional specification, storyboard, and creative brief documents can be found here:
At the onset of the project we chose to help our local campus based sustainability office because they had an interesting and challenging problem. The web presence for their one, singular office was originally fragmented across 3 different websites. The more we met with members of the office and learned about their positions and situations it became clear the the fragmentation of their web presence was in part a reflection of the fragmentation within their own office, and partly a cause of it as well.
We undertook this project not only because we cared about sustainability, but also because we wanted to see how much a designed cohesive web space could help the sustainability resource center become a designed and cohesive physical and social organization.
Step 1: Understanding the Problem
The first step of our process was to try and better understand what exactly was going with the different websites, why it was going on, and how we could intervene to create something that met the needs of everyone involved.
We started this investigation by just going around the office and interviewing people within it, whether they were staff of the office, just outsiders visiting, or members of the local sustainability community that had started to call the office their organizational home. We quickly learned that there was long standing tension between the office staff and the office denizens, which were local student run sustainability organizations. There were disagreements about what content should be featured on the website. The office staff, which were appointed by UCSD campus officials were a lot more politically sensitive and moderate in terms of what they wished to feature meanwhile the activist organizations were a lot more vocal, opinionated, and had less to fear from a press and media point of view than the official campus representatives. For a while now they had settled the disagreement with a compromise neither party was satisfied with. They had one main website, that featured only two non-descript images, which linked out to their individual websites. The main site itself though was very bland, and offered very little information to anyone who had wished to visit it to the point where some people didn’t even realize they were visiting the sustainability resource center website.
We also learned that a new sustainability office representative had just been appointed by the campus and she was willing to work together with the student organizations to come to an agreement and resolution about the websites. We spoke with both parties and in the end all were in agreement that we would help with the project.
Step 2: Identifying the Target Audience
Our next step was an important internal one in which we clarified who we were designing for and who our stakeholders. My initial instinct told me that I was mostly designing for a user group of people who had no relation to the sustainability resource center and only slightly cared about sustainability so as to spend minimal effort in finding information and contributing time to a cause. After we analyzed our findings from the previous research, I realized that we were designing more for our clients and stakeholders themselves than for members of the general public.
The websites users were in general members of the student organizations that visited and operated out of the sustainability resource center, as well as the staff that was housed within it. The website itself attracted few outside visitors, and was more of a symbolic presence, a web-based way of reaffirming these organizations and their identities to themselves rather than a commercial venture or tool used to bring in new interest, money, or people.
It was clear that the current arrangement wasn’t meeting the needs of the people that used it, but itwasn’t clear exactly how it was not meeting those needs. So we went back and did more interviews to see what our user groups expected out of the website and how they were accomplishing their tasks by working around the current non-functional website.
During this phase of research, we spent time both observing the members of the SRC while they used other web services to achieve things they felt should have been part of the SRC website and we also asked them questions such as “How do you see the SRC website as being separate from your own organization's website?” and “How do you see the SRC fitting in and contributing the community currently?”
From this phase of research we learned that what a lot of people valued about the SRC was that it was a physical space that offered many services as a venue whereas the other sites were more about the organizations themselves and their missions. Everyone thought that the SRC website featured very little of the space and its resources itself and instead chose to focus on the people within it. They all found this ironic as they all felt the main purpose of the space and the website was to advertise the space, spread awareness of the venue and services, and give people a neutral place to come together. This became one of the guiding insights in the project as it became focused around the space itself and its purpose of local sustainability community curation.
Step 3: Collaborating with Stakeholders & Competitive Analysis
Once we had a clear idea of who we were designing for and what tasks and behaviors we were designing around, we created a client proposal and brought it to the sustainability resource center to share with both parties. From this point on we worked closely with the official campus sustainability representatives and the student organizations. Throughout the design process we became a sort of mediator for not only their designs, but also their tensions and their resolutions.
With the appointed campus representative for the SRC and a few student organization representatives, we went on to do a competitive analysis of other campus sustainability offices that both parties felt had something to contribute to our designs. We looked at Stanford’s sustainability office, Boston University's and more. From there we created an information architecture, user stories, wireframes, and eventually a style guide.
Step 4: Designs and Development
The last 2 weeks or so of the project were spent creating some hi-fidelity prototypes and developing the website.
Upon launch, the reception of the website was very positive from both the official campus and the student organizations as well as members of the general public. It was used for its purpose and both parties felt equally respected and validated by the website’s content and presentation. Now, the website is still used