Last week I was part of a small team at Behance responsible for launching a redesign of the 99U website. I was lucky enough to have the opportunity to take on this redesign as my first project at Behance, and am encredibly proud of how it turned out. It is the first fully responsive website the team at Behance has produced and is full of amazing content from the 99U editors. I’m working on putting together a post on the process that went into the site, but until then you can read this short description of the redesign.

This site wouldn’t have been possible without creative input from Matias Corea and Scott Belsky, the amazing developers John Refano and Jackie Balzer, illustrations from Oscar Ramos Orozco, and the vision of editors Jocelyn Glei and Sean Blanda.

I also feel extremely honored to be featured on the masthead of the new site.

Check out the new responsive 99U website here.

This project was a redesign of TreySongz.com, one of the most trafficked websites for Atlantic Records and the first responsive website for Warner Music Group. The site was built by an external developer, another good reason to keep the conversation design focused. I hope showing a real large scale project helps take some of the fear out of responsive design while representing the challenges of responsive design in a realistic manner.

To view the finished designs check out the full project on Behance.

Overview

Trey Songz was the first Atlantic Records artist to get a separate mobile website nearly 18 months ago. Mobile traffic had grown quickly since then and we needed a new mobile experience with the same features as our desktop website. We already knew maintaining a separate mobile website wasn’t a scalable solution.

Our goals:

1. All content from the desktop site should be available to every user regardless of device. While there should be different ways to navigate content on mobile, we didn’t want anything to be inaccessible just because you were on a phone.

2. To think mobile first, but realize desktop is and would continue to be the majority of our traffic. The average lifecycle of a music website is less than a year – realistically not enough time for mobile to catch up. The desktop experience couldn’t suffer.

3. To create the best possible interactions for each device. For example, long scrolling areas on the desktop would become horizontal swipe enabled sliders on mobile devices. We also designed the footer navigation to show additional content on click thereby removing the need to load separate landing pages on mobile devices.

Planning

The first step I take with any website is a content outline. This can be anything from a spreadsheet breaking down every element on every page of the site, to simple annotated wireframes. For TreySongz.com, I worked with digital marketer Michelle Cranford to dive into who Trey is as an artist and where he was in his career. We made a decision to focus on his new music and videos (the site is being launched just before his record) as well as highly visual content like photos, minimizing the focus on his tour. Because this was the fourth redesign of this site I had been involved with, we kept the content outline brief and jumped right into sketches.

Wireframes

I always start wireframes with paper and a pencil. From the beginning Pete Jelliffe (WMG UX Manager) and I sketched mobile and desktop wireframes side by side. We didn’t take a desktop or mobile first approach but treated both elements as equals – parts of a single whole. We compared mobile and desktop sketches to anticipate the reflow of content and marked any elements that differed between desktop and mobile in a spreadsheet.

I made the decision to design for the tablet in the browser. In most instances it is more efficient to work directly with a developer to create a tablet version of a site rather than wireframing each page. I only created tablet wireframes for the one or two pages that had significant issues scaling between mobile and desktop.

My next step was to create high fidelity wireframes for each page of the site, desktop and mobile. This step gave our dev team enough information to start prototyping the grid, the new activity feed, and new music pages while we completed visual design.

Wireframes were done in Adobe Illustrator which allowed me to move seamlessly from the UI phase to Visual Design.

Visual Design

The ultimate responsive design tool doesn’t exist. In the future I imagine a tool that allows you to design with a gui, is hooked into a fluid grid and outputs a package of html/css and optimized images. Until this magical day, Adobe Illustrator is my tool of choice.

The benefits on using Illustrator for responsive design:

1. Illustrator has symbols – this allows for reuse of elements throughout a design and the ability to edit elements in one location. Symbols also make collecting assets for sprite creation easy.

2. Illustrator has art-boards – this allows designers to have multiple canvas sizes side-by-side and to view different screen sizes in a single document.

3. Illustrator has text/paragraph styles – a shared feature with Photoshop, but styles in Illustrator can be exported to css using the HTML5 pack from Adobe.

4. Illustrator is vector based – you can easily create assets that can be made into SVG graphics or webfonts.

5. Illustrator can output to PSD – deliver to developers using a file format they are familiar with (and often request). As long as you break apart your symbols before exporting, you should be able to migrate all of your layers to Photoshop with ease.

LiveView

