Mapping UX to Design

When we hear the word “user,” we often think about the person visiting at the other end of the screen, or End User. But it’s important to note that when designing web interfaces, long-term success hinges on the careful consideration of two user flows, not only the target End User, but also the workflow of Content Creators who are seeking to connect with them.

To me, designing a website isn’t about making aesthetic choices alone. It is about creating an ecosystem of desired user flows that are facilitated by an interface that supports them, tailored to each party’s needs. Before beginning a wireframe, I set up meetings to ask Content Creators the following questions:

  1. What is the story you want to tell? How do you want to tell that story?
  2. How will this content be created and updated? What does it mean to the staff’s workflow?  (Back End)
  3. What do you want your audience to do? What specific action does the story lead them to do to initiate a relationship? (Front End)

1. Form is the Shape of Content
“Form is the very shape of content.” – Ben Shahn

(Above: Jesse James Garrett, Elements of UX)

Q. What is the story you want to tell? How do you want to tell that story?

For the new YSM website and the forthcoming Collection of Musical Instruments website, I facilitate storytelling by and for musicians. Thus, what I often come away with from question 1 already tells me a lot about what I need to start planning:

  • The stories of our students, faculty, and guest artists have to convey excellence and collaboration at the Yale School of Music
  • The story has to “show” not “tell” – this mean Audio and Video
  • The story needs to attract international music applicants
  • The story needs to show how we are preserving traditions while at the same time innovating in the field
  • The story needs to connect w/ music scholars and enthusiasts, yet also promote audience development in new demographics
  • The story needs to lead to tangible actions that initiate, deepen, and sustain relationships w/ various audience personas

These assessments meant the following:

  • We needed stronger visual content (Photo Library) and audio-visual content (Video Library) to really show the YSM range of experience
  • The website’s page types have to be structured in a way that prioritizes video and image-based hooks, are anchored by clear calls to actions, and that locate text-based reading lower on the page or deeper in the site when there is already an investment of attention from the user
  • Content creation is based on the timing of concerts, admissions dates, as well as important events like exhibitions and master classes. Thus the content workflow has to be scaled in a way that makes it easy for staff and their student workers to update and customize.
  • The website user interface will need to integrate third party systems as seamlessly as possible

2. Organizing Content for New Media

Q. How will this content be created and updated? What does it mean to the staff’s workflow?

(Above: Workflow documentation from a UX project to improve a handheld device.)

Based on these assessments, there were many things that we as an organization had to do even before getting to the technology. When I started at YSM, our communications setup was primarily a print-based model. We did a major re-organization that now locates a music writer, a videographer, and new media designer within one Communications Office.

  • Video Library: Because audio and video is so critical to conveying the musical excellence of our School, our videographer, Austin Kase, also works closely with our award-winning Recording Studio to not only stream concerts, but also create interviews, behind-the-scenes looks at upcoming music productions, as well as admissions video portraits of each of our music studios from flute to percussion.
  • Photo Library: For the past five years, I also started art directing photo shoots with very specific shot lists to convey visual themes calibrated to our target audiences. Art direction also includes shooting images in a variety of web aspect ratios, to account for typography, and as video cover thumbnails.
    • Music Technology and Yale’s Resources for Musicians
    • From Studio to Stage – portraits of young professional musicians
    • Mentorship at YSM – portraits of one-on-one music lessons in various studios
    • Class Collaboration – portraits of music classes and group lessons
    • YSM Ensembles – portraits of our maestros and artists on stage
    • YSM Campus as a Conservatory within a World-class university - environmental photos
  • Writing for the Web: Our team also focused on compressing writing practices for the web – less text-heavy, stronger titles and lead-ins, as well as text tailored by section to appeal to the reader, be they a prospective student, a concert goer, or a music scholar.
  • Transactions: The new website was also an opportunity to inventory the various transactions that our Admissions, Registrar, Alumni Coordinator, and Concert Office needed to have w/ their audiences:
    • Online Forms – which remain in print, which are moved online? Who is tracking, analyzing, and archiving the forms? What system is being used and is it easy and learnable?
    • Ticketing – how do we optimize and integrate concert ticketing, and create a workflow that can be supported by Box Office personnel?
    • Admissions – how will admissions applications be processed? What messaging will increase applications?
    • Giving – where do donors go to give? How can stories be positioned and online transactions optimized to increase a sustained donor base?

