top of page
Anchor 2

Website Design

January 2014

Zoe Hardley, Shang Qi

This is an open project. At the beginning, we decided to simulated a Ted Talk website for Emily Carr University as a group. We researched on the target audience, and planed out the structure of the website. Then, we worked individually on building wireframes. 

Objective

Homepage

Homepage

Talk

Talk

Events Page

Events Page

Event Details

Event Details

Login Page

Login Page

Create Account

Create Account

Apply as a speaker

Apply as a speaker

Design Process

Persona

Mike Jones (23)

Male, Student

 

Interests: 

- Interested in social media’s effect on political campaigns.

- Meet potential future partners

- Build up networks and make connections with people in his field, as well as related design fields

 

Problems:

- Scheduling and timing of events

- Location of events, and commuting

- Being notified of interesting events

Finding events have more specific relevance to him personally

Anna Bourtuga (38)

Female, Creative Director

Company: local Vancouver ISP company “Nouvo”

 

Interests

- Further branching out her company

- Meet new investors 

- Share her experience creating a startup

- Meet with existing professional contacts

 

Problems:

- Utilizing social media as means of promoting her company

- Finding potentially talented individuals through meeting them

- Understanding her company through the perspectives of the users

- Developing customer loyalty through good service and consistency

Scenario

Image 02: Scenario flow chart

According to our early research on our target audience. We made scenario flow chart to show thoughts and decisions users might have when they use the website. 

Hierarchy

Image 03: Site Hierachy Chart

We used Card Sorting technique to plan out our site hierarchy. We wrote down what should be included in our site on cards. For example, homepage, videos, contact information, event information, etc. Then, we categorized cards into groups, and gave them hierarchies. 

Wireframe Sketches

tedxecu_wireframe_页面_1.jpg
tedxecu_wireframe_页面_3.jpg
events.png
tedxecu_wireframe_页面_2.jpg
tedxecu_wireframe_页面_4.jpg

click to enlarge

bottom of page