Mockups-DesingAtUCSD-ResponsiveScreens3.png

Design at UCSD

Web Design + Rebranding

Story

Design at UCSD is a student-run professional organization that I had the pleasure of leading during my last year of college. We held skill-building design workshops and hosted designers from Adobe, Intuit, and IDEO.

As an HCI-focused organization, we needed to create an online presence that established credibility, effectively communicated our brand, and served our audience of students and collaborators by addressing their needs.

Overview

My Role: UX & UI Designer, Copywriter, Organization President

Tools & Methods: Strategy, Branding, Interviewing, Sketch 3, InVision, Google Hangouts, Slack

Deliverables: Wireframes, Mockups, Copy


Summary

Solution

We defined a brand that anchored our entire organization and its visual style. The completed website conveys that brand and provides users with features and content that address their design needs.

Problem

Our organization lacked a mission and brand to serve as its foundation. Its visual style was unorganized and inconsistent. Furthermore, without a website, our HCI organization lacked credibility and missed out on an opportunity to provide value to our audience.


Strategy

After conducting interviews with our target audiences, we identified issues that became the inspiration for the goals of our website and for our organization as a whole.

Pain Points

  • Students lack the experience to land a job in design.

  • Design opportunities exist, but students are unaware of them. 

  • There are misconceptions of what "design" means.

  • Our target audience doesn't know what Design at UCSD is about. Even internally there is confusion about our organization's goals and purpose. 

Goals

  • Prepare students for the design industry.

  • Keep students informed about local design opportunities, events, jobs, and internships. 

  • Clarify what "design" means to us.

  • Define the organization's mission and values, then build a brand that embodies those values.


Defining Our Brand

Branding Descriptors:

Screen Shot 2017-05-25 at 23.07.21.png

At times, it felt as though our organization didn’t know itself. So, after several long hours of discussing and covering the walls in post-its, we defined a mission statement, values, and descriptors (voice and tone guidelines) that formed the basis of our brand.

Mission Statement: 

To establish an open community of aspiring designers, to inspire creative confidence, and to ease students into industry.

Wireframing

With our painpoints identified, goals established, and brand defined, we were poised to begin designing the organization’s first website. After the team agreed on the content and features of the website, I created wireframes to organize it all.


Visual Design Exploration

Logo Redesign

A brand is about so much more than a logo. However, a logo is a good starting point for building a brand’s visual style. The old logo wasn't cutting it, so I gave it an upgrade.

Old Logo:

Old Logo.png

The old logo looked great, but it didn't communicate our brand. The black color didn't convey our "friendly", "fun", or "open" brand, and the the icon of the library (on the left) was simply missing a floor. My redesigned logo attempted to address these issues: 

Redesigned Logo Color Variations:

With these redesigned logos, I chose colors that captured the friendly feeling of our new brand while still remaining professional. The typography is similarly simple and modern, but the font places the emphasis on "design" instead of "ucsd" with a heavier weight. 

Typography and Color Palette: 

Typography:ColorPalete1.1.png

The colors are the same as those in my final logo design, with an added vibrant pink for a highlight and calls-to-action. 

Visual Comps:


Final Design


Wrap Up

Lessons Learned 

  • Use plain language in your copy. When we showed prototypes to users, we realized that ambiguous CTAs led users’ expectations astray. Strive for descriptive yet simple nomenclature.
  • A brand is more than a logo. A brand is who you are, what you do, and why you do it. It’s conveyed through your visual style, the tone of your copy, and of course, the actions or your organization.
  • Sometimes (just sometimes) it’s okay to skip wireframing. Web design doesn’t always call for traditional UX/UI methods. With a simple site, just jump right into the comps.
  • Remote team? No problem. All of our team members were scattered across the country for summer internships or school. Google Hangouts, Google Docs, InVision, and Slack became our most-used apps.