Promotion Site for the 2016 UC Davis Design Career Fair: [Insert Future Here]

Web design, programming, and teamwork come together to build the 2016 UC Davis Design Career Fair promotional site.

Design Career Fair 2016 Theme: [Insert Future Here]

Project Overview

Goal: To produce a professional-quality website for the student-run Design Career Fair. This would be the first website ever created for the annual fair.

Background: The 2015 founding year of the annual Design Career Fair at UC Davis used Eventbrite for ticket sales but did not have a promotional website. The fair’s founders sought to create one in order to reach and inform a larger audience of students and employers.

Team: Our core web team members were Andy Lin, Cathy Chang, Adam Rosado, Shang Lu, and myself. We were led by Alicia Tang, and our group’s work was overseen by Career Fair founder Tiffany Trieu.

Challenges: Included working with an all-student team to both design and code. Most members, myself included, had little to no prior coding experience at the time.

Methods: Involved round of sketching and discussion, iterating on prior feedback as our team of 5 created progressively higher fidelity mockups and began coding. A critical aspect of the process was to imagine how our different audiences would use the site and to tailor our content and experience to their unique needs.

Results: A fun and useful site that received compliments from the professional web designers attending the career fair.

Project Story

The first year of the new, student-run, UC Davis Design Career Fair had been inspirational and a big success. Could we pull it off again? One thing was certain, however: we would need a website this time around!

Our first meeting to begin planning the fair.

Our team started off by brainstorming what elements we wanted to include on the site. We had two specific audiences we needed to connect with: Potential Employers and Current Students. We also wanted to make the site useful to professors and UC Davis staff so they could more easily support our efforts.

Ideation sketches.

Our Graphics team worked to develop a branded color scheme and theme for the year in lockstep with our own efforts to establish information architecture for the site. This created some challenges because we were constantly taking in new information about the look and feel of our marketing materials and wanted to apply the same style to our site. We decided to stick with greyscale wireframes until a definitive brand was pinned down.

Adam, Alicia, Cathy, Andy, and I discuss potential layouts.

Our work was scrappy and quick. We only had a few hours when we were all free to meet each week between classes, so we made the most of it — sketching and erasing wireframes on a classroom whiteboard, discussing the results, erasing, and sketching again.

Dry erase board sketching
Comparing wireframes made in Sketch and new ideas in pencil.

I started practicing my research chops on this project. It was unclear how we should divide all the information we wanted to present so I turned to using Card Sorting. After asking dozens of fellow students and potential employers what they wanted and needed to see on our site, I brought in some friends and had them do a card sorting exercise.

Michelle, Andy, and Cindy express their opinions.

Via the Card Sorting exercise, I learned how others categorized the information I’d collected. I was able to sketch out an idea of how we should organize our site’s information architecture and presented it to my teammates.

Information breakdown for the Employer section, with some notes on student questions.

Just as we were getting settled on a layout we all felt good about, the branding decisions came through from team Graphics. The look and feel of the 2016 career fair would be CMYK — the color printing system known to designers everywhere. For the uninitiated, CMYK stands for the Cyan, Magenta, Yellow, and Key (Black) ink in a four-color printing process.

The new DCF logo had a futuristic feel that paired perfectly with the bright color scheme.

At this point we were ready to move onto full-color mockups, and begin including photos and other graphics.

Some of the team’s first mockups. The right two are my own.

While we were still having some clear stylistic differences, we decided to forge ahead and design all the pages of the site based on our pre-planned architecture. We were interested to see & be inspired by each other's unique methods of problem solving and were certain we would consolidate into a consistent style once we had all our idea out into the world.

Getting the gist of of it came first.

Pulling elements from all of our concepts we decided to be more light-handed on our application of color, use lots of photographs, include very-trendy-in-2016 “lozenge” shaped buttons, and divide our site into clear sections for each target audience.

Screenshots of the final site

Finally, our design team put on our developer hats and got to work. It was great practice to see how my visual designs either could or couldn’t be translated into code. I have a lot more empathy for the constraints of engineers now!

Our site launched about a month before the fair, and helped answer student questions, and provide employers with critical travel and event information.

Members of the Design Career Fair celebrating outside the event.

Want to see our final live site? It still lives here on our team GitHub, so go ahead, check it out!


You’ve reached the end, thanks for reading! Want to head back to my portfolio?

.