Establishing the Sketch Comedy organization through professional web design.

Introduction

In my fourth year at UCSD, I established a comedy organization called Sketch Comedy. The organization was a success and created value for the initial members who were recruited by word of mouth, but we still needed a way of creating awareness for ourselves around campus, establishing key organizational values, and solidifying a recognizable brand. 

Scope: Web Design  •  Branding  •  Typography  •  Client-Facing Document Creation 

Timeline: 10 week long UCSD course

The Challenge

Develop a website from the ground up.

 

A large element of the project was to partner with a client and meet regularly with them to create something that meets expectations on a rolling basis. The other members of the Sketch Comedy Exec. Board acted as the client for this project, understanding that they needed to ignore my input and dissociate from me as the president of the org and just interact with me as a hired web designer. 

Road Map

Client Facing Documents

10.png

1. COVER PAGE

An overview of key findings and expectations.

(1 Page)

4. CREATIVE BRIEF

An outline of who, what, and why design choices are made.

(10 Pages)

2. USER INTERVIEWS

User Interviews, Personas, and Use Cases.

(28 Pages)

5. FIRST PROTOTYPE

Wireframes and functional specifications describing each interface element.

(19 Slides)

12.png

3. COMPETITIVE ANALYSIS

Analyzing other comedy and college organization websites. 

(66 Slides)

SKETCH-4.png

6. FINAL DESIGNS

Functioning prototypes for mobile and desktop.

(1 Page w/ Links)

User Research Methods

Through conducting interviews with 9 different users, all with differing levels of involvement and experience in comedy, I was able to learn more about the types of users who would ideally engage with Sketch Comedy's website.

 

I developed 3 types of personas; Experienced Content Creators, Inexperienced Beginners, and Audience Members. Building on these three types of users, I specified contexts in which these personas would interact with the site (user scenarios), along with actions these personas would perform within these contexts (use cases).

 

Interviews, scenarios, use cases, and requested features from the clients allowed me to begin thinking creatively about how to best format the website.

Research Insights

01. Professionalism vs. Humor

Users are only concerned with the humor of videos posted and do not expect the website's design to present humor. The website should present itself professionally in order to convey the important message that the organization is well established and has members who are serious about content creation.

02. Point Of Entry

Potential New Members (PNMs) are the most important users to target with the website. The goal is to create value in their eyes, make them confident that joining this organization will be a better time commitment than joining another, and to make it very simple for them to find out how to join.

03. Defined Values

It should be easy to identify the long and short term goals for the group, their videos, and their events. 

04. Easy To Find

Users shouldn't have to do anything more than Google "Sketch Comedy UCSD" in order to find everything they need. 

Wireframes and Sketches

Prior to working on medium fidelity prototypes, I produced a series of sketches for all the potential screens that the website would need. I used the best elements from all five of the sites in my competitive analysis and developed the sketches below as a guideline for my work moving forward.

Homepage (Top)
Homepage (Bottom)
About Us
Videos
Contact
Hamburger Menu
Events (Top)
Events (Bottom)
Meet The Team
FAQ

Website Architecture

High Fidelity Screens 

01. Homepage

Users will immediately see the the four most important components to this organization; the community of individuals that comprise the organization, the content they have created, the events they host, and the option to join.  The option to "Join" was given special emphasis as a call-to-action button, letting PNM's know that their involvement is one click away.

In addition to using the Nav Bar at the top of the page, users can get to the video content by clicking the call-to-action button labeled "Watch," as well as clicking the header, "Our Latest Content," above the video quick display. The header above the event quick display, "Upcoming Events," can also be pressed to be brought to the events tab.

On the mobile version, the hamburger menu provides icon links to the organizations social media accounts.

02. About Us

The organizations objective is placed at the top, followed by a side scrolling photo gallery of team members at events, and a collapsable FAQ section is presented at the bottom. The goal of the design for this page is to let users know everything they need to know about the organization that they couldn't readily find on the Homepage. If you were to only see the Homepage and the About Us page, you should know every surface level detail about this organization.

03. Events

Users can come to this page to find information, such as time and location, about upcoming events, as well as see what events this organization has held in the past. At the top of the page, I made sure to emphasize that the purpose for these events is creative learning, the ultimate goal of the organization.

04. Videos

The Videos page is as simple as it gets. I followed the all the same information and thumbnail display conventions as YouTube currently does in 2020. There is no need to distract users with anything other than what they are used to seeing. Ideally, this page would be implemented by using an API or plugin to import YouTube.

05. Meet The Team

The team member display will ultimately be one of the most important pages for this organization as the member base grows. On this page you can find creatives with similar ideas and quickly reach out to them. 

The member calling cards that are unveiled when hovered over are a unique way for individual members to quickly express their personalities and interests. 

06. Get Involved

Ultimately, if a potential new member likes what they see, they would make their way to this page and be greeted with a handful of options to reach out with. If they don't feel comfortable making the first move, they can easily sign up with their email and a current member will reach out as soon as possible.

Conclusions and Next Steps

During this semi-personal, semi-professional project, I was able to further my understanding of three very fundamental skills that I had been weak on previously; typography, spacing, and padding.

This was also my first time designing for the web, as well as creating the same design for both mobile and desktop, which taught me the subtle differences of both platforms and how to make the best adjustments possible. 

Moving forward, I want to improve the Sketch Comedy logo, which needs both a minimized version for mobile usage, as well as a general redesign because it was not a custom made graphic. I would also like to think of a way to stylize the page header/Nav Bar so that it is more aesthetically pleasing. The splash image on the homepage also leaves a lot to be desired, but that is an easy fix once new pictures are taken.

415-488-7888

  • LinkedIn Social Icon
  • Facebook Social Icon
  • Instagram