Moving forward with a design direction

After Digital Pulp delivered two design concepts to us in December, the Top Tier Redesign Working Group worked to gather and synthesize feedback from stakeholders and users and communicate our feedback to Digital Pulp over two rounds of revision. This was no small task; design is usually the step in the process that invites the largest amount—and sometimes broadest range—of opinions.

In the end, we selected one of Digital Pulp’s concepts and asked them to iterate on the hero (top feature) section of the front page to get the right feel and balance. The resulting hero design both introduces Georgetown via a short video and showcases rotating news features. The rest of the design concept (homepage, landing page, and article) echoes the themes introduced via the hero, highlighting different aspects of Georgetown and telling student stories throughout.

A mockup of the top of the homepage design for Georgetown.edu

The top of the homepage design.

A mockup of the top of the landing page design for Georgetown.edu

The top of the landing page design.

A mockup of the top of the article page design for Georgetown.edu

The top of the article page design.

We’ve shared the most recent design concepts with the Georgetown Board of Directors, where they were generally well-received.

As a reminder, these design concepts only included the homepage, a landing page, and an article. We’ll receive the rest of the design package at the end of February, when we’ll spring back into action evaluating the design of the remaining pages.

We’re also starting to turn our attention to the next big task on the horizon: Getting organized around the content—both text and images—that will eventually turn these design mockups into finished pages.

We’ve got a visual

This Georgetown.edu project update is all about design! Welcome to our most complex deliverable yet.

In December, we received two design concepts from our vendor, Digital Pulp. The concepts included mockups for new homepage, landing page, and article page (among others) to give us an idea of what Digital Pulp’s proposed design would look like with different kinds of content in different contexts.

Step one when evaluating a design is to present it to Georgetown’s Visual Identity committee. The idea here is not necessarily to ask what they like and don’t like about the designs—that comes later. Instead, designers on the committee reviewed the Georgetown.edu concepts to ensure that they adhered to Georgetown’s brand guidelines—to make sure that the right colors are incorporated, that the seal is properly represented, and that the correct fonts are used.

Once we had the visual identity committee’s approval, we presented the designs to the advisory group. The idea at this stage was to explore what feelings each design concept evoked; answering questions like “Does this design reflect the Georgetown you know?” and “Which adjectives do you think apply to this design direction?”

Next was user testing. This step will be familiar to those of you who stayed updated while we were reviewing wireframes. This time, the UI/UX-oriented members of the redesign team spent two days with students specifically (or target audience), asking them what they thought about the design concepts.

This month, it’s up to us to gather feedback on these directions—our own feedback as well as our advisory group’s and the students’—to determine which we like best and what should be refined. In the background, we’re also continuing to plan for the build: reviewing functional requirements and exploring questions about integration, SEO, and content.

User Testing Recap

Laptop computer displaying a black and white prototype in a web browser.

From October 3–5, user experience designers from Georgetown’s Office of Advancement and University Information Services conducted 20 hours of individual user testing sessions. Nineteen people participated in the study representing undergraduate and graduate students, prospective students and parents, alumni, faculty, and staff.

Sessions followed a test script prepared by Digital Pulp, which focused on the organization and language of the site. Participants were guided through a black-and-white prototype of the University’s new website and asked questions to elicit specific feedback on the prototype’s five pages and the global navigation. Overall, users reacted positively to the prototype and provided valuable feedback on areas including the site architecture, language, representation of the breadth of Georgetown’s activities and people, balancing interests of graduate and undergraduate students, and page template design. Findings from this research will inform the next iteration of the site’s structure and content.

A very special thank you to all our testing participants! We are extremely grateful that you took the time speak with us and share your opinions.

Advisory Group Meeting – Sitemap and Wireframes – In Pictures

On September 26, 2018, the advisory group met in a workshop-style meeting to give feedback on the latest deliverables by Digital Pulp. These deliverables included a sitemap structure and three wireframes. This meeting also helped to prepare for user testing that was scheduled for early October for prospective/current students, parents, staff, alums, and other audiences.

Sitemap, Wireframes, User Testing

How do we transition from a Strategy Brief to designing and building a website? The first step is a sitemap. The sitemap helps organize priorities and audiences defined in the Strategy Brief into something more concrete. Sitemaps are interactive tools used during the design process show a quick visualization of a website’s intended structure and page hierarchy. In our case, Digital Pulp provided the first three levels of pages with draft titles in order to approximate the top level navigation. The sitemap is the first step in defining the website’s planned structure, and we will test how the labels and their categories match up with user expectations (more on that below).

A sitemap with a homepage, three categories with subsections, and one content item with no subsections

Source: https://stuyhsdesign.wordpress.com/web-design/sitemap/

Wireframes flow from the sitemap—they serve to answer the question: given these pages, in this hierarchy, how should we present this content to the user? Wireframes are a blueprint of website components that demonstrate the relative priorities of each page’s information and functions. In our case there will be specific, detailed content on the page to validate the proposed content strategy and navigation. Wireframes allow us to get early feedback on the (non-visual) design elements before higher fidelity elements like images, colors, and branding are added. You can think of wireframes like building plans—it’s easier to relocate a bathroom when it’s on a blueprint than when construction is in progress. Similarly, it’s easier to reorganize and reconfigure components of our website when they’re in black and white then when development is underway.

An example high-fidelity wireframe

Source: https://justuxdesign.com/blog/wireframe-fidelity

