∙ user interface design for a website promoting a conference on sustainability
∙ individual project
∙ oct 2020
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.
wireframing ∙ prototyping ∙ user interface design
Figma ∙ Adobe InDesign
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.
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
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
- Orange (most important): main title
- White: subheadings, emphasis, buttons (unhovered)
- Yellow (least important): descriptions, buttons (hovered)
Color hierarchy example
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.
made with ♥ by michelle zhang