The 99U Conference Website: An Information Architecture & UI Case
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, identifies usabilities problems, and propose a solution.
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.65% 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.”
Business Analysis: Adobe 99u Conference
Great Ideas Are Not Enough
Every year, Information Architecture / UI Case: (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 case, the designs have geometric and typographic elements
- The conference is always developed in New York City
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.
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 on 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.”
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.
Other Competitors
Adobe organizes other 2 conferences:
- MAD: The concept is to connect with people who love to create. 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 conference websites did not follow the Adobe design structure like Adobe 99U.
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.
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.
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?
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.
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
Conference Visual Identity: Sketches
After making sure that structural and usability problems were solved, I started some sketches inspired by the Moodboard and from here developed the visual style of the website.
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 is working great.
A logo for the Conference
The 99u logo cannot be alone when referring to the conference. It should be differentiated from the organization website.
A Graphic Element for the Conference
The circles slides come with the concept of movement and activity.
Colors
The color palette should be vibrant and young; like the young people who are attending the 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.
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.
Photography Style
Photos selected for the website should show some of these concepts: young, vibrant, fun, learning, active, and people.
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.
Note: All Photos used are part of the 99U Official Website and Unsplash. This a project with an educational purpose. All mentioned brands are the property of their companies.
