Paolat De la Cruz
UX/UI Designer

Adobe 99u Conference

UX/UI Case: Website Redesign

“Genius is 1% of inspiration and 99% of perspiration.”

About this project

The Adobe 99U conference tries to shift the focus from idea generation to idea execution. This project evaluates the existing conference website with different UX tools and proposes a new website for the event of the following year. 

My Role

I led the complete process from research to the Hi-Fi wireframes of the website. This process included understanding where 99U conference comes from, researching about the target audience, how the platform works and organizes the content, testing the wireframes, and designing the final product. This project was developed in five days.

Research

Surveys 

The questions in the Survey were the following:

  • What's the most important thing for you at a conference?
  • Why would you rate a conference as "bad"?

  • Which moment is the least fun during attending a conference?

  • What makes that moment not ideal?
  • What's the most important matter that makes you go back to a conference?

88.9%
Agree that the speakers are the most exciting part of a conference
55.6%
Think that the talks and the networking at the conference are essential
33.3%
Say that getting the tickets is the most tedious part of attending a conference

Insights

"Number one is, of course, the content of the conference! then the venue, then the people that you only meet there and then the tickets."

"What I like the most is new speakers, learning about their experience and workshops about the subject of the conference."

Visuals of past 99u Conferences 

Visuals of past 99u Conferences 

Business Analysis: Adobe 99u Conference

Great Ideas Are Not Enough

Every year, Behance (part of Adobe) organizes the 99U Conference. The premise of the conference is simple: By bringing together some of the world’s most productive visionaries, researchers, and creative thinkers who excel at executing on their ideas, 99U offers road-tested insights into how to make ideas happen.

We can see on the branding applications:

  • Bright colors
  • Use of gradients in some cases
  • Some years the designs do not have more than three colors
  • Also, in some cases, the designs have geometric and typographic elements
  • The conference is always developed in New York City

99U Website

99U Website

Business Analysis: 99U (99u.com)

"99U delivers the action-oriented insights that you didn't get in school, highlighting real-world best practices for making ideas happen. Through our Webby-Award winning website, popular events, and bestselling books, we share pragmatic, real-world insights from leading researches and creatives. At 99U, we don't want to give you more ideas - we want to empower you to make good on the ones you've got." (Via Linkedin)

We can see that on the visual structure, the menu changes to Behance blue when scrolling down. Also, they keep the Adobe logo on the right. 

Behance and Adobe Webistes

Behance and Adobe Webistes

Business Analysis: Behance & Adobe 

Behance is the world's leading platform for creative professionals across all industries. Members create multi-media portfolios that showcase their work within the network, as well as throughout partner sites and organizations, and the industry-specific served sites. 

Adobe Inc. is an American multinational computer software company. It has historically focused upon the creation of multimedia and creativity software products, with a more recent foray towards digital marketing software. Adobe is best known for its Adobe Flash web software ecosystem, Photoshop image editing software, Adobe Illustrator vector graphics editor, Acrobat Reader, the Portable Document Format (PDF), and Adobe Creative Suite, as well as its successor Adobe Creative Cloud.

We can see that the websites of both companies, Adope Inc. and Behance keep a similar structure. The menu on the top; the user access and the product search on the right. They also have the Adobe logo either left or right and a sub-menu in the center.    

Interviews 

After doing the business analysis of the related companies,  I interviewed attendees of past editions of the conference, users who also lived in NYC. 

The highlights:

"Adobe 99u is an event for juniors and university students. The money you pay as a professional is not worth it because the talks and conferences are too basic. For students and juniors, this event is great because they can get motivated by famous designers, and also listen to their career path anecdotes. For senior professionals, it's not that interesting."

"Adobe Suite is losing market on Digital Design. Their products are for a traditional business like advertising and publishing. Senior designers in NY are talking about Sketch, Invision, Figma, etc. Now it is about the digital world"

Adobe 99u Conference

Competitive Brand Analysis

Most Important Design Conferences:

  • SXSW: South By Southwest dedicates itself to helping creative people achieve their goals. It is more about more design applied to music and film, and about interactive design. 
  • Aiga:  It is a more formal conference about more traditional media.  Symposia, conferences, competences and a design fair. 
  • Offset: has fast become one of the world’s most inspirational, educational, and vocational conferences for the design and creative industries in Europe.
Adobe 99u Conference

Other Competitors 

Adobe organizes other 2 conferences:

  • MAD: The concept is to connect with people who love to create as much as you do. They also have conferences and workshops. 
  • Summit: The Digital Experience Conference. To get the latest trends in customer experience management.

Here we can see that both conferences websites did not follow the Adobe design structure like Adobe 99U. 

Defining
Original Website of the Conference

Original Website of the Conference

99u Conference Website: 

Information Architecture Problems

