conference microsite

overview

This is a design I created while taking 05-392: Interaction Design Overview in Fall 2020. The final project of the unit involved creating a microsite from given data using our knowledge on information architecture & content analysis, progressive disclosure, typographical hierarchy, adherence to a grid, purposeful use of color, and feedforward & feedback.

As I worked on the project, I gained deeper insights into the motivations behind screen-based website design. In particular, I realized the power of information architecture and the concrete importance of feedforward and feedback. I also learned how to leverage the grid we were required to adhere to but also simultaneously retain a degree of flexibility.

The entire microsite design was rendered in Adobe InDesign and prototyped with Figma.

role

UI designer

skills

wireframing   ∙   prototyping   ∙   user interface design

tools

Figma   ∙   Adobe InDesign

prototype

Link

process book

Link

final design: motivation

My overall design was inspired by concepts of inclusivity and collaboration; I wanted to create a site that encouraged users to get involved in affecting change.

I chose not to use photos throughout the microsite; I felt that using photography would lead users to feel disconnected. Rather, I chose to use warm-colored illustrations to generate empathy and inspire them to learn more. The illustration on the homepage reflects the theme of inclusivity and spotlights the chat bubble as a call-to-action.

The intended audience is users seeking information on the conference, so information is presented in an easy-to-scan hierarchy. Buttons navigate from one page to the next to create a seamless experience for the user.

homepage iteration

Following from my wireframes, I designed a home page with the key words emphasized with bold, large font and a highlight. My goal was to emphasize the content of the events rather than the name of the forum. Some changes I made in later iterations include

• Navigation bar: necessary for navigation

• Speech bubble: new point of entry; creates intrigue and invites the user to learn more

• Background color changed: black for even more contrast; content jumps out as a call to action

Microsite home page: initial ideation

color hierarchy

While I worked through the iteration process, I developed a consistent color hierarchy throughout the microsite in order to better organize the content and help make the more site uniform and intuitive:

• Orange (most important): main title


• White: subheadings, emphasis, buttons (unhovered)


• Yellow (least important): descriptions, buttons (hovered)

Color hierarchy example

concluding thoughts

Overall, although I used many familiar skills I'd picked up from previous frontend projects, working on this project taught me more about the power of information architecture and solidified my understanding of the tools I could use to enhance progressive disclosure.

In the future, I would want to experiment with the illustrations that I used in my microsite. It would be interesting to see how the content's meaning changes with the use of different images.