ALUMNI APP · 2014-04-03 · red, making it the primary colour of the Alumni App Layout. All other...
Transcript of ALUMNI APP · 2014-04-03 · red, making it the primary colour of the Alumni App Layout. All other...
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!