The REI 1440 Project: Reflections on developing the user experience
I wanted to take some time to discuss a project that I worked on and am particularly proud of: The REI 1440 Project.
Outdoor clothing and gear retailer REI is one of our clients at the ad agency where I serve as a UX strategist: BBDO Atlanta. The 1440 Project is a desktop, mobile and social experience that we helped conceive and build for REI. It launched on November 26, 2012.
What is the 1440 Project?
It's a community celebration of every single minute spent outside, a minute-by-minute photo-based 24-hour timeline. Outdoor enthusiasts are invited to help fill each and every minute of this “Virtual Day” (all 1440 of them) with photography representing their collective passion for the outdoors. Submitted photos are placed in the timeline based on the time of day they were taken.
Some of the cool features of the experience:
The site reads a photo’s metadata to ascertain what time it was taken and where. The photo is then placed into the timeline accordingly.
Users can create a profile and can personalize their own timeline of photos to share on the site.
The site also facilitates the creation of customized timelines based on location (for instance, Mount Rainier National Park, or Anchorage, Alaska), activity (like, say, canoeing and kayaking) and description (waterfall photos anyone?) tags.
The UX thinking behind the 1440 Project
There were a couple insights that led us to the 1440 concept:
REI members love taking and posting photos of themselves enjoying the outdoor activities they love.
When most recent digital devices are used to take a photo, more than just that photo is captured as stored - along with the image, most digital devices also store information about the device used to take the image, when that image was taken, where it was taken, etc. The information is (in most/many instances) passed along with the digital image itself when that image is copied, shared, posted to a website, etc.
Those two thoughts got us thinking ...
What if we COULD create a "virtual day" showing, minute by minute, how REI fans and other outdoor enthusiasts enjoyed and expressed and captured their love of outdoors?
With the 1440 Project, that's what we set out to do.
User Experiences considerations and challenges
One of the interesting challenges we had to address was the fact that the meta data that is stored along with a photo differs, depending upon the equipment used to snap the photo, and how a photo is stored or uploaded online. For instance, if you take a photo with your iphone, then the time and location (lat-long) where that photo was taken IS recorded. (Nondigital devices, of course, do not record this data.) If you upload your photos to iPhoto or Windows Live, that meta data is preserved, but if you upload your photos to, for instance, Facebook, then (although you can manually enter the time and data of photo capture as you're uploading) Facebook records as meta data the time the photo was uploaded to Facebook, not necessarily the time when that photo was taken.
It can get tricky. And part of the challenge on the back-end side of this project's development, was figuring out how to read as much meta data as we could - and ensure its accuracy - in all of the different ways we wanted to allow people to contribute photos.
And we wanted to allow people to contribute photos to the site in as many different ways as possible. We wanted to incorporate ways that people were ALREADY sharing photos online, and make the 1440 Project experience as simple and enjoyable as possible.
And those were the user experience considerations that drove our thinking.
Simplicity - We wanted it to be easy for users to grasp what this project is, easy for them to find and view photos, easy for them to submit their own photos. We wanted the steps to be simple enough as to not "feel" like steps and an experience that would guide a user through itself without feeling obtrusive or heavy handed. We wanted shorten load times as much as possible, while still delivering an experience that displayed the breadth of photography and images that this project lent itself to.
Flexibility - We wanted an experience that users could explore and enjoy however they wished, wherever they wished - on a destination microsite, on their mobile device, or in the social space. We wanted to provide as many ways as possible for people to contribute their own photos, and to share out images and collections of images.
To that end, photos can be uploaded to the site:
A) via Facebook
B) directly from your desktop, mobile phone or tablet or
C) by adjusting your settings to sync your Instagram account and tagging photos with our official #REI1440Project hashtag.
The 1440 Project mobile experience
And users can share the site or images from it using
A) Facebook
B) Twitter
C) Google+
D) Pinterest
E) Tumblr
F) Via Email
G) Via a direct link
Enjoyable - We wanted the site to be easy to search and navigate. We wanted to capture as much data (time, location, etc.) as possible from each photo submitted, and then reveal that data to the user as the photo was being added, allowing you to change or edit any piece of data along the way, and add more information to flesh out the photos story, should you wish. We wanted to be as transparent with users' data as possible, but we also wanted to construct the experience so the process of adding a photo was as much -- no more -- about discovering facets of that photo's story as it was about the mechanics of uploading a photo.
Natural - We wanted to incorporate behaviors that users were already exhibiting online, and let users search for, view, like, share and submit images (and collections of images, which we've taken to calling "timelines") in ways that they were used to. We wanted people to be able to participate in this experience without thinking about what they were doing. Ideally, the site would be about viewing these amazing photos and submitting your own, not about the process you were going through while you were viewing and submitting photos.
Adding an image to the 1440 Project
Social by Design -We wanted to make sure the experience took into account how users were already sharing and commenting on images in the social space, and allow users to share images and timelines however they were most comfortable. Our first reaction on seeing photos taken by REI members and employees was to show them to someone else (The "you have to see this" effect) and we wanted to make sure the 1440 Project experience facilitated that reaction.
We also wanted to make sure that this experience took into account REI's existing social media channels - The REI Facebook page and Pinterest boards not the least of those - and provide something that followers and fans of those channels would want to see (and share) as well.
1440 Project shares on Pinterest
http://pinterest.com/source/rei1440project.com/
Beautiful - We already knew that REI employees and members were taking some amazing photographs of their experiences, and a challenge from the design end of the UX design spectrum was how to do that photography justice and create an experience that worked as a great canvas for all of this magnificent images.
There's a lot going on with this site, and, in my opinion we got a lot of things right.
All of the user experience considerations we worked through helped us arrive at an experience that is beautiful, enjoyable, simple, social by design, etc.
And a large part of the credit for that needs to go to our design and development partners on the project: BBDO Atlanta worked with digital design firm
to design and develop the site.
One of the things that was interesting to me about working with Resn on this project was that the lead designer and the UX person working on this project was the same person - Resn lead design Franc Cheetham.
I started wondering how much of an impact that fact alone - the ux designer and the design designer being the same person - might have impacted the success of the site. A good part of my job is listening to and taking with designers, and communicating or working through user experience/interaction concepts to design teams. What if - I wondered -- all of that communication took place inside the same person's head? It was thoughts like that that prompted an email exchange between myself and Franc - an email exchange I'm excerpting a bit of here ...
... I just wanted to say Kudos and thanks for all the UX and design thought you put into the 1440 site. ... The site has certainly met and exceeded our expectations. ...
The site works well - it's engaging; it's easy to use; it's compelling; there are some AMAZING photos that have been contributed. And I think that a lot of the credit for that is due to the care and attention paid to the UX of the site - and how the UX and design of the site work together.
I was thinking about that, and I was talking to one of our designers here, and got to thinking how hard that hand-off from UX person to designer can sometimes be - you try to include everything in the documentation your prepare, you try to walk them through the decisions that were made and why, but there's always that your vision/their vision gap that exists, no matter what you do. I'm thinking that one of the reasons that 1440 works as well as it does is, perhaps, that our UX designer and our designer-designer were the same person.
I'm always trying to think of ways that conversation/hand-off can be better or made more seamless, and so I wanted to ask you - are there conversations that your UX self has with your design self? What are the ways that your UX thinking informs your design thinking? Any tips for how I might communicate UX thoughts or principals to our designers?
Harley
Yes - we've also been pretty surprised at the results. I think the attention we put into the upload process has really paid off, the ease of adding photos has made it so addictive to use. I think everyone should be commended on this, it was truly a team effort.
So, yes! We're also really familiar with that question you mentioned with the IA to design process.
In my experience the biggest gap is like you said, making sure that all team members (IA, design, producer, strategist and developer) share the same objective and vision. How that's translated is usually through clear goals and objectives backed up with benchmark examples of other experiences that do it well and insights and best practice.
In saying this we often come to terms with a lot of the issues as the project progresses in to the design and development stages. It's still surprising at how many times major decisions are made late in the development stage. Either through client request or technical reasons.
Therefore the designer takes over the role of an information architect or experience designer as the project progresses. So in my view you need to provide as much information and tools for the designer to carry out this into development as you can. While checking in and providing feedback as the project moves through. It's really important that the designer has a strong understanding of all the objectives and behaviors of the site from every aspect. It is definitely 2 hats like you say. As a designer, I consciously challenge the IA and look at ways to improve and optimise the experience while still keeping to those main objectives.
At Resn, I try and get all our designers to produce the IA, this is usually great for small scale projects. There are some areas I think that this falls down. ie: When you have a complex login system and need to cover off different user profiles. Designers tend to keep a distance to details such as these. We try and look for designers who have had development experience when we hire, this is super important when it comes down to building something that works well.
Try and bring your designer in to the early stages and work through some of the initial objectives together.
Provide clear userflows and cover off all user profile scenarios so your designer can see every possible state of the site.
This may even involve your designer mocking up some key screens or showing some R&D.
Make sure you provide clear and meticulous wireframes, every element is present on the page. Therefore leaving it to the designer to improve and optimise.
Keep in the loop and support your designer throughout.
Keep the project focused and not introducing new features that don't support the key objectives and concept of the site.
Offer ways to improve the designers developments.
Question every interaction
A timeline of my favorite photos - http://www.rei1440project.com/#users/harley.jebens/favorites
This was great insight. I want to share some of this thinking with members of our design and development teams. Some of the things I want to start beefing up as part of the UX/IA practive here are:
Doing some sort of thorough benchmark best practice review in conjunction with the creatives working on the project, maybe even blowing that out into examples of specific functionalities (practices to keep in mind with creating an account, logging in, sharing, etc.) – trying to think of ways to impart/reinforce that interaction design-thinking with creatives who more often are thinking either big picture/idea and/or “look and feel.”
Still thinking through this idea and what it might be, and whatever I am thinking now is certain to evolve as we get into the demands of the next project and I think I may try to chat with Chris Cavalieri and Cabot Norton (the art director and ECD, respectvely, at BBDO who worked on this project) about this idea, as I know you bounced a lot of site examples back and forth to each other as this project was kicking off. I’ll be happy to share with you whatever I come up with here, once I come up with it …
I think we need to beef up our user profiles and scenarios – something we can always come back and benchmark our designs against. We do a bit of this, but I’m thinking this should be as much a part of our UX deliverable process as site maps and wireframes – currently it is not.
This is all great stuff, keep me in the loop with developments. I'm pushing prototyping and prevising a lot more at present. For a recent pitch we sat as a small team and sketched out the entire site experience and mechanic and then designed static screens, a working prototype and animated previs' all in one day. It was a a great first pass at a site and it was really helped by having all key team members sitting around discussing the project from strategy to build.
There's definitely no replacement for having team sit around a table to bash out ideas. At least as a starting point as the project will evolve with a more informed path of decision making. I think that considering the mandatory sign in and share components are really important to support the big picture idea of the site.
For REI it was more: how can we make it as simple as possible to sign up and add/share photos. We always referenced back to this mantra throughout. Not putting these into the picture early on can really let down a site's potential. Anyhow, let me know if I can add anything else to your research?
Another favorite image from the site.
I love this site, and am really pleased that it has come together as well as it has. Internally, we're very proud of it. The client is pleased as well.
And users are also having a lot of fun with the site.
I’ve been sharing the 1440 Project with lots of folks in my network – people I know who are into the outdoors or photography or both. Here's one of the comments I received back ...
“The REI site. Awesome (with way too many exclamation points!)!!!!!!!! As you may or may not remember, I'm more of an indoor girl. I like to view beautiful scenery from the couch looking out through a large plate glass window. And when I do venture out, I likes me some cement. But looking at all these magnificent photos, taken every minute in spectacular settings by people looking like they are having so much fun, is by far the most compelling reason I've ever seen to get out off the beaten path and explore some real Mother-nature-made nature. Wow - great job, all!”
It's also nice that the site has started to pick up some industry accolades as well.
The FWA Site of the Day - January 29, 2013
The FWA Mobile of the Day - January 29, 2013
Smashing Awards Designs of the Week - January 20, 2013
Awwwards Site of the Day on January 7, 2013
Fast Company - How REI Put a Bow on Social Marketing and Wowed Customers - January 4, 2013
Design Links Site of the Day - January 1, 2013
CSS Awards Site of the Day - December 20, 2013
Check out the site and please, let me know what you think.
http://www.rei1440project.com/