Another indispensable tool for mobile design is Liveview. Liveview broadcasts a region of your Mac screen to an iOS device so you can view your design changes on a mobile screen in realtime. Necessary for fine tuning spacing, contrast and font sizes on a real device.

Delivery

For development, every page was exported as a separate PSD from Illustrator, and SVG files were created for a few vector elements.

These files were accompanied by spec sheets created using Specctr, an amazing Fireworks plugin. Specctr allowed me to markup documents with just a few clicks and helped speed up the development process while increasing consistency across pages.

Prototyping

For Trey’s site we completely redesigned the functionality of his music pages. We wanted fans to be able to listen to all of the songs on an album, look at lyrics, comment on songs, and see the official video for a song all on a single page. Since this was a drastic change for us and we inserted a prototyping step here before design. Once we had worked with developers to polish these new interactions, I returned to design and skinned the page in Illustrator.

Invision App

During the design phase I used Invision to create clickable prototypes and test new mobile interactions. When we weren’t sure about the right design for a page, we would create a mobile prototype and put it in a users hand. A great way to test without wasting development resources.

Reviews

Comps were approved from Invision and were always sent as a set. Part of responsive design for the foreseeable future is education, and we wanted to make sure the client always saw desktop and mobile as one object. Everything was shown on screen with the exception of the last internal review. Before sending designs to the development team all pages were printed and checked for consistency. To me, printing and marking up pages is still the best way to scrub a large scale site for inconsistencies.

After prototypes were complete, and designs had been delivered, we began reviews of the live site. At this point we made the rest of our changes in code, unless completely new assets were needed.

To mark-up changes and send them to the development team we used two different pieces of screen capture software:

Scroll Capture and Snagit

On touch devices we used Scroll Capture to capture full page screenshots on iPhone and iPads. We moved these mobile screenshots, along with our desktop screenshots, into Snagit where we could mark them up and create links for developers to review. These links were stored in Google docs so we could track changes in one master list.

Conclusion

I hope this was a helpful overview of a large scale responsive project from the perspective of a designer. While developers definitely have a lot of issues to resolve in responsive design, I feel like the design process has to evolve as well. Mobile and desktop need to be treated as parts of a whole. We need a better responsive design tool. We need to plan on how our sites will scale to different devices, even if we can’t always design for every potential configuration.

I want to thank my colleagues who helped work on this project – UX designer Pete Jelliffe, Project Managers Eva Nautiyal and Jeremy Kutner, Visual Designer Tonianne Tartaro, Digital Marketer Michele Cranford and the entire WEA development team.

This process was a learning experience for me, acting just as the designer and not building the site myself. How do you think we could have done better? I’d love to hear your thoughts and suggestions in the comments below.

My last project from Atlantic Records, a responsive redesign of the Trey Songz website, was featured on the Web Design Served site and in the Adweek Talent Gallery. Web Design Served features the top work from the web design and user interface design fields. Each featured project is hand picked from the Behance Network’s curatorial team from projects submitted to the Behance network. The Adweek Talent Gallery is where Adweek showcases creative work from the media industries.

Check out the Trey Songz Redesign on Web Design Served.

Check out the Trey Songz Redesign in the Adweek Talent Gallery.

21 Pilots

Twenty One Pilots was a complete redesign for this Fueled by Ramen band, designed by Andrew Glassett. I oversaw the design and build of this website, and the build was complete prior to my last day at Atlantic.

Check out the 21 Pilots website

The B.o.B iOS Game

The B.o.B iOS game was produced by Mike Mignano (formerly at Atlantic Records and now at Aviary) in conjunction with Glow Interactive. I served as the in-house creative consultant for Atlantic approving art and helping advise on gameplay. I was also responsible for bringing in and directing illustrator Tiffany Ahee to create the in game likeness of B.o.B.

Download the app free on iTunes

Matchbox Twenty Spotify App

I was still at Atlantic to give feedback on the concept, UX and design for the Matchbox Twenty Spotify app, but left before the design was fully approved. The app was designed by Lina Gonzalez and was produced by Jeremy Kutner.

Check out a web version of the app here.

Read about the app on Mashable here.

Wiz Khalifa

The new Wiz Khalifa website was the last project to kick-off while I was still running digital creative at Atlantic. I was involved in the concepting process, helping to focus the site content strategy on new merchandise and user generated art. I approved wireframes for the site, but wasn’t around to oversee the design process. The site was designed by Tiffany Ahee and built by the WEA D2C team.

