back

Archive  /  WIGRAPH

WIGRAPH


The Utah teapot is known as a test model in the 3D community, and an equal to the 3D version of a ‘Hello, World!’ program, a phrase used to demonstrate basic programming syntax.
2020
Boston ID# 0520-0820
Website 12 weeks
Product Designer, Brand Design, 3D Artist
Adobe XD
Blender
Website
Brand
3D Graphic


OverviewWiGraph (Women in Graphics Reseach Outreach) is an organization that provides women researchers in computer graphics, a network to connect scholars with mentors,  encourage and discuss topics, and broaden the field for female academicians.

The goal of this project is to redesign their website, and improve how users search and experience WiGraph information before registering an event or subsribing.

  
StatementThe WiGraph site should aim to engage users with organized visual and informative elements so users can quickly seek their desired information, however, repetitve components can confuse and hinder users’ visits.


Roles / ResponsibilitiesI was brought onto the WiGraph team as the main designer and help guide the design process for our technical chair, Liane. My responsibilities include redesigning the website, creating a brand guide, finalizing a logo, and supporting Liane in various HTML/CSS items.
Scope / ConstraintsThe timeline for this 4 week project initially spanned across four weeks with weekly sprints ending with progress check-ups.

Sprint 1 
Logo/Branding1 week

Sprint 2-4 
Website designing/coding support3 weeks


In realizing that Part 2 of the project would not make the deadline for the annual launch of the Berthouzoz Women In Research Lunch in late August, and part of the team being in various time zones due to COVID, I readjusted the timeline to implement room for feedback/guidance in between each sections.π


Sprint 1
Logo1.5 weeks

Sprint 2
Branding Guide0.5 week

Sprint 3-4
Website designing / coding support / 3D landing page graphic10 weeks


Sprint 1: Logo
Chosen Logo


The challenging step in refining this monogram, was finding the right grid to align it to. I viewed the overall shape to be round in presenting the ‘G’, and to give the opening of the ‘G’ just enough negative space in:

① the gap where the ends are close to meeting
② the ‘i’ at the bottom of the G,

so when it is sized down or up across different mediums, it will still look proportionate.



Sprint 2: Branding

ColorThe primary palette colors purple and yellow, originating from WiGRAPH’s Berthouzoz Women In Research Lunch founder, Floraine Berthouzoz, were selected by WiGRAPH as another posthumous honor to Berthouzoz when the organization first established.

As a way to continue commemorating Berthouzoz, I refined the colors into 3 hues: Jasmine, Meduium Purple, and KSU Purple, to be used as the main palette across all branding.

Fiery Rose, Yellow Orange, and Yellow Green Crayola, as the secondary palette, upholds the ideas of passion, determination, and growth; all of which, further defines WiGRAPH as place where women can empower not only themselves but each other. I also chose these colors with gender neutrality in mind. Though WiGRAPH is a group that is targeted at women in graphic research, people of all sexual orientations and job ocupations are welcome to join and network.

Sample of the palette



TypographyProxima Nova Medium and Bold are the principal weights, with Blenny Bold as the secondary weight used to represent WiGRAPH.


Sprint 3: Website 
Identifying the ProblemDuring the initial phase of the website redesign, my first tasks included ① pinpointing problem areas to develop a sitemap, ② establishing a grid structure to organize my content, and ③ defining the site elements (such as buttons, icons, and graphics) to incorporate and position within the guide.
Problem Areas{ Repetition }

spotlights information is on the homapage & separate page on the navigation

participate information on homepage has the same effect as asking people to‘get involved’





{ Navigation }

should be pages named carefully to assist users in finding individual informations that are grouped together

provide indication for users to follow along when browsing (e.g. Event Nav >> Event Block >> Event Page)

should not have secondary information shedded to the bottom on a page





{ Graphics }

and/or graphics research should be a key point in presenting an engaging visual





{ Hierarchy }

should have information displayed appropriately by importance (e.g. change in size, color, boldness, leading)


 Sitemap

Once I identified the areas requiring improvement, I developed a sitemap to assess the hierarchy of information/pages and map out their connections. The way information is organized and the destinations it links to are crucial for guiding users through the website, making it a fundamental element in shaping the site’s overall structure.

Grid Formulation


A fitting grid for the WiGRAPH website would be a space that exhibits ‘graphics’ and ‘connection’. For the main grid, I presented a 1:2:5 ratio that designates an area for grpahics/pictures of award winners, events, and social gatherings next to any informations while being read.

Because WiGRAPH is an organization that readily offers networking opportunities for women graphics researchers and more, I wanted the main focus of exploring the website be a connection from the users (the researchers) to WiGRAPH (the graphics network).
Elements

{ 3 Dimensional } 

I envisioned an animated graphic at the beginning of the project for the home, something that would inspire users to discover informations through other pages of the website. The landing page of WiGraph should also display an inviting aspect to networking with other graphic artists and researchers since WiGRAPH works to expand from 2D/3D to other graphic fields.


As the project continued with a readjusted timeline, I used the 10 week sprint to learn a 3D software and create a more suitable component. I performed trial and error during the summer quarantine period to grasp the knowledge on Blender. The objective I struggled the most with, was the lighting. Finding the correct shading and brightness on the studio camera, consumed considerably more time than making and placing each object in position. And as the sprint came to a close, I finished the graphic in time to be placed on the live redesigned version of the website.

Wireframe view
Solid view
Materials view

The graphic itself is comprised of the teapot with small spheres/objects pouring out. The teapot represents WIGRAPH’s drive to offer new opportunities for women to discover as a collective in the reseach field, and as this model led the generative graphics industry, the homepage graphic should parallel that idea in leading users from the introduction page to WiGRAPH’s informations. 

While the teapot containes the spheres and icons within, the act of pouring is what WiGRAPH sees to: expanding the field and allowing the opportunities to roll out.
Wireframes


Samples
Prototype
TakeawaysAs the sprints came to an end, all of the components I set out to achieve were happily completed. From creating the logo to topping the site off with my first time 3D graphic, was both facinating and enjoyable to make. Now that I have some knowledge of Blender, I’ve got much exploring to do to improve this skill.

Though the transferring of the design to a live website is an ongoing project for WiGRAPH’s team, I am glad to have had the opportunity to work with such amazing individuals (from all over the country and despite COVID/time difference) in pioneering a space for the womens’ graphics research outreach!




End of Project Preview
Oh dang, you’ve hit the end of the project! 

But don’t worry, there are many other projects to explore. Feel free to keep browsing.