With the sitemap and wireframes in hand, we’ll move to the next phase: User Testing. During user testing, our goal is to validate the information architecture defined in the sitemap and test language, section headings, and organization of site content defined in the wireframes. To do this, we will conduct about 15, hour-long sessions with people who are part of the website’s target audiences (students, staff, faculty, and alumni). We’ll open these sessions telling participants, “there are no right or wrong answers here – we want your honest opinions. If things are unclear or confusing, let us know. We’re not testing you, you’re testing our work.” Comments and feedback received during user testing will directly feed into next iterations of the sitemap and wireframes.

Illustration of remote user testing with quotes from user stating preferences for Design A vs. Design B

Source: https://uxdesign.cc/best-practices-for-on-video-user-testings-7652cc8e2f9d

We are holding user testing sessions for our prototypes in early October. In order to build a diverse pool of potential testers for both the top tier redesign and other future Georgetown web experiences, we’re actively recruiting GU students, staff, faculty, parents, and friends. Please sign-up via our Google Form to be a tester and help us improve Georgetown website experiences.

First advisory group meeting

Earlier this month, the Georgetown.edu redesign team had its first meeting with our advisory group. Because it is designed to have representation from all audiences—faculty leadership, research, athletics, staff, undergraduate students, graduate students, and so on—this group provides critical feedback and input throughout the redesign process.

During our first meeting, we shared the details of the project timeline and the Strategy Brief. We’re looking forward to meeting with the advisory group about once a month going forward, to keep stakeholders updated on project progress and to collect feedback on certain project deliverables. Our next step is to workshop the site architecture and wireframes that Digital Pulp has developed for us—stay tuned for more on how we test these deliverables.

Overview of Strategy Brief

Digital Pulp completed its first deliverable—a Strategy Brief outlining high-level insights that its team learned during the discovery phase. This document will serve as the base for all future project decisions. The Top Tier Redesign Working Group worked with Digital Pulp to provide edits and suggestions to ensure that the Strategy Brief adequately met the needs of Georgetown.

Project mission

Develop a site that communicates Georgetown University’s passionate commitment to creating a student body “with and for others’ through an emphasis on holistic education, fearless academic and personal inquiry, and social justice, while being fully engaged and woven into the fabric of one of the most global cities in the world.

Differentiators & Attributes

  • Jesuit: Georgetown cares for and develops the whole person and the community is inspired by an urgency and obligation for each person to examine who they are, how their experiences have shaped them and the impact of their choices.
  • DC: ​DC offers the Georgetown community a multitude of opportunities to engage in both the local and the global.
  • Leadership in Access and Affordability: The university represents the gold standard in its work helping first gen students not only graduate, but thrive.
  • Engaged and Accessible Faculty: ​Besides being world class researchers and academics, Georgetown faculty are also very accessible to students and engaged in their development.
  • Commitment to Social Justice: The ​service and social change aspect of the Georgetown brand is important to students—in fact, this focus is often a deciding factor.

The brief also outlined content strategy, creative strategy, and identification of key performance indicators (KPIs).

First deliverable approved

Shortly after stakeholder interviews were completed, we received our first deliverable: the Strategy Brief. In terms of project updates, it’s a relatively small one. The point is not to present new ideas or designs. Rather, the goal of the Strategy Brief is to serve as the “North Star” of the project: to outline the research that Digital Pulp has done and to translate it into clear goals for the project. As we continue our work, the Strategy Brief will be our guide.

And the work indeed continues! Next up, we will review a Messaging Guide, a document that outlines the voice and tone that should be used when writing about Georgetown University on its digital platforms, including key words and phrases. We’ll also use the next couple of months to develop and test the sitemap and wireframes, which are essentially the blueprints for the site menu and page templates. So many more deliverables to come.

Stakeholder interviews

Over the past few weeks, Digital Pulp has conducted a series of stakeholder interviews. Stakeholder interviews are essential in a site redesign process: the process allows content strategists and designers to lead discussions and ask questions about what makes Georgetown different than every other higher ed institution—or in marketing-speak, it helps them to discover Georgetown’s “key differentiators”.

A question the core team gets a lot from the Georgetown community is “have you looked at the analytics for the georgetown.edu site?” Well yes, and they can be helpful, but numbers only tell you so much. These interviews allow us to dig deeper into the human side: What drew you to Georgetown? How do you feel in the Georgetown community? What does living and working in DC mean to you and your Georgetown experience?

With the leadership of the core team, Digital Pulp conducted 20 hours of interviews with more than 100 stakeholders participating. The reflections, comments, and advice of our stakeholders will help guide the strategy for the redesign of the new Georgetown.edu.

Next, the findings from these interviews (as well as other research) will be compiled into a Strategy Brief. Then, the Discovery phase is over and the next phase of the project begins: User Experience Design.

A journey of discovery

We are happy to announce that georgetown.edu is officially getting a redesign! As such, welcome to the first project update, in which we warmly welcome you to the next 12 months of our lives.

Our core team for this project includes folks from UIS Web Services, the Office of Public Affairs, the Office of Strategic Communications, and Advancement. We are also glad to have our vendor, Digital Pulp, as our partner through the content strategy and design phases of the project. Because one does not simply walk into Mordor.

This month, we are entering the discovery phase. For those of you who detest business parlance, that basically means information overload: digging deep into goals, audiences, timeline, and other logistics to make sure that we don’t overlook important details. Above all, it means Gantt charts and spreadsheets.

Georgetown.edu belongs to all of us, so we hope you are as excited as we are. There will be many more top tier updates to come—stay tuned!