Tag Archives: mobile

Designing the responsive footer

We now have a responsive main website. To a degree.

Like everything it is a stopgap measure before we do a full overhaul of the Cooper-Hewitt online – timed to go live before we reopen our main campus (2014).

With the proportion of mobile traffic to our web properties increasing every month we couldn’t wait for a full redesign to implement a mobile-friendly version of the site. So we did some tweaking and with the help of Orion, pulled responsiveness into the scope for a migration of backends from Drupal 6 to Drupal 7.

Katie did the wireframing and design of the new funky fat footer – which you’ll notice, changes arrangements as it switches between enormous (desktop), large (tablet) and mini (mobile) modes.

Here she is explaining the what and why.

Why did you do paper prototypes for the responsive design?

A few months ago I was working on a design for the Arts Achieve website. I showed my screen to Bill, our museum director, to get his thoughts. Bill is a former industrial designer and one of the pioneers of interaction design. The first thing he said was “ok, let’s print out a screenshot.” He then drew his suggestions right onto the printed page. We didn’t really look at the screen much during the conversation. Writing directly onto the paper was more immediate and direct, and made his suggestions feel very possible to me. Looking at a site design on a screen makes me feel like I’m looking at something final, even if its just a mockup. The same thing printed on paper seems more malleable. It’s a mind trick!

Paper also lets me print out many versions and compare them side-by-side (you can’t do that on a single monitor).

Paper also ALSO lets me walk around showing my print-outs to others and ask for rapid reactions without pulling everyone into a screen hover session. This is a simple body/communication thing: when everyone is facing toward a screen to talk about a design, you’re not in a natural conversational position. Everyone’s face and body is oriented toward the screen. I can’t see people’s faces and expressions unless I twist around. When you’re just holding a paper, and there’s no screen, it’s more like a natural conversation.

Post-its stuck to the monitor as a way to quickly agree on our initial ideas

Why do some of the elements move around in the responsive footer? (why do the icons and signups move)

They move around to be graphically pleasing. And to make sure the stuff we wanted people to notice and click on is most prominent.

We had a strong desire for the social media icons to be really prominent. So they’re front and center in the monitor-width design (940px width). They’re on the right hand side in the tablet-size design (700px wide) and in the mobile-size design (365px wide) because I think it looks sharpest when the rectilinear components are left-justified and the round stuff is on the right.

What were the challenges for the responsive design?

We had a really clear hierarchy in mind from the beginning (we knew what we really wanted people to notice and click) so that eliminated a lot of complexity. The only challenge was how to serve that hierarchy cleanly.

One challenge was the footer doesn’t always graphically harmonize with the body of the page, because the page content is always changing.

Another challenge was getting the latest tweet to be clear and legible, but still appear quiet and ambient and classy.

What were some of the things you are going to be looking out for as it the site goes live?

I want to see how the footer harmonizes with our varying page body content and then decide if it makes sense to change the footer to match the body, or re-style the body content to sit better atop the footer.

I wonder if people on Twitter will start saying stuff @Cooperhewitt just because they know they’ll get a few minutes of fame on our homepage. That participation could be awesome or spammy. We’ll see.

I’m really excited to see the analytics. I want to see if this new layout really does boost our newsletter signup and social media participation and everything. It will be super gratifying if it does.

Of course, we’ll reiterate and revise based on all the analytics and feedback.

Teens & Tech Focus Group

On Saturday, at Cooper-Hewitt, we had a focus group with about 20 teenagers to learn how they prefer to capture and create media. The focus group was held jointly by Cooper-Hewitt and the American Museum of Natural History. Our two museums are connected by MacArthur’s HIVE Learning Network, which aims to create and connect informal and formal learning opportunities for youth in virtual and physical spaces.

My group used exclusively iPads– even when other devices were readily available.

Both museums had experienced some digital follies over the last few years in our efforts to incorporate new digital tools into youth programs. From 3G connectivity woes to buggy beta software, these issues are an educator’s nightmare. Any one who has some experience teaching or running programs for kids can tell you that there’s no time for glitches when you’ve got a room full of students and a short amount of time. Stuff has to work, and you want the focus to be on content, not on tools.

Before diving in to a new season of fashion workshops and biology labs with hundreds of NYC teens, both museums wanted some fresh insight on how today’s teens relate to tech.

We wanted the students to get educational value out of their day with us, so we designed the focus group as a typical DesignPrep program, but with some added surveys and discussions about technology. Here was the structure of the day:

1. Pre-Survey for students

2. Cooper-Hewitt educators’ excellent “What is Design” and “Learning to See” presentations.

3. Ready, Set, Design— a hands-on activity to get the group “thinking like designers.” The activity challenges were tailored to the context of Central Park (“I need to find my way around the park efficiently,” “I want my walk around the reservoir to be more fun and interesting,” etc)

4. Announced the students’ challenge– to collect a diverse array data from a given zone in Central Park, identify something in that zone that could benefit from a design solution, and finally present their ideas to the group.

5. “Hardware Buffet”– we put out Android phones, iPads, still cameras, video cameras, notebooks and pens. We observed carefully while the students chose their tools.

6. We split into 4 groups and headed to the park. The students lead their own processes of data collection while Museum staff observed. Staff also carried bags of “buffet leftovers” to allow any hardware swaps along the way.

Collecting photos, videos and statistics in Central Park

7. We returned to Cooper-Hewitt, where the students synthesized their media and created presentations.

Synthesizing multimedia and ideas for a final presentation

8. Presentations, group discussion about technology, followed by an exit survey for students.

Student presentation using Tumblr

9. After the students left, Museum staff completed a survey to record fresh thoughts on the day.

What did we learn? Here are some excerpts from Museum staff’s surveys: