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 anniversity 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 centeric wordpress site. Considering how the site developed a sense of stress to 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, useage 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 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 neatural typeface that has enough personaility to be interesting and have 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 a industry standard for UI design, but it allows the UI to be converted effiecently 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 userflow 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 seperate 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 form, 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 a 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 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 personailzation through the user’s account.
Finally when the conference is over the website is more geared towards presenting and serving up content focusing on recapping the major events of the conference through editoral based write ups and social media. This state remains evergreen till the next year’s conference is annouced. This allows attendees to recap the conference but also is useful as advertisement for the value of going to a TypeCon event, and advertisement for a TDC membership as well.
The Next Steps
Considering this website is focused on assiting 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 accessiblity is so important to the succes of this new website concept, i’ve focused all my energy towards the mobile design. As this project is a work in progress, I will take this design and extend them to the desktop bulid of the site while focusing on further refining the minor details to help make this website stronger and more flushed out.