Overview
about the client
A leader in marine science since 1892, Hopkins Marine Station (HMS) is the marine laboratory of Stanford University. Located on the Monterey Peninsula, HMS offers Stanford students unique, in-the-field, research opportunities in various biological studies: biomechanics, neurobiology, ecology, genetics, etc.
A leader in marine science since 1892, Hopkins Marine Station (HMS) is the marine laboratory of Stanford University. Located on the Monterey Peninsula, HMS offers Stanford students unique, in-the-field, research opportunities in various biological studies: biomechanics, neurobiology, ecology, genetics, etc.
MY ROLE & team
I was the UX designer tasked with performing a website audit and creating wireframes, low and high fidelity mockups and digital assets while working alongside: Project Manager, Copywriters, IT/Web Developers and Stanford Professors.
I was the UX designer tasked with performing a website audit and creating wireframes, low and high fidelity mockups and digital assets while working alongside: Project Manager, Copywriters, IT/Web Developers and Stanford Professors.
PROJECT GOALS
>>> Increase student awareness of the HMS program
>>> Provide information on HMS news and events
>>> Improve visual attractiveness of the site
>>> Increase student awareness of the HMS program
>>> Provide information on HMS news and events
>>> Improve visual attractiveness of the site
Challenges
WHAT PROBLEM DID I TRY TO SOLVE?
How can HMS "bridge the gap" between themselves and the main Stanford campus when it comes to recruiting undergraduates for their unique, hand-on, off-campus research programs?
How can HMS "bridge the gap" between themselves and the main Stanford campus when it comes to recruiting undergraduates for their unique, hand-on, off-campus research programs?
WHAT CONSTRAINTS DID I FACE?
>>> Short timeline - about six weeks from start to relaunch
>>> Small budget - limiting the number of pages for design and web development availability
>>> Restrictive Drupal CMS template
>>> Short timeline - about six weeks from start to relaunch
>>> Small budget - limiting the number of pages for design and web development availability
>>> Restrictive Drupal CMS template
What did the user research reveal?
>>> Students were resistant to living/studying away from the main campus for an entire quarter
>>> Not knowing how HMS courses satisfy science requirements for many career paths
>>> An unawareness that diving certification was not a requirement.
>>> Strong competition from study abroad programs in Australia and Hawaii.
>>> Students were resistant to living/studying away from the main campus for an entire quarter
>>> Not knowing how HMS courses satisfy science requirements for many career paths
>>> An unawareness that diving certification was not a requirement.
>>> Strong competition from study abroad programs in Australia and Hawaii.
Solutions
WHAT DID I DO TO COUNTER THE CONSTRAINTS I FACED?
>>> I streamlined my design process and held incremental design reviews.
>>> Met early on with key stakeholders to determine which pages would benefit most from a redesign.
>>> Coordinated with the Dev. team to better understand the CMS platform and their capabilities.
>>> I streamlined my design process and held incremental design reviews.
>>> Met early on with key stakeholders to determine which pages would benefit most from a redesign.
>>> Coordinated with the Dev. team to better understand the CMS platform and their capabilities.
What INSIGHTS did I INCORPORATE INTO MY DESIGN DECISIONS?
>>> The benefit of small class sizes and more one-on-one time with instructors.
>>> HMS offers in-depth study of course materials that study abroad programs do not.
>>> HMS students have the opportunity to become diving certified.
>>> The benefit of small class sizes and more one-on-one time with instructors.
>>> HMS offers in-depth study of course materials that study abroad programs do not.
>>> HMS students have the opportunity to become diving certified.
Audit - Home Page
MY AUDIT AND STAKEHOLDER FEEDBACK
Having decided on the key pages to redesign (Home, Undergrad and Courses), I conducted an audit, presented my findings and met with professors to learn more about what they felt the major pain point were.
Having decided on the key pages to redesign (Home, Undergrad and Courses), I conducted an audit, presented my findings and met with professors to learn more about what they felt the major pain point were.
AUDIT FINDINGS - HOME PAGE
01 We need a welcome statement. What are the most important facts to know about HMS?
02 The calendar isn't syncable. How would users get the latest news?
03 Current News is more than one story; how can we show this better?
04 Events need to be highlighted better. Maybe combine with News so this information is in one place?
05 We need a better footer with main campus links for better navigation.
01 We need a welcome statement. What are the most important facts to know about HMS?
02 The calendar isn't syncable. How would users get the latest news?
03 Current News is more than one story; how can we show this better?
04 Events need to be highlighted better. Maybe combine with News so this information is in one place?
05 We need a better footer with main campus links for better navigation.
Audit - Undergrad Page
AUDIT FINDINGS - UNDERGRAD PAGE
01 We need better messaging. "Why come here?"
02 Program details are getting lost. Does anyone click on these links?
03 Can we use this space better? Maybe highlight program information for Undergrad students?
01 We need better messaging. "Why come here?"
02 Program details are getting lost. Does anyone click on these links?
03 Can we use this space better? Maybe highlight program information for Undergrad students?
Audit - Courses Page
AUDIT FINDINGS - COURSES PAGE
01 Would it be a better user experience to have course listings and course descriptions on the same page?
01 Would it be a better user experience to have course listings and course descriptions on the same page?
AUDIT FINDINGS - COURSES DETAIL PAGE
02 Tabbed system is clunky and inefficient. Do we really need a separate page for course details?
03 These images are confusing; are they clickable links to other pages?
02 Tabbed system is clunky and inefficient. Do we really need a separate page for course details?
03 These images are confusing; are they clickable links to other pages?
Wireframes
LOW FIDELITY DESIGN DIRECTIONS
Using what I learned, I mocked up three low fidelity design directions. I presented my designs to the Dev. team to determine if there were any potential implementation limitations. Three home page ideas pictured above.
Using what I learned, I mocked up three low fidelity design directions. I presented my designs to the Dev. team to determine if there were any potential implementation limitations. Three home page ideas pictured above.
DESIGN DIRECTION 01 - TWO COLUMN
A simple, layout and the most conservative of the three directions. This design direction most closely aligned with Stanford brand guidelines.
A simple, layout and the most conservative of the three directions. This design direction most closely aligned with Stanford brand guidelines.
DESIGN DIRECTION 02 - MASONRY
A more modern news feed or magazine-like approach. Definitely a bold approach for them, but I felt it handled their data well, had a lot of layout flexibility and would resonate well with users.
A more modern news feed or magazine-like approach. Definitely a bold approach for them, but I felt it handled their data well, had a lot of layout flexibility and would resonate well with users.
DESIGN DIRECTION 03 - FULL WIDTH
A rotating slideshow and colored bar text blocks highlight this direction. I envisioned full width images showcasing dramatic underwater scenes and close-up lab experiment photography.
A rotating slideshow and colored bar text blocks highlight this direction. I envisioned full width images showcasing dramatic underwater scenes and close-up lab experiment photography.
Next Steps
Ideas one and two were chosen to refine and present to stakeholders. Direction three was discarded due to potential CMS issues with so much full width imagery and probable accessibility issues with the slideshow header.
Ideas one and two were chosen to refine and present to stakeholders. Direction three was discarded due to potential CMS issues with so much full width imagery and probable accessibility issues with the slideshow header.
Design Revision 01 - Two Column Grid
PRESENTED COLOR COMPS
Moving forward with two solid design directions, I built color comps to present to stakeholders. Keeping to our tight schedule, we worked closely on design revisions, some of which are highlighted here.
Moving forward with two solid design directions, I built color comps to present to stakeholders. Keeping to our tight schedule, we worked closely on design revisions, some of which are highlighted here.
DESIGN DIRECTION 01 - HOME PAGE
01 A clickable block highlighted key reasons to take classes at HMS.
02 Combined news and events blocks so users could find out what's going on in one place.
01 A clickable block highlighted key reasons to take classes at HMS.
02 Combined news and events blocks so users could find out what's going on in one place.
Design Revision 01 - Two Column Grid
DESIGN DIRECTION 01 - UNDERGRAD PAGE
03 Information blocks of data with CTAs to direct users to the information they needed.
03 Information blocks of data with CTAs to direct users to the information they needed.
DESIGN DIRECTION 01 - Courses PAGE
04 A consolidated courses page with an easily scannable list view and accordion style drop down displaying more detailed course information.
04 A consolidated courses page with an easily scannable list view and accordion style drop down displaying more detailed course information.
Design Revision 02 - Masonry
DESIGN DIRECTION 02 - HOME PAGE
01 Bold headline over dynamic underwater image with CTA directing users to undergrad page.
02 Clickable block highlighted key reasons to take classes at HMS.
03 Flexible masonry grid shown accommodating different types of data.
01 Bold headline over dynamic underwater image with CTA directing users to undergrad page.
02 Clickable block highlighted key reasons to take classes at HMS.
03 Flexible masonry grid shown accommodating different types of data.
Design Revision 02 - Masonry
DESIGN DIRECTION 02 - UNDERGRAD PAGE
04 Vertical version of masonry grid shown as complementary layout.
04 Vertical version of masonry grid shown as complementary layout.
DESIGN DIRECTION 02 - COURSES PAGE
05 A consolidated courses page with more of a card style layout and drop down panel for course details.
05 A consolidated courses page with more of a card style layout and drop down panel for course details.
Final Design
DIRECTION 01 THE FINAL CHOICE
In the end, stakeholders chose the two column concept with the substitution of the masonry courses page, which was favored for its more visual card style layout and drop down informational panel.
In the end, stakeholders chose the two column concept with the substitution of the masonry courses page, which was favored for its more visual card style layout and drop down informational panel.
“Thanks for your help in getting our new site up and running.”
MARK DENNY
Stanford Biology Professor, Director of Hopkins Marine Station
Stanford Biology Professor, Director of Hopkins Marine Station