Design Educator Conference

Screen Shot 2018-01-25 at 9.47.19 PM.png
 
 

Project Description

AIGA plans a design conference every year where many people from the industry get together to learn about this growing area and build their network. As a team, we planned the design portion of a fictitious 2017 Design Educator Conference in San Luis Obispo, CA. Our task was to create a responsive mobile, tablet, and desktop website for our fictitious conference. We also created an HTML email and print collateral for this event. Our theme was a hive (inspired by bee hive), where the hexagon was our main shape. Throughout our process, we researched and tested our prototypes to create the best user experience for the people attending the conference.

CONCEPT

Our concept began with a brainstorming session for branding. We all gravitated toward a “hive” concept, an idea of coming together and contributing work to a greater cause, coupled with geometric hexagon imagery and a bold color palette with a pop of yellow. We stuck with this idea through the entire project, and the idea of collaboration translated into tessellating hexagons is at the core of our concept.

PERSONAS AND EMPATHY MAP

We chose to focus on Kulreet, a young professional designer who wants to break into the teaching industry. We felt that she embodied a large portion of the audience we were trying to reach and who would be interested in attending the conference. Personas can be turned into empathy maps that detail different aspects of the customer’s life, which can be used to figure out how to most effectively reach them. There are many ways that someone could find out about the conference, and using an empathy map can help target which ways would reach which types of customers.

Screen Shot 2019-02-21 at 10.44.34 AM.png

We imagined Kulreet as a hardworking leader who was ready to take on more of a leadership role at her current job. She feels limited by the opportunities that the market offers her, which is mostly freelance work and team positions for not enough pay. She is constantly told that she is “too young” for a position with more responsibility. This is what turns her on to the idea of being an educator. She is outgoing and confident, has a small inner circle of close friends, lives in a studio apartment with her corgi and enjoys going on sunrise runs and watching Illustrator tutorials online for fun. She runs a blog and is obsessed with social media - she has just about every platform you can think of. Her favorites are Twitter and Instagram, but she has experience running personal and company accounts.

INFORMATION ARCHITECTURE

The information architecture is used as the main skeleton for the flow of information through the site. It details every clickable page on the site and what it leads to, and how that information is being presented. It is an easy way to see some problems in the flow of information, or to see which pages need to link to each other. We ended up having to go back and change our architecture after prototype testing because we found some problems in the way that people were navigating the site.

Screen Shot 2018-01-26 at 12.48.48 AM.png

BRANDING BRAINSTORMING

Our branding began with a brainstorming session - 10 minutes of silence, writing down anything that came to mind on sticky notes. No judgement, no holding back, just allowing a stream of consciousness to flow onto the paper. From that we arranged the different ideas into categories: color, texture, concept, and imagery. We then tried to group sticky notes that went well together, so that each group had all the aspects. From that we arrived at a few complete ideas, one of which was the hive concept we stuck with.

BRANDING EVOLUTION

Mood Board

We created a mood board that embodied some elements we wanted to explore, including colors, shapes, typography, and inspiration we found other places online. Comparing this to the final design, you can see how each idea influenced our final branding and design.

Logo Design

Our first goal was to create a logo that embodied the “hive” concept, but without being too beehive-like. After deciding on a color scheme, we made a few versions of a logo in different colors. We then played with different backgrounds for the logos, imagining it being used as the homepage for our site.

Screen Shot 2019-02-21 at 10.55.41 AM.png

Final Logo/Homepage Design

After receiving some feedback during prototype testing that our branding looked more like a science conference than a design conference, we reevaluated the use of the photo of San Luis Obispo in the background. We went for a more abstract look that was simple and clean, without a distracting background.

Screen Shot 2019-02-21 at 10.57.01 AM.png

Headers

In addition to other subtle elements, like images in the shape of hexagons, each page on the website has a header that uses the hexagons in a way that is clean and not overpowering. Each one is different, but cohesive with the others.

Screen Shot 2019-02-21 at 10.59.13 AM.png

SKETCHES AND STORYBOARDS

Desktop and Mobile Sketches

Before writing any code, we made sure to sketch out every page of every site to make sure everyone had the same idea of how the website was to be structured and designed. These sketches were a product of going through scenarios of how different customers would use the site and making sure that their needs were easy to navigate.

Desktop Sketches

Screen Shot 2019-02-21 at 11.01.51 AM.png

Mobile Sketches

Screen Shot 2019-02-21 at 11.02.06 AM.png

Scenarios

Scenarios are short stories about a user trying to accomplish a task that would involve using the website. It doesn’t comment on how they actually do this, or how the design of the site plays into it, but rather focuses on more information about the user and how their personal information factors into how they use the site. We came up with three scenarios.

Scenario 1:
Someone is at the conference and is not sure where the workshop they are going attending is being held. They don’t like getting lost and are running late. They take out their phone and go to the design conference website. Once on the home page, they navigate to the hamburger menu to see if there is some sort of map or directions. They see the map link and click on it hoping it will guide them. Once the map comes onto the screen, they look for the room number and start heading in that direction.

Scenario 2:
Kelly is a young designer who is looking to gain more leadership experience and teach design. She had attended the 2016 AIGA Conference and found it incredibly rewarding, and is looking forward to this year’s conference. She already knows that she wants to register, and plans on signing up as soon as it opens. Kelly works a 9-5 job at a design firm on the email campaign team, and doesn’t travel very often because she spends a lot of free time on freelance design work. She is looking forward to going out of town for the conference and seeing San Luis Obispo. Kelly wants to be able to register for the conference in few steps and spend more time learning about the conference area.

Scenario 3:
Josh just started a new teaching job at a University as a professor that teaches typography. The University has offered to pay to send him and a few colleagues to the AIGA conference this year, and it will be his first time going. He has no idea what to expect, but is looking forward to integrating the things he learns into his classes. He wants to be able to easily register for the conference and read all the bios of the speakers and their workshops to know which would benefit his classes the most. He also wants to meet more seasoned teachers to see if they have any advice or new ideas to share with him.

Storyboards

We used storyboards to depict a sequence of events that was a key aspect of the use of the website. It forced us into the shoes of the user and helped us perfect our information architecture and make sure that information is easily accessible by users. Inspired by the scenarios, we made a few storyboards that were most relevant to areas that we weren’t confident in quite yet.

Screen Shot 2019-02-21 at 11.05.54 AM.png

PROTOTYPE DESIGN

Prototype Design Using Adobe XD

Once we were satisfied with the sketches we created for the look and function of each page of the website, we began prototyping the mobile website. Referring to our information architecture, we designed the individual pages and then linked them together based on how the user would move through the site.

Screen Shot 2019-02-21 at 11.06.43 AM.png
Screen Shot 2019-02-21 at 11.06.57 AM.png

GUERILLA PROTOTYPE TESTING

Prototype Testing Script

We planned to have five randomly selected students and professors test our site to see how they interacted with it, and if they were able to accomplish the tasks that a typical user would need to accomplish. When we got a subject to agree to a test, we had them sign a consent form, and assured them that this is not testing them, its testing the website. There are no wrong answers, because when they find things that are wrong, it helps us improve our site. We want their total honesty, and the more feedback they can give us, the better. We would first start by giving them five tasks, but then would open it up to general comments about the design and aesthetics of the site.

Tasks

Before telling them the topic of the conference, tell them this is a mobile site for a conference and show them the homepage. Allow them to interact with it while you give them their first task.

1. What is this site for? What is the topic of the conference? What other information would they want to know right away?

2. You have never heard of SLO and want to know where it is and what it is like there. How would you find that information on the site?

3. You have heard the speaker Phillippe Stark will be there and want to find more information about him. How would you do that?

4. You have been to the conference before and want to quickly register for it. How would you do that? 5. Spend a minute or two navigating the rest of the site. Is there any information you are missing?

Recording Data

Notes were taken by one group member as another led the subject through the test. We watched the person’s screen
to see exactly how they interacted with the site, and told them to speak out loud about what they were doing. We wrote down as much information as possible, including notes about what they tried to click, what they didn’t notice, when they got stuck, what feelings they expressed, and what they outright complained about. We then complied this data into a spreadsheet, where we wrote down main categories and colored in the boxes if the subject had an experience that fell into that category. We then came up with solutions for those problems.

Screen Shot 2019-02-21 at 11.11.59 AM.png

FINAL WEBSITES

Here are most pages of the final website, shown in mobile, desktop and tablet versions. All sites are fully responsive and were created using HTML, CSS, JavaScript, and Animate.

Home Page

Screen Shot 2019-02-21 at 11.13.53 AM.png

About Page

Screen Shot 2019-02-21 at 11.14.55 AM.png

Schedule Page

Screen Shot 2019-02-21 at 11.18.17 AM.png

HTML EMAIL

The HTML Email is designed to be the first point of contact with the potential customer - anyone who is an AIGA member would receive this email letting them know that registration has begun for the conference. It is their first introduction to the branding of the conference, even before they see the website. The HTML Email was created using tables and hosts the images on a server so they appear using different mail services.

CONFERENCE COLLATERAL

Posters

Screen Shot 2018-01-26 at 12.56.06 AM.png
 
 

Skills/Programs:

  • HTML/CSS

  • Branding

  • Wireframing

  • User testing

  • Information Architecture

  • Guerilla Testing

  • HTML Email

  • Adobe Dreamweaver

  • Adobe Photoshop

  • Adobe Illustrator

  • Adobe XD