ASU Now Website Redesign

Project Overview

When ASU chose Ethology to redesign their news and information site, ASU NOW, they had just been named the #1 “most innovative school” in the nation by U.S. News & World Report. But the ASU NOW website didn’t reflect this, and they knew it.

Their goals were to:

  • Refresh the look and feel to represent the growing prestige of the ASU brand
  • Modernize the design to be mobile-responsive and “mobile-beautiful”
  • Develop rich storytelling capabilities, as seen on The Atlantic and VOX
  • Create easy social sharing opportunities for readers
  • Make it easier for target audiences to navigate and enjoy content in general

The design phase lasted six weeks, followed by an 8-week web dev phase (four sprints), give or take a few extra cycles for client reviews, changes, and approvals.

asu-logo-sm

https://asunow.asu.edu

My Role 

I was assigned to the ASU NOW redesign as a UX Strategist. At Ethology, UX drives foundational research, site architecture, and UI wireframes. They also participate in design & dev reviews, client meetings, and milestone checkpoints.

I worked as part of a cross-functional team that also included SEO, content strategy, visual design, and development. It was important for all of these parts to be in synch, which meant a lot of close collaboration throughout the project.

Here’s the top-level project roadmap:

  • Client kick-off meeting
  • Business goals discussion
  • Empathy mapping
  • Needs / benefits analysis
  • Heuristic review
  • Competitor analysis
  • Site map
  • UI wireframes
  • User testing
  • Visual design / development hand-off
  • Final review, delivery, & launch

Client Kickoff Meeting

The project began with a client kickoff meeting, on-site at the ASU campus. At Ethology, we use this meeting to establish team roles, get a clear vision on business goals and priorities, and deep-dive on target audience groups.

As UX Strategist, I helped lead the business goals discussion as well as the audience analysis, empathy mapping, and needs / benefits activities.

By the end of this full-day meeting we had aligned on a clear vision for the project and knew exactly who our target audiences were and why they come to the site.

Sample artifacts from the client kickoff meeting:

Empathy Mapping More
Empathy map, use cases, and needs/benefits analysis for “Professor Bob”. Mapping business goals to target audiences is a primary objective in the client kick-off meeting.

Research & Analysis

With the client kickoff meeting complete, foundational research began in ernest. I spent just under a week building personas to capture website goals & needs from a user-perspective; mapping & auditing the existing website to understand current state (good or bad); and reviewing competitor websites to see what we could learn by their example (again, good or bad).

Outputs included:

  • A prioritized list of target audiences
  • User Personas w/top user tasks and information needs
  • Heuristic review of the current ASU NOW website
  • Social sharing and storytelling examples from top news sites
  • Design patterns on other university news sites that we may want to follow
  • ASU design standards to follow in the redesign process (requirement)

With this work done and reviewed by the client, it was time to move on to design.

Sample artifacts from the research & analysis phase:

User Personas LG
ASU Now Personas: Understanding the user’s needs, top tasks and usage context was a critical first step in the redesign process.  (Visual design by Kristen Zirkler)

Design

The first step in the design process is building the site map. Having this in place guides global navigation and helps you envision workflow, CTAs, and other task-based actions. Omnigraffle was my tool of choice on this project.

Next up are the UI wireframes. We use these grayscale designs early on A) Because they are faster to produce, and B) To help the client focus and sign-off on information design first before getting into the visual / graphic design stuff. Sketch is my tool of choice for wire framing. I love Sketch!

We also use InVision to share the designs with the internal and external (client) review teams and get comments / feedback.

Sample artifacts from the design phase:

Sitemap
ASU NOW Sitemap including global header and footer.

 

Homepage-Wireframe-01 Copy
ASU NOW Wireframes: This is the ‘skeleton’ layer where the backbone of the UX is formed. The goal is to get client input on information design, workflow and key interaction points before moving on to the visual design work.

User Testing

We often use online testing tools such as VerifyApp or User Testing.com to get feedback, but on this project I was able to go on-site to the ASU campus and test in-person with real students, faculty, and administrators. I tested the early wireframe designs then followed up later with beta testing, leveraging the client team.

Development & QA

At Ethology, UX hands off approved wireframes to visual design who does the color mock ups. Next they go to development to build and test. My role is to advise on interaction design (navigation, workflow, controls / behaviors, etc.) and be a reviewer / tester throughout the process.

Launch

The new ASU NEWS site was launched in Q4 2015. You can check it out here: https://asunow.asu.edu

 

BEFORE

Original site, pre-Ethology redesign.

ASU News (20150707)
ASU NOW ***before*** the Ethology redesign.

 

AFTER

Visit www.asunow.asu.edu to see the live site.

ASU Now - AFTER

Advertisements