Interaction Design
Audience
Final user: conference attendees; Stakeholder: conference organizers.
Team
Visual designer, front-end/CMS developer, myself as “UX Lead”
Challenge
Web presentation of details for a 4-day conference with over 130 presentations
techniques & tools
Imagined use case; pen and paper sketching; discussion
outcome
Design of web site reflects goals set out for a mobile experience.
The Problem
Conference organizers presented our design team—visual designer, front-end/cms developer and myself as the generically-titled “UX Lead”—with a giant schedule: over four days, the conference comprised over 130 short presentations as well as keynotes, concurrent workshops, breakfast, lunch and dinner, banquet and poster sessions. For all the presentations and keynotes, individual presentation titles as well as the names of presenters were to be visible on the web page. A print version of the schedule ran to 18 pages in length.
Research and Ideation
I explored a number of other conference websites to get ideas and to make sure that we weren’t going to re-invent the wheel. After all, Jakob’s Law of Internet User Experience tells us that hewing to conventions users already know will provide them a better experience.
I proposed that we imagine a conference attendee trying to make use of the web site on their mobile device while attending the conference. Their needs would include:
- multi-level view of the agenda: Overview, Day, Keynote, Session
- location information
- speakers and presenters
- “Where am I supposed to be next?”
- “Will I be interested in this?”
Sketching to Explore Solutions
Using a mobile device template (on paper) I sketched ideas for a narrow-screen presentation at several levels (for instance, ‘overview,’ ‘day,’ and ‘keynote’ as well as ‘sessions overview,’ ‘sessions’ and ‘posters detail’). These sketches were not at all about design—although they have a sprinkling of the gestalt principle of proximity. They barely qualify as wireframes, but they are enough to make a point and get people talking about what is important to the finished design.
While it’s tempting to make a visually beautiful demonstration of one’s ideas, and pretty easy to do with today’s digital tools, it is really still faster to grab a pen and paper and draw, draw, draw. The result gets the point across and starts discussions. The low-fidelity nature of a hand-drawn sketch forces the team and stakeholders to focus on content and intent rather than presentation, and gives them permission to criticize ideas without fearing that they are wasting effort made by the person who created the sketches. “Kill your darlings,” we say, and that is much easier to do when your invested effort is low.
The sketches I created, and probably more importantly the proto-tasks implied in my imagined use case were the basis for discussions amongst the team and with various stakeholders.
Outcome
There was not time or scope to truly build a mobile-specific website or application for this conference. Fortunately the content management system used for the overall site had decent controls for responsive behavior. The layout of the finished site shows the influence of the initial sketches I drew.
For instance, the image below captures a single day’s page at phone width; compare it to the center sketch and think about the postulated user needs.