After a general inventory of content, it’s important to then ask the following questions in order to create the Content Creator workflows.

  • How many distinct user groups do we have? What levels of computing need to be considered?
  • What computing environment do they use? This means surveying Mac/PC platforms, Browser preferences, server environments, image and video editing practices, and asset cataloging practices. It is very important to map out their daily practices and to identify ways they can be integrated with web content creation either technologically (developing the technology) or through workflow management (asking staff to develop new workflow steps).
  • How many steps will it take to get the content online and who needs to be involved? How can we streamline it? For example:
    • Video: Permissions > Capture > Edit > Approval > Titles & Thumbnail Image > Upload to Vimeo > Metadata > Link by URL
    • Photo: Permissions > Capture > Edit > Sent to Designer > Contextualized for Web > Upload to CMS > Specify crops for various sizes > Add Metadata > Link by URL
  • How easy will it be to update the page content? Is there a built in approval system that sends notification for review? Can one update from home our outside the Yale Network? Are there software requirements? For YSM we found that platform-agnostic web-based interfaces that were very shareable and that played nice w/ a large range of computing environments and third party services offered the best opportunities to expand our Content Creator base within our staff.
  • How many page types need to be designed to accommodate the various kinds of content? How easily can one change the page structure or page type without any coding or advanced knowledge?
  • What kinds of affordances are built into the back end that helps users know where to add content? Is the back end customizable and what kind of ongoing development support is built in to ensure this?
  • What is the plan for error management? What system is in place for End Users to report errors? What process is in place for Content Creators to address errors in a timely and practical manner?
  • How do we organizationally structure a strong collaborative space for the Designer to work closely with the Developer to ensure both function and visual design are of the highest quality and usability? Great web design cannot exist if either party is missing and if both are not united by their users’ needs first and foremost. This triangle relationship is what enables successful UX design.
  • Is there a backup plan for updating key content areas when key staff are out of the office or leave the organization?
  • Before the launch of a website, what training needs to take place to increase the number of content creators in an organization? What kind of documentation will be made available?

(Below: Front end view of Piano landing page, followed by a back end view of the page in the slider section where the main story headlines can be updated and linked to large images or videos.)

The answers to these questions can help inform choices in digital tools, vendors, and services. We have to build around the way people naturally work as much as possible and then adjust according to constraints, be they financial or logistical.

3. Designing Relationships

Asking these questions also goes in tandem with creating page wireframes for the front end experience. For the End User, I think about each web page as a step in creating a sustainable relationship. I don’t want them to get overwhelmed by many things to read, or too many choices to make at first glance. Each area should have a targeted set of actions that each story and visual cue tries to encourage. By asking these questions, the page hierarchy and content priorities will begin to take shape.

  1. What does kind of storytelling does this page need to do? (Live Stream, Video, News Article, Facts and Information, etc.)
  2. What is the main call to action? What are the secondary actions?
  3. How does the story support that action?
  4. What other supporting content should be here?
  5. What on the page should be shareable?
  6. How often will content change? What will bring the user back here?
  7. How many steps does it take the user to arrive and finish an action?

UX begins by asking both Content Creators and End Users a lot of questions and then mocking up these flows as specifically as possible. I usually use InDesign but many UX practitioners also use OmniGraffle or Illustrator to create user flows and wireframes. It is critical to map out each screen that an End User sees as well as another set that shows how Content Creators can curate their content. I create user flows simultaneously w/ page type wireframes and look at them together.

Remember that nobody gets UX right on the first try. I don’t want to go to design comps without doing at least 2-3 iterations and Q&A sessions with the users and having them point out the gaps where the process is in risk of delay or error.

Attached are some UX deliverables that show the thought process we are undertaking w/ the Collection of Musical Instruments for their website, which will be integrated with a discovery site created in partnerships w/ YDC2 to catalogue all their instruments online. When surveying the curators about the most ideal way to present their instruments online, we thought about how metadata would be mapped to the page as well as the various image viewing features they wanted. In order to set up an infrastructure that would index by object and show multiple views per object, it was clear that we will need to adjust the curator work flow so that the staff is entering the right kind of metadata in fields that can be used to dynamically populate the pages for each object.

(Above: Rough page wireframes drawn up after discussing page types w/ curators. The wireframes identify metadata that needs to be mapped to the the objects as well as how content is aggregated and prioritized. They are sketched on a 960 grid and also calculate image aspect ratios based on the Collection’s image holdings. From this, Photoshop design comps will be created that will then specify font, color, and graphic choices.)

Finally, what we learned from our web project is the importance of TESTING. There are only so many things one can anticipate from mock-ups. While testing user flows we ask Content Creators and End Users to test the pages. At the same time we also keep a developer on retainer in order to address needed changed in the web infrastructure to address any gaps. At the end of the testing period, the goal is to have a web foundation that can support and be scaled to our content in a way that holds up over time.

Since launching the new YSM website, we have already noticed a dramatic difference in our staff workflow w/ the new infrastructures in place:

  • Number of Content Creators went from 3 to 12, spanning at least five different YSM offices, and centrally approved by the Communications Office.
  • The learning curve and requirements to make changes to the website has dramatically been reduced: No coding required. No need for proprietary software. No platform preferences. Just a web connection and a good story.
  • The time it takes to post and propagate content to the website has been dramatically reduced.
  • Better error management reporting has improved staff response time.
  • Moving from a static website to a CMS allows the designer to dedicate more time to new projects such as digital publishing and mobile design.

As far as best practices on campus, I’d like to ask if we can consider having groups like General Assembly come to Yale to do workshops on UX design for web and mobile devices. I highly recommend General Assembly’s workshops as they offered very concrete ways to put UX principles into daily design practice. Who’s in?