Annie Krambuhl

WWW.KRAMBUHL.COM // 415-889-7880

www.p a tten.edu

Process Case Study

Annie Krambuhl

Design Challenge The Patten University website needed a refresh. The school was recently reaccredited and in the process of launching new online programs. Most importantly, the Patten.edu website didnt reect who we were as a university. It felt like an on campus school, but the majority of our students were online. The redesign needed to balance our on-campus and online identities.

Collaborators UX researcher & developer Responsibilities Competitive research Site architecture Navigation Visual design Visual Q&A

www.p a tten.edu

Research

Annie Krambuhl

Previous Design The visual design was dark, heavy, and inconsistent. The content was difcult to navigate and lled with legacy information.

Competitive audit I began with a competitive audit of other schools that offer both campus and online degrees. My goal was to learn how they established themselves as both online and on-campus through site architecture and navigation. This informed my process of creating the information architecture for site.

www.p a tten.edu

Final Design

Annie Krambuhl

Site Architecture Exercise I presented the results of this audit and led a group exercise about my proposed site architecture with the Provost and President of Patten, our VP of Product, and the Director of UX. I used sticky notes on the wall to represent the different sections of the site. I chose sticky notes because it allowed the group to move, add and subtract sticky notes collaboratively. This was a great tool to facilitate feedback and suggestions from diverse stakeholders.

Quick Wins Given competing business priorities, it became evident we wouldnt be able to implement all of the proposed new content. I prioritized the site architecture to include only the pages we would need to reach an MVP, with the goal of clearly communicating that Patten University offers both oncampus and online degrees.
Administration and Staff Presidents welcome Board of Trustees Advisory Board Online Degree Programs How Online Courses Work Technology Requirements Academic Assistance UniversityNow network Online Academic Resources
Patten Course Catalog 2013-2014 Patten Transcript Request Form Associate of Arts Bachelor of Arts Master of Arts

Home

About Patten

Online

On Campus On Campus Degree Programs Academic Resources Academic Assistance Visiting Patten
Patten University 2013 Fall Class Schedule Patten Course Catalog 2013-2014 Patten Transcript Request Form
On Campus MA & Credential Program Book List On Campus Undergraduate Program Book List

Admissions
Associate of Arts Bachelor of Arts Master of Arts California Teaching Credential

Faculty

Undergraduate programs Graduate programs

Teaching Credential Programs

International Students Transfer Credits

UniversityNow network Accreditation

Online Tuition

Jobs

On-Campus Tuition Apply to Patten

Get started

www.p a tten.edu

Visual Design iteration

Annie Krambuhl

Visual design process A complete visual exploration and redesign was out of the scope of this project. Using the current site as a guide, I applied the revised architecture and navigation. My goal was to create a fresher visual design that was consistent and easy to navigate. I began iterating on the design in FireWorks and I lead a series of feedbacks sessions with executive stakeholders in order to iterate further.

www.p a tten.edu

Final design

Annie Krambuhl

Implementation As the designs came together in FireWorks, I paired with a UX web developer to bring my designs to life. Once the HTML and CSS were implemented, we were able to work together to iterate further on the visual design.

Final Design The nal design for Patten.edu has a much brighter open feeling. The consistency of design across the entire site gives the brand authenticity and authority. The new architecture clearly indicates that Patten University is both a campus and online school. I selected images of people in ambiguous settings in order to avoid images that looked like a brick and mortar campus. I made the decision to use many images of people in order to humanize the brand by adding character and familiarity.

Patten.edu Home page

www.p a tten.edu

Final design

Annie Krambuhl

Second level template

www.p a tten.edu

Final design

Annie Krambuhl

Interior page template