UC Berkeley’s School of Optometry was at an inflection point. Their program was one of the best in the world, truly leading the way in vision science research and education, but their web presence was a relic, antithetical to the forward-thinking approach that guides research at the university. Their existing site did not reflect the future of science and medicine, but a bygone era of stodginess that misrepresented the institution and was hostile to users.
Below is what the old site looked like.
(1) A non-responsive website with poor hierarchy, an outdated look, and limited, cramped space.
(2) A subpage with a marble-texture backdrop, complicated, sprawling navigation, and a dense, heavy presence with text layout that discourages a quick scan.
(3) Outdated search technology and methodology that doesn't return satisfying results, insults users' intelligence, and is unnecessarily clunky to use.
The School of Optometry is a hotbed of activity in furthering the field of vision science, it was time to convey that to prospective students, the university community, and the world at large. The client wanted a new website that would be easy to update, easily navigable and searchable, responsive to all screen sizes, and feature the ability to edit each page using Wordpress shortcodes to implement custom elements. They wanted a better experience for all users of the site, visitors and admins alike. Not specifically mentioned in the brief: The website also had to look nice.
Beyond the usability requirements, the school’s goals for the site were twofold:
1: The site should be a compelling sales tool that highlights the unique and special experience of attending UC Berkeley.
2: The site should feature a system to deliver dynamic content covering groundbreaking achievements by students and faculty in the field of vision science.
We began the process by doing an audit of the existing site, and reorganizing some of the navigational items, taking care to keep everything on the site accessible within just a few clicks. Gone would be the days of deeply nested pages and breadcrumbs to find your way back out. There was a lot of information that wasn’t relevant to people outside the program, and we were able to relocate that content to the university intranet where students could access that information.
At the same time, we conducted a broad but focused competitive analysis. We looked at websites for other colleges and universities to ensure that we were including the information that would be expected, in a way that would be logical to users. We also looked at other sites that conveyed a similar amount of information, with the goal of balancing the amount of information presented at one time with the need to have the other information on the site easily accessible.
With a general site requirements document in place, we sought feedback from university stakeholders and users of the site, generating personas to evaluate user flow for the main types of users: Prospective Students, Alumni / Potential Donors, People Seeking Eyecare, Current Students, and Admins.
Using the personas, combined with feedback from the users, I generated wireframes to present to the client an outline for the architecture of the site and user flow. These were generated in Sketch, and presented using live clickable wireframes on the web using InVision. This process allows for rapid iteration and minimizes the need for interpretation on the client’s behalf, cutting down production time and increasing clarity of intent.
With the site’s structure and goals in place and in mind, I began the visual design explorations, iterating and ideating internally before distilling those ideas into two main concepts that I presented to the client.
Ultimately, we pulled some components from each, and settled on a direction that establishes a clear visual hierarchy while at the same time providing a modular system that is highly customizable and expandable. You can see some results below. The redesign of the site was well received, and we are currently working on a redesign of the School of Optometry's Vision Science PhD program. (launch site)
