Petris Center/GCHEPR websites
(See www.gchepr.org for the GCHEPR site)
The Nicholas C. Petris Center on Health Care Markets & Consumer Welfare (hereafter called Petris) is part of the School of Public Health at UC-Berkeley. It conducts research on health topics in regards to economics and politics. The center’s global counterpart, Global Center for Health Economics & Policy Research (GCHEPR, hereafter called Global because the acronym is a mouth/mindful), addresses those issues on an international scale. I was hired on to manage their respective websites, as well as redesigning/realigning them as I saw fit.
My major priorities were adding and updating content to the sites, but as soon as I saw the websites, I knew they were due for a redesign. Note that because the sites’ designs were and are very similar, I am describing the common steps shared by both design processes.
Several usability issues plagued the old designs, including questionable HTML markup, erratic flyouts on the Global site, an equally erratic accordion menu for the Petris site, inconsistent layout, and (in my opinion) too many menu items. I had to deal with those issues with a deadline that was to coincide with a book release by the center’s director.
I sketches out various layouts, all 2-column, and in some of them I included room for breadcrumb navigation
You will notice that in all these sketches, I placed some kind of menu on the right side of the viewport. I’m not sure why I never considered left-side placement, but in the end, it worked out well. You’ll see why.
Along the way, I consulted with the Petris staff and under their guidance, re-organized the content of the website, including condensing the main menu. I managed to reduce the number of main menu links from 16 to 9, which freed up some screen space.
My top-level supervisor also insisted on the inclusion of two prominent links, which directs to the UC-Berkeley and the School of Public Health websites, on every web page, to show the center’s affiliation with the institutes. In the end, I decided to place them on the side, underneath the side menu.
At some point, I remembered a website where the main menu was relegated to a block on the top-right corner of the viewport. Unfortunately, I don’t remember the website’s name, but I discovered that, due to the condensation explained before, I could easily fit the main menu items into such a corner, and tuck them next to the site name and logo (I also redesigned the logo slightly). The larger size of the logo could catch a visitor’s eye, and as they read left-to-right, they will easily reach the main menu. Moreover, with the right-side menu, I could place subsections in there, such that, from the main menu, the eye can follow down to the submenu of the current section of the site. I was simply taking advantage of natural eye-tracking.
So with this in mind, I came eventually to the final mockup:
Subsections within each major section will appear in the sidebar. The final version of the site has an extra main menu item “News”, so subsequently, I had to change it to three columns of three links each.
Main logos went to behind the center’s name so they wouldn’t interfere with the main menu. Gradients in the banner goes from light on left to dark on right so that a) the left side won’t feel too heavy, and b) the main menu can pop with the higher contrast.
Other improvements include revamping photo galleries in events pages and person profiles in the People section.
The Petris website was launched in time for the director’s book release, the Global website not long afterwards. I received favorable reviews from the Petris staff and am grateful for their support during the design process. I stayed on to maintain and make minor realignments for the websites, as well as create a test CMS-powered version of the two websites. Details about that test project will come soon.