Check out the new Wiz Khalifa website here.

Last week Fanbase, one of the products I created while at Atlantic Records, was featured by Adweek in their talent gallery. The project is a few years old but was originally a suite of apps living on a user’s desktop, smartphone and as a social networking widget. We even launched prototypes running on a connected TV and in a connected car. It’s a huge honor to be featured by Adweek and I hope the feature gives new people get a chance to check out the project.

Read more about the Fanbase project here.

Check out Fanbase in the Adweek Talent Gallery

Last week, we launched a “new user” module on Treysongz.com. This module is geared towards visitors who are new to Trey Songz and is based on findings from user research we completed with Bolt Peters a few months ago. This module is only shown to people we believe are new fans – site visitors who aren’t members and have visited less than 5 times. It focuses on content geared towards a user most likely driven from search, social, radio or tv. By focusing on the artist’s top songs, current single, and fun facts we can ease fans into our content rich websites without overwhelming them with information geared towards more experienced fans. We want fans of all levels to have a great first experience on our websites, and think this feature is a great first step towards that experience.

The module is currently being A/B tested so if it module doesn’t automatically open for you, you can still see the new user experience by clicking the “show” button at the top of any page. Special thanks to Tiffany Ahee and Jeremy Kutner on the Atlantic team, as well as Carmen Sutter, Pete Jelliffe and Eva Nautiyal on the WEA D2C Operations team.

Check out the new user experience here.

I started working for Warner Music Group in 2005, as part of a corporate web team called Digital Properties. We were tasked with designing and building web properties for the record labels under Warner Music Group. During my 18 months in that group we built websites for all the major labels under WMG, including the first website for the first all digital record label Cordless Recordings. Just as we seemed to be hitting our stride two of the team leaders, Karen Stavisky and Paul Sinclair, decided to move to new departments within the organization. I was lucky to be invited to join Paul’s new team at Atlantic Records a few months later.

The variety of challenges at Atlantic has kept me on my toes for over 5 years. I started out as a freelance designer, was hired as a full-time creative director, became the first product development lead, and finally ended up overseeing the entire production team and nearly 100 artist websites. I hired an amazing team, was a key stakeholder in choosing a new web platform for the company, lead the design and development of mobile and responsive websites, apps, games, lead new business pitches, heled launch marketing campaigns, and was tasked with discovering and evaluating potential new partners. There are so many projects I’m proud of, I’ll definitely need a longer blog post to encapsulate everything.

And now I’ve reached the end of my journey at WMG. I move on still loving Atlantic Records and believing that my last project at the label (you’ll have to wait and see) will be my best. I feel like I’ve accomplished all of my goals in this industry, and have been dreaming about working on a product for a few years now. I’m incredibly excited to announce that I’m moving on to Behance, a startup with the goal of showcasing and improving discoverability for creative work, as Senior Product Lead. Nearly three years ago I spoke at the first ever Geekend conference with Matias Corea the Chief Designer and Co-founder at Behance. Starting next month I’ll be joining his team to focus on bringing their properties to mobile devices, and eventually other connected screens.

The people I trust most in my life have all said “this sounds perfect for you” when I explain my new gig. I’ll be able to focus on mobile and devices, while working with some of the most talented people in the industry, and getting to help build something that will empower other artists and designers. I first started reading programming books to learn how to build websites, specifically for artists, and ended up building my first product – a CMS for artist websites back in 2002. Years later I will be able to give back to this community again, in a way my 23 year old self never could have imagined. It sounds like a dream, and while I’m sad to be leaving the best team I’ve ever had the pleasure of working with, I can’t wait to see what the future holds.

Eric

Today I awoke to a nice surprise, one of my illustrations was featured on the Adobe Touch Twitter and Facebook page along with a link to my new Tumblr. I’ve been experimenting with a new illustration workflow using Adobe Ideas, one of the new Adobe Touch apps for the iPad. I’m using Ideas to start all the elements in my new illustrations (black and white line art), then export to Illustrator to clean up the drawings, and finish in Photoshop for coloring and compositing. I have 3-4 new pieces using this flow, and have been drawing more in the last few weeks than in the last few years thanks to Ideas, my iPad and my Adonit stylus.

Check out my Tumblr featuring in progress versions of my new work.