skillset.mtsumura/boing-presentation.pdf · throughout this course i have developed my visual...

skillset.ThroughoutthiscourseIhavedevelopedmyvisualdesignandbrandingskills.InthisfinalchallengeIwanttoshowcasetheseskillsbycreatinghighfidelityinterfacemockupswithastrongbrandidentity.

about.Boingisanappdesignedtoconnecthighschoolstudentswithlocalvolunteeropportunitiestobuildtheirresuméandcompletetheirrequiredhoursforgraduation.

Thisappusesasocialaspecttoencourageandinspireusersbasedonwhattheirpeersaredoing.Boingcaterstotheneedsofthisaudiencebyallowinguserstofiltertheireventsearchesbasedonanumberoffilters.

value.

+Boingprovidesvaluetoitsusersasittakesallofthehardworkoutofsearchingandapplyingforvolunteeractivities.

+Forhighschoolstudents,whoarerequiredtofulfillaminimumof40volunteerhoursthroughouttheirhighschoolcareertograduatethisremovesfrustrationpointsfromtheprocess

+Boingalsohelpsthedifferentnon-profitorganizationsintheVancouverfillvolunteerpositionsthatmayotherwisebeemptybecauseofpoormarketingandadvertisingoftheeventanditsopportunities.

+TheeventandorganizationwillreceivegreatexposurewithBoingasuserssignupandinvitetheirfriendstojoin.

users

stakeholders$ $

audience.

Ages13-18

ExperienceGoals+Easilysearchandfilterthroughvolunteeropportunities+Findanopportunitythatbestsuitstheirneeds

EndGoals+TomeetrequiredvolunteerhoursstatedbytheVancouverSchoolBoard+Tobuildresumewithvaluablevolunteerexperiences

Characteristics+TechSavvy+Involved+Self-Motivated

high school students

visual language.

type

logo

abcdefghijklmnopqrstuvwxyz

1234567890$:;()*~!?.,<>{}[]\|

ABCDEFGHIJKLMNOPQRSTUVWXYZ

LONDON BETWEEN REGULAR

abcdefghijklmnopqrstuvwxyz1234567890$:;()*~!?.,<>{}[]\|

ABCDEFGHIJKLMNOPQRSTUVWXYZBROWNBOLD

abcdefghijklmnopqrstuvwxyz

1234567890$:;()*~!?.,<>{}[]\|

ABCDEFGHIJKLMNOPQRSTUVWXYZ

BROWNLIGHT

Helpingyouhelpyourcommunity.

VARIATIONS1

2

3

1LogoGraphic/Agradientswooshtorepresentactionandmovement.

2Tagline/“Helpingyouhelpyourcommunity.”AstraightforwardmessagetoteenstodescribethepurposeandgoalsofBoing.

3Logotype/AcustomizedversionofLondonBetween.Thisgeometrictypefacecombinessharppointsandroundedcharacterstocreateafunandyouthfulappearance.

palette

WHITE#FFFFFF

MARINE#2FC9AB

MINT#EFFFF4

DEEPTURQUOISE#427F74

BLACK#000000

CHARCOAL#333333

MIST#E2E2E2

visual language.

elements

process.wireframe sketches

process.grayscale wireframes

final product.interface mockups

splashscreen login profile


viewrecommendedevents

friends’ activities are shown on the profile screentoencourageuserstogetactiveandvolunteer,maybeeveninviteafriend

settings


Thevolunteertaballowsuserstofindtheperfectvolunteeropportunityandinvitefriendstohelplendahand.

Whencanyouattendtheevent?

Whereisagoodlocation? Whatareyourareasofinterest?

Whodoyouwanttoinvite?


Eventspagelandsonrecommendedevents

Filtereventsbasedonpersonalpreferences

Viewresultsandtapviewtoseemoredetailsandapply!


Detailedeventpage Applicationfortheevent

Contacttheorganizationdirectly

Openmapstoseethebestroute

Adialoguepopupwillprompttheuserofthenextstepsintheprocess

Images[CanuckPlaceLogo]-RetrievedAugust6,2016fromhttps://www.canuckplace.org/drive/uploads/2015/03/CPCH_PrimaryLogo_PMS_Vert.jpg

[DanicaAnderson]-RetrievedAugust10,2016fromhttps://www.pexels.com/photo/woman-girl-outdoors-blonde-26435/

[DouglasCollegeLogo]-RetrievedAugust6,2016fromhttps://douglas.staging.bayleaf.com/~/media/0DFFDAF96EE94427A631F0B592DC6DE5.ashx?la=en

[Forest]-RetrievedAugust6,2016fromhttps://www.pexels.com/photo/wood-nature-sunny-forest-1826/

[FunSocietyLogo]-RetrievedAugust6,2016fromhttp://static1.squarespace.com/static/5697c9814bf118ce98cad80c/t/5697cb3ddc5cb48ef9bd3664/1470029989452/?format=1000w

[RichardSu]-RetrievedAugust10,2016fromhttps://www.pexels.com/photo/happy-men-conversation-people-38940/

[SpecialOlympicsBCLogo]-RetrievedAugust6,2016fromhttp://www.specialolympics.bc.ca/sites/default /files/SO_British_Columbia_Center_2c-Grey.jpg

[StanleyPark]-RetrievedAugust6,2016fromhttps://upload.wikimedia.org/wikipedia/commons/b/b0/Vancouver-stanley-park.jpg

[StanleyParkEcologySocietyLogo]-RetrievedAugust6,2016fromhttp://www.miss604.com/wordpress/wp-content/uploads/2015/03/SPESLogoFourLine-e1427233409733.png

[TeenVolunteering]-RetrievedAugust10,2016fromhttps://www.google.ca/url?sa=i&rct=j&q=&esrc=s&source=images&cd=&ved=0ahUKEwjVisLHnbvOAhVL5WMKHWaTAvIQjBwIBA&url=http%3A%2F%2Fphotos.projects-abroad.ca%2Fprojects%2Fcare

references.

%2Fcosta-rica%2Fvolunteer-and-children-outside.1200.jpg&bvm=bv.129422649,d.cGc&psig=AFQjCNHNtZblsvIpSOFYuoemr4ottNM9yg&ust=1471069040516054

[TeenVolunteering]-RetrievedAugust10,2016fromhttp://matchbin-assets.s3.amazonaws.com/public/sites/268/assets/6GI_earthdayjserve_lcdill_021_P.1_Banner_Shot.jpg

[WorldVisionLogo]-RetrievedAugust6,2016fromhttps://lh6.googleusercontent.com/-qqbgtDsaQ1A/AAAAAAAAAAI/AAAAAAAAABs/zq6KjaQ-i9w/photo.jpg

[WWFLogo]-RetrievedAugust6,2016fromhttp://awsassets.wwf.ca/img/original/wwf_panda_logo.jpg

Copyhttp://www.govolunteer.ca/centres/vancouver/nature-house-host-3

InterfaceInspirationInstagramYelpAirBNBiOSAppGuidelines

FontsBrownLondonBetweenSanFrancisco

skillset.mtsumura/boing-presentation.pdf · throughout this course i have developed my visual...

Documents