After running some usability tests, asking the users to search specific information on the conference website, I could conclude with some information architecture problems:

  • Users get confused when they want to go to the home page of the conference while navigating the site. When they clicked "99U" logo on the left side, this link took them to another website (Adobe 99U Content Website). The actual path to go to the home page is clicking "Overview."
  • The users do not know which part of the website they are on when browsing. There is no visual feedback clarifying that.
  • The names of the "Talks" and "Agenda" links are also confusing for the user. They had to click both to discover how to get the tickets for the conference.

Actual Sitemap

As mentioned before, the information architecture of the site is confusing. From the seven main links, three of them take the user outside of the conference website.

Adobe 99u Conference
Original Website of the Conference

Original Website of the Conference

Affinity Diagram

The crucial facts in the diagram were the following:

  • For the user, the essential elements of a conference are speakers, topics, networking, and workshops.
  • There are information architecture problems of the conference 99U website.
  • The 99U site uses the same structure of Adobe Websites, but other Adobe conferences do not use this structure.

Adobe 99u Conference

User Persona: Jonas

Based on the interviews, surveys, and brand analysis, I created a persona. It is essential to define the users and what they expect from the conference and the website.

Problem Statement 

How can we help Jonas to inform himself faster about the speakers and activities at the Adobe 99U conference while maintaining an aesthetically attractive web design? 

Ideation

Card Sorting

I proceeded to run card sorting tests to find a solution about how the information architecture could be improved.

New Sitemap

After doing the card sorting test several times, I could better organize the conference topics and information. 

So instead of seven links, we will have four main links:

  • Home/Overview (99uConference Logo): Information about Speakers, Partnership, Why attend, Who attends.
  • Agenda: What's happening Day 1 and Day 2, workshops, conferences, and parties. Where, When and Who is the speaker.
  • Attend: Registration, Locations, Accessibility, Hotels, Volunteer, and Press.
  • Archive: Info about past events and videos.

Footer: 

  • Logos and links of Organizers and Partners: Adobe, Behance, Moma, and Lincoln Center.
  • Other important information: About 99u, Social Media, Contact, Terms of Use, Privacy Policy, Cookie Policy.

Adobe 99u Conference
Prototype and Testing

Wireframes 

I could test new wireframes, on how the users searched for information and interacted on the website. These were Digital Low-Fi Wireframes, done in Sketch with Form Toolkit and animated on Invision.

Wireframes Testing Feedback 

The number of speakers is not realistic.

  • Need more references for the "Agenda" layout and how to organize this information.
  • The tickets usually have an early bird sale, and then prices per date.
  • Add logos of Adobe, Behance, Moma, and others in the footer.
  • One user asked if there was a gallery of photos in someplace. 

Visual Design Process

            Brand attributes: Movement, Bold, Vibrant.

Moodboard

Moodboard

Adobe 99u Conference

Conference Visual Identity: Sketches

After making sure that structural and usability problems were solved, I started some sketches inspired on the Moodboard and from here develop the visual style of the website. 

Adobe 99u Conference

From Sketches to Digital

Then it was time to take the sketches to digital. Here I could do some experiments before deciding for a final one. The bold colors were great to give a vibrant mood. This tone of blue (Behance blue) was not used very often on past editions of the conference, and now it's working great.

                              Final Visual Design Elements

Adobe 99u Conference

A logo for the Conference

The 99u logo cannot be alone when referring to the conference. It should be differentiated from the organization website.

Adobe 99u Conference

A Graphic Element for the Conference

The circles slides come with the concept of movement and activity. 

Adobe 99u Conference

Colors

The color palette should be vibrant and young; like the young people who are attending the conference. 

Adobe 99u Conference

Typography

I could keep in this proposal the original typography that Adobe uses: Utopia. Combined with Titiling Gothic, I could get the bold and action look that is needed. Futura helped to complete the Conference logo, keeping the original mood of the brand. 

Adobe 99u Conference

Buttons 

The website did not need many buttons, but it was necessary to design them to see the differences and how they adapt to the style guide. 

Adobe 99u Conference

Photography Style

Photos selected for the website should show some of these concepts: young, vibrant, fun, learning, active, and people.

Adobe 99u Conference

Final UI Design

I proceeded to finalize the redesign of the website in Sketch keeping in mind all feedback, analysis, and design elements

Learnings 

Some people asked how I can dare to redesign a famous design conference in five days. Well, the process showed that there are always things that can be improved in a project focusing the research on the user and testing. And the more test you do, the better.

I learned that obvious solutions should also be tested, even if we are 99% sure that the solution seems clear and worked for other similar projects or websites. Information Architecture is a very delicate part of the organization of a website and it needs time to be analyzed.

With more time, a lot more of iterations could be done; and more design options could be explored, but the UX process should always guide the design results.

Thank you!

All images used all part of the 99U Official Website and Unsplash.