ALUMNI APPDESIGN & SYSTEMS • YSDN 3005

April 3 2014

NORA LECACAMILLE POMPONI

LAUREN DEWARANNA LAING

FEATURES

N EWS

SOCIAL

M E NTOR SH I P

EVE NTS

DONATIONS

PHASE ONE RESEARCH

SCENARIOSPHASE ONE

open app log in screen main menu

my profile social

Connections

View profile

Write NewPost New

InboxNews

events

event info

mentorship settings

introduction blurb

become a mentor find a mentor

mentor profile

request mentor

time elapses, mentor connects to alumni via the messaging function

• Mission Statement• Facts & Figures• Where $ goes• Security

• Category Selection• Payment Information• Payment Summary

• Filter by: Department Location Class

• Filter by: Department Location Class

• Attending Yes No Maybe

• Filter by: Class Department

• Connect• Write Message• Request Mentor

donations

information

donate now

make payment

PROTOTYPINGPHASE TWO PROTOTYPINGPHASE TWO

TEST 1You decide you’d like to see the news about the school and commu-nity. After exploring the news section, you write a post about an event you recently attended to share with your connections.

TEST 2While a student at York, you were involved in the Hockey and Soccer teams, and you’d like to give back to the school so other students can continue to enjoy playing on these great teams. You decide you’d like to donate to York University, with a specific focus on these teams.

USER TESTINGPHASE THREE

TEST 3You studied English at York, and have recently landed a job as a writer at Nature Magazine, but a lot of the articles you are writing are very scientific. You’d like to see if you can find a mentor in Toronto using the app to mentor you in the sciences. After you’ve found one, you check your inbox a week later to see if they’ve sent you a mes-sage as a mentee.

TEST 4You’d still like to participate in the school community and network with other English majors as an alumni, so you decide to check out the events section in the app to see if there’s an event in Toronto you could attend to network with other writers

USER TESTINGPHASE THREE

FE E DBACK

+

+

+

Aesthetics. Users appreciated clean approach to layout, understood tie-in to the university and thought it effective.Intuitive. (with some minor changes) Users understood how to use app easily, with clarification of icons meaningUseful app. Appreciated more passive role, can choose what to par-ticipate in without feeling harassed.

–

–

–

Icons were not all readable. Some confused user, required guesses to use some filtering options. Confusing elements in donations section. Clarify what is a button, what is text field, etc. Features not noticed by users need to be made more “clickable”(includes personal profile, mentorship denotation in inbox, connection icons and linking system)

USER TESTINGPHASE THREE

DEVE LOPE D A PROMOTIONAL

WE B SITE FOR TH E APP

PROMOPHASE FOUR

REFININGPHASE FOUR

U N I FY VISUAL STYLE

SUBMIT

SUBMIT

SUBMIT

SUBMIT

SUBMIT

SIGN OUT

SUBMIT

SUBMIT

SUBMIT

SUBMIT

R E FI N E USE R I NTE R FACE

REFININGPHASE FOUR

refined icons for claritymodified donations section for easier usestandardized buttons and appearance for clearer calls-to-actionpopulated app for fewer “dead ends”

REFININGPHASE FOUR

STYLE GUIDEPHASE FOURTYPOGRAPHY

The typeface to be applied is Akzidenz Grotesque

with the use of three different typestyles. These

individual style choices were selected for the

purpose of hierarchy and layout legibility and are

to be used according to the given scenario.

ANNOTATIONS:

• Light • All Caps •12pt

BUTTONS:

• Regular •14 pt

SUBTITLES:

• Light• All Caps• 20 pt

TITLES:

• Bold• 16 pt

CONTENT:

• Light •12 pt

MENU TYPE:

• Regular• 20 pt

HEADING:

• Regular• All Caps• 20 pt

ABCAkzidenz Grotesk Light

ABCDEFGHIJKLMNOPQRSTUVWXYZ

abcdefghijklmnopqrstuvwxyz 1234567890

ABCAkzidenz Grotesk Regular

ABCDEFGHIJKLMNOPQRSTUVWXYZ

abcdefghijklmnopqrstuvwxyz 1234567890

ABCAkzidenz Grotesk Medium

ABCDEFGHIJKLMNOPQRSTUVWXYZ

abcdefghijklmnopqrstuvwxyz 1234567890

STYLE GUIDEPHASE FOUR

The palette choice has been made to represent

the colours specific to the institution. In this

case, York University’s brand colour is medium

red, making it the primary colour of the Alumni

App Layout. All other alternative colours can be

applied to support the primary colour(s) to the

scenario as follows:

Primary:

BLACKBRAND COLOUR

CHARCOAL

MEDIUM GREY

LIGHT GREY

WHITE

Alternative:

C0 M0 Y0 K100R35 G31 B32HEX: 000000

C32 M27 Y27 K0R176 173 B173HEX: AFAEAE

C0 M0 Y0 K0R255 G255 B255HEX: FFFFFF

C22 M99 Y97 K14R174 G34 B38HEX: AD2027

C69 M63 Y62 K58R52 G51 B51HEX: 333333

C17 M13 Y13 K0R209 G209 B209

HEX: D1D1D1

COLOUR PALETTE

WHITE

LAYOUT

ACTION BAR:

Colour: CharcoalHeight: 45 px

DROP DOWN BOX:

Colour: WhiteHeight: VariableTop Margin: 0pxSide Margin: 6pxPadding: 6pxBorder: 6px, Light GreyCorners: Rounded

INFORMATION BOX:

Colour: WhiteHeight: VariablePadding: 6pxMargins: 6pxBorder: 6px, Light GreyBottom Border: 26px, Light GreyCorners: Square

SUBMIT

SUBMIT

SUBMIT

SUBMIT

SUBMIT

SUBMIT

SUBMIT

SUBMIT

SUBMIT

SUBMIT

SUBMIT

SUBMIT

SUBMIT

SUBMIT

SUBMIT

BUTTON VARIATIONS:

NAVIGATION BAR:

Colour: RedHeight: 45 px

OPTION BAR:

Colour: Light GreyHeight: 45 px

Width: 60% Centred

BACKGROUND:

Colour: Medium Grey

RED:Call to Action Options

GREY:Passive Options

HIGHLIGHT PHOTO:

Height: 195px

OVERLAY BAR:

Colour: CharcoalHeight: 45 pxOpacity: 85%

STYLE GUIDEPHASE FOUR

STYLE GUIDEPHASE FOUR

Section Icons:

The app has six major sections which consist of:

News, Events, Connections, Inbox, Donations and

Mentorship. Each section has it’s own identifiable

icon and also consists of other icons that are to

be used within each section for easy navigation

and user convenience.

Basic Navigation Icons:

These icons are to be applied only for navigation

and search purposes. They will either be ever

present on the screen, or as filtering icons.

The icons hold an important roll within the Alumni

App for navigation and search purposes. As

mobile devices have small screens, it is a logical

choice to use to indicate a specific theme or

action. In this instance the Alumni App contains

two icon families. The first family being for basic

navigation around the app and the second for

more specified navigation.

ICONS

ICON TREATMENT 1

ICON TREATMENT 2

ICON TREATMENT 3

ICON TREATMENT 4

NEW POST

SEARCH

SELECT

CANCEL

ADD

BACK

HOME

FILTER

NEWS

EVENTS

CONNECTIONS

INBOX

DONATIONS

MENTORSHIP

SETTINGS

ADDCONNECTION

CONNECTED

LOCATION

ALUMNI STATUS

TAGCONNECTION

NOTIFICATION

ACADEMICS

PROFESSIONAL

PHOTOS

THAN K YOU!