TypeCon is an annual conference presented by the non-profit Society of Typographic Aficionados (SOTA), an international organization dedicated to the promotion, study, and support of typography and related arts.
After experience the 20th anniversary of the conference, hosted in Portland Oregon, I saw a prime opportunity to create a new dynamic user experience that focuses on better connecting with the conference’s design-focused audience, while also enhance the moment to moment experience of the conference.
The new typecon.com
The current typecon.com is hosted on a blog centric WordPress site. Considering how the site developed a sense of stress to the user, it lead me to want to rethink the structure of the site, bring a user-centric approach, and modernize the UI.
The UI System
Unlike their current site, the UI focused on using beautiful and bold typography to help appeal to the design-centric audience. Considering the conference leadership and following is so devoted to the craft, usage, and design of good type and page layout the same consideration had to be applied to the redesign of the website. The bold color choice was picked from the conference branding system, though could easily be replaced with any set of other colors.
One of my primary focuses I considered while constructing the UI system was the ease of representing a new theme. Each year the theme of the conference is drastically different, which meant the UI/website had to be able to easily support this yearly transformation, while also feeling familiar. This is why the UI relays on a neutral typeface that has enough personality to be interesting and has character but can be secondary to a logo or display typeface. Also, the UI primarily only relays on the tints and shades of two brand colors paired with white. Not only is this an industry standard for UI design, but it allows the UI to be converted efficiently year over year via authoring.
The UI Challenge
Designing for mobile first brings a unique set of challenges of considering vertical pacing while working within the limitations of horiztional space. This challenge was most evident when working on the schedule page for the conference. I wanted to create a schedule that felt unique, while also focused on providing the most infomation possible without overwhelming the user. Thanks to a combo of scrolling triggers and animations along with user triggered dropdown accordions I was able to make a quick and easy to user experience that achieve said goals.
Fluid Site Structure
Early on within the wireframe and user flow structure, it was clear that one singular layout could not satisfy the needs of each facet/state (before, during, and after) of the conference. To ensure each state remained deliberate, and had a focused user experience, I had to develop three distinct designs, each one would be shown based on the state of the conference.
While working on this site, I had to consider three audiences: new, returning, and student. Each type of audience shares similar goals and insights but each one requires a separate take away from visiting the site. This forced the website to be flexible enough to meet the needs of all three groups in a thoughtful way.
This state focuses on informing the user about the upcoming conference with info such as when, where, and how to register for the upcoming year. Preview writes, education forms, and getting people to signup for workshops are the primary focus of this state. Also during this state of the site, for users that have signed up for an account, then can view and create customized itineraries to help prepare as the conference nears.
This state focuses on a schedule focused user experience. The focus of this user flow is to allow the user to see what’s happening during the conference up to the minute. Because of this the homepage main focuses on the schedule, itineraries, and personalization through the user’s account.
Finally, when the conference is over, the website will be presenting content focusing on recapping the major events of the event; this content will be editorial-based write-ups and social media posts.
The Next Steps
Considering this website is focused on assisting an attendee during the conference, I wanted to ensure that this was built on a mobile-first structure. This mobile-first ideology helps provide the most flexibility to connect with the conference in a digital space while going to each event during TypeCon. Because mobile accessibility is so important to the success of this new website concept, I’ve focused all my energy on the mobile design. As this project is a work in progress, I will take this design and extend them to the desktop build of the site while focusing on further refining the minor details to help make this website stronger and more flushed out.