Our Blog

Related Posts

The easiest and most efficient way to stay in sync with your team or your clients is to represent and share an idea with a sketch.

Pixo and UIC worked closely to quickly launch a new, refocused uic.edu and completely rewritten content. Learn from our success with these 10 ideas.

A UX expert reviews the ways websites and apps either feed into a listener's insatiable audio habit or prompt them to turn the 'dial.'

Popular Tags

Recent Comments

Brendon Carvalho
4.26.2018 - MSSQL Long Text Field Truncated In PHP
Hire Volusion Developers
4.7.2018 - Drupal 8 Roadmap

Lindsey Gates-Markel

In August of 2015, Pixo started the discovery phase of redesigning the website for the College of Applied Health Sciences (AHS) at the University of Illinois Chicago. By the time we wrapped up Phase I of the project, Pixo’s director of UX, Melinda, and I felt like we knew the college really well. We’d talked to about 175 people associated with AHS through questionnaires, workshops, and a lot of interviews. Along with a team from the college, we’d identified business goals and defined a core strategy for the new site. We’d toured college buildings and chatted with the dean in his office. We’d compiled what we knew in an 20-page research brief to gut-check our findings with the stakeholders.

And finally, in late December, we presented a comprehensive wireframe and main design elements, along with a full homepage design, to a group of program directors, the college dean, and other stakeholders.

The AHS project was my first opportunity to work on a homepage design, and in the end, when it was my turn to list my proudest moment of 2015 at our year-end Pixo staff meeting, this is what I talked about. Not only was it a truly collaborative work, it had to serve as proof that we really understood our client, their story, and their audience.

The plan 

For our first homepage brainstorming session, Melinda, graphic designer Tyler, and I met in Pixo’s whiteboard room so we could draw and write our hearts out. Through the discovery phase, we identified the target audience for the website as mainly prospective AHS students, and because analytics show that many users Google straight to the pages they want, we assume many of the homepage users will be wanderers, curious as to what the college is all about. The college’s programs and faculty, etc., would be fully fleshed out within the rest of the site — the homepage needed to touch on only a few important themes in an exciting way.

To keep the interest of the potential students, we decided to create a narrative page, one that compels users to keep scrolling. During our initial meeting, Melinda compared the narrative concept to a slideshow, and that stuck in my mind. We made a list of all the possible AHS themes we could explore on the homepage:

AHS homepage 1

(“WOW a lot of stuff happening” is all me, by the way. Is there a Pulitzer for content strategy? Just wondering.)

After we’d talked through some themes, we sketched out some rough ideas for how they could work visually. I wish I could say we collaborated equally on this, all of our markers flying, ink everywhere, but for the most part, I watched Melinda and Tyler work. Though I’m new to content strategy, I come from a creative writing background, and those skills tend to inform each other. But translating a narrative site plan into a design with interactions and recurring visual themes is unfamiliar territory altogether. It was super thrilling for me to watch design ideas get sketched out, no matter how general they were at first:

AHS homepage 2

We agreed to let the ideas soak for a while and to meet again once we had some actual sample content to inform the design. That night, I spent some time looking through good examples of parallax design to see how other sites used narrative form.

The story

The next day, I went through our list of themes and picked six or seven that stood out as not only essential to the AHS story, but also useful for potential students. Thwarting my first instinct to hyperventilate about having to showcase a bunch of Very Important Content all on one page, I leaned on Anne Lamott’s adage of “shitty first drafts” and created a Google Spreadsheet with one slide for each theme and pounded out, well, something you might call … a shitty first draft.

After finishing the draft, I spent several hours sitting with Melinda, going over the slides together and making painstaking edits. We wanted to use as few words as possible to get the point across, so each one had to be just right. With the beloved Synonym Finder in hand, we went through each “slide” and replaced words that didn’t hit their marks while throwing out what just didn’t work. We ended up “pairing” like this a lot throughout the process of improving the AHS wireframe and homepage design in the last few weeks before presenting at the college. It required vulnerability on our parts, as we tossed out half-baked ideas or weak phrases, but overall we floundered less and ideated faster.

The collaboration

Melinda and I passed on our rough text to Tyler so he could start thinking about how to incorporate the ideas into a design. A few days later, the three of us met again in the whiteboard room to brainstorm further.

AHS homepage 3

Above is the draft of the “CHICAGO!” slide Mel and I gave to Tyler …

AHS homepage 4

And here’s the design that came out of our second brainstorm. Looking back, this is the point at which our “CHICAGO!” portion began to transform into our “Opportunities for students to achieve” portion. The scattered lines and circles? The unmistakeable Chicago skyline. And the three blue arrows mean that in this meeting, we decided to highlight those opportunities in three categories that would eventually be interactive for users.

In other words… behold the genius lurking within.

The ideation (and the next… and the next…)

Over the next week or so, we continued to iterate on our initial concepts and design. We shared the text with our team at AHS, who suggested some changes and provided some examples we could use. We took a “final” (for now) look at each slide and made sure the calls to action associated with each made sense. Tyler got busy in his Sketch app and created each component based on what we’d come up with on the whiteboard, implementing text and concept changes as they rolled in. But many of the concepts we’d started with remained the same.

AHS homepage 5

Above, for instance, you can see three iterations on the slide from above. At the top are my initial notes; next, what Melinda and I worked out together; and last, our final (for now) text following the collaboration with Tyler and feedback from our team at AHS.

AHS homepage 6

This is how the “Opportunities for students” component was realized in the design. When a user mouses over each of the circles, a line of text appears describing the on- and off-campus opportunities for AHS students; “Study it” reveals “Join our acclaimed programs led by skilled educators and researchers,” for instance. We knew we only wanted to use short sentences in the descriptions, so they lived as lorem ipsum in the design for a week or so, and I filled them in with real (if temporary) content in the days before our presentation. With Tyler and I working together, we managed to present the design without any lorem ipsum, so the stakeholders could get a really clear picture of what each component was designed to express.

We continued to share changes with our AHS team over the next few days, showing the Sketch file over our GoToMeeting sessions and incorporating their feedback. Within a few weeks, we went from writing shitty copy about broad ideas in a Google Spreadsheet to presenting a beautiful, effective homepage to a very happy bunch of stakeholders.

 

Related Posts

The easiest and most efficient way to stay in sync with your team or your clients is to represent and share an idea with a sketch.

Pixo and UIC worked closely to quickly launch a new, refocused uic.edu and completely rewritten content. Learn from our success with these 10 ideas.

A UX expert reviews the ways websites and apps either feed into a listener's insatiable audio habit or prompt them to turn the 'dial.'

Recent Comments

Brendon Carvalho
4.26.2018 - MSSQL Long Text Field Truncated In PHP
Hire Volusion Developers
4.7.2018 - Drupal 8 Roadmap

Interested in working with us?
CONTACT US