TYPECON | TYPECON | TYPECON | TYPECON | 

Product design, Personal Project


Back Story

TypeCon is an annual conference presented by the non-profit, Society of Typographic Aficionados (SOTA) and Type Directors Club (TDC), an international organization dedicated to the promotion, study, and support of typography and related arts.

After volunteering at the 20th anniversary of the conference, hosted in Portland Oregon, I saw that there was a disconnect between the expert quality and experience of the conference, compared to the underwhelming impression that I received online. The website lacked a sense of polish, craft and user experience. I saw this as a chance to reimagine what their website could be like if they better aligned it with their target audience—designers. This meant developing a reconsidered design system that felt fresh and yet familiar as the theme of the conference changes year to year, and creating a new dynamic user experience that focuses on enhancing the moment to moment experience during the conference.


Objectives
  • Create a new digital design system for the TypeCon brand that aligns well with their audience, while also focusing on a mobile first approach. 
  • Create a new information architecture
  • Establish a editorial driven structure that focuses on the speaker’s backgrounds and overall passions for the field of typography 




The Status Quo


Current website design
Currently, the annual conference relies on their website as their primary channel for pre-conference communication. Before the event, a user can use the website to purchase tickets, sign-up for workshops through Eventbrite, and allow users to stay up to date on committed speakers. This experience is has been serviceable for their team but not for their users.


Looking at the high-level site structure, the navigation lacks the depth of hierarchy and detail needed to help guide the user based on their desired end goals. For example, Education Forum, Typecon’s featured program for design educators, has no context, making it confusing for a novice user. Also, important information is being lost and buried due to the lack of clear P1, P2, P3, etc. elements. An excellent example of this is their announcement of having to postpone the 2020 version of the conference. Many users on Facebook have commented on how it was hard to find and admitted that they almost missed the news despite it being on the front page of the website. 

Overall, the current website lacks the professionalism, sense of craft, and care that SoTA and the TDC are known for. When I went to TypeCon, I was able to speak with members of their leadership team about the challenges of their website and how it lacked a clear sense of navigation for the user. They agreed, but they stressed that they had a lack of resources and time to better the user experience. Considering this, I saw a great opportunity to reimagine what an appropriate website for TypeCon could potentially look like, whether that was through a formal pitch, or just having it remain as a personal project.




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 it 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.



Fluid Site Structure


Conferences are much like sporting events, as time progresses the information that the user needs and expects changes over time. For example, before the event occurs, a user must be educated about the essential details and their call to action. Once the event has started, the user will be expecting a new set of relevant information such as a schedule, or what’s happening in real-time. The question is how can a website meet both user’s needs without creating unnecessarily deep user flows?
Again, let’s look at sports and how a company like ESPN solves this problem when providing news coverage for a game. The secret is taking the time to set up a time based reactive system of website layouts. As detailed in the deck above, they use multiple layouts within a single URL. These layouts change based on the status of the game so they can ensure they are providing the information that the user finds most relevant at the right time.
This time based reactive system is important for a site like Typecon because so many conference websites have an editorial charm, yet lack usefulness and easy navigation once the conference begins. Pairing this reactive system with real-time data will help convert this website into more of a conference guide or tool for the brand and its users past the initial pre-conference phase.






Next Steps


As this project is a work in progress, I will take this design and extend it 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.
This project is a puzzle and each platform has a specific role. The desktop experience will focus primarily on being a tool for the user to plan ahead for the days and events that they are interested in attending. Once the conference is over the desktop state will also act as the primary source of event recaps as well.