about. Boing is an app designed to connect high school students with - - PowerPoint PPT Presentation

skillset.

Throughout this course I have developed my visual design and branding skills. In this final challenge I want to showcase these skills by creating high fidelity interface mockups with a strong brand identity.

about.

Boing is an app designed to connect high school students with local volunteer opportunities to build their resumé and complete their required hours for graduation. This app uses a social aspect to encourage and inspire users based on what their peers are doing. Boing caters to the needs of this audience by allowing users to filter their event searches based on a number of filters.

value.

+ Boing provides value to its users as it takes all of the hard work

• ut of searching and applying for volunteer activities.

+ For high school students, who are required to fulfill a minimum

• f 40 volunteer hours throughout their high school career to

graduate this removes frustration points from the process + Boing also helps the different non-profit organizations in the Vancouver fill volunteer positions that may otherwise be empty because of poor marketing and advertising of the event and its opportunities. + The event and organization will receive great exposure with Boing as users sign up and invite their friends to join.

users stakeholders

$ $

audience.

Ages 13-18 Experience Goals + Easily search and filter through volunteer opportunities + Find an opportunity that best suits their needs End Goals + To meet required volunteer hours stated by the Vancouver School Board + To build resume with valuable volunteer experiences Characteristics + Tech Savvy + Involved + Self-Motivated

high school students

visual language.

type logo

abcdefghijklmnopqrstuvwxyz 1234567890$:;()*~!?.,<>{}[]\| ABCDEFGHIJKLMNOPQRSTUVWXYZ LONDON BETWEEN REGULAR abcdefghijklmnopqrstuvwxyz 1234567890$:;()*~!?.,<>{}[]\| ABCDEFGHIJKLMNOPQRSTUVWXYZ BROWN BOLD abcdefghijklmnopqrstuvwxyz 1234567890$:;()*~!?.,<>{}[]\| ABCDEFGHIJKLMNOPQRSTUVWXYZ BROWN LIGHT

Helping you help your community.

VARIATIONS 1 2 3 1 Logo Graphic / A gradient swoosh to represent action and movement. 2 Tagline / “Helping you help your community.” A straightforward message to teens to describe the purpose and goals of Boing. 3 Logotype / A customized version of London Between. This geometric typeface combines sharp points and rounded characters to create a fun and youthful appearance.

palette

WHITE #FFFFFF MARINE #2FC9AB MINT #EFFFF4 DEEP TURQUOISE #427F74 BLACK #000000 CHARCOAL #333333 MIST #E2E2E2

visual language.

elements

flow.

process.

wireframe sketches

process.

grayscale wireframes

process.

grayscale wireframes

process.

grayscale wireframes

process.

grayscale wireframes

process.

grayscale wireframes

final product.

interface mockups

splash screen login profile

final product.

interface mockups

view recommended events friends’ activities are shown on the profile screen to encourage users to get active and volunteer, maybe even invite a friend settings

final product.

interface mockups The volunteer tab allows users to find the perfect volunteer

• pportunity and invite friends to help lend a hand.

When can you attend the event? Where is a good location? What are your areas

• f interest?

Who do you want to invite?

final product.

interface mockups

Events page lands on recommended events Filter events based on personal preferences View results and tap view to see more details and apply!

final product.

interface mockups

Detailed event page Application for the event Contact the

• rganization directly

Open maps to see the best route A dialogue popup will prompt the user of the next steps in the process

Images [Canuck Place Logo] - Retrieved August 6, 2016 from https://www.canuckplace.org/drive/uploads/2015/03/CPCH_Pri maryLogo_PMS_Vert.jpg [Danica Anderson] - Retrieved August 10, 2016 from https://www.pexels.com/photo/woman-girl-outdoors-blonde-26 435/ [Douglas College Logo] - Retrieved August 6, 2016 from https://douglas.staging.bayleaf.com/~/media/0DFFDAF96EE9442 7A631F0B592DC6DE5.ashx?la=en [Forest] - Retrieved August 6, 2016 from https://www.pexels.com/photo/wood-nature-sunny-forest-1826/ [Fun Society Logo] - Retrieved August 6, 2016 from http://static1.squarespace.com/static/5697c9814bf118ce98cad8 0c/t/5697cb3ddc5cb48ef9bd3664/1470029989452/?format=100 0w [Richard Su] - Retrieved August 10, 2016 from https://www.pexels.com/photo/happy-men-conversation-people

• 38940/

[Special Olympics BC Logo] - Retrieved August 6, 2016 from http://www.specialolympics.bc.ca/sites/default/files/SO_British_ Columbia_Center_2c-Grey.jpg [Stanley Park] - Retrieved August 6, 2016 from https://upload.wikimedia.org/wikipedia/commons/b/b0/Vancou ver-stanley-park.jpg [Stanley Park Ecology Society Logo] - Retrieved August 6, 2016 from http://www.miss604.com/wordpress/wp-content/uploads/2015/ 03/SPESLogoFourLine-e1427233409733.png [Teen Volunteering] - Retrieved August 10, 2016 from https://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&bv m=bv.129422649,d.cGc&psig=AFQjCNHNtZblsvIpSOFYuoemr4o ttNM9yg&ust=1471069040516054 [Teen Volunteering] - Retrieved August 10, 2016 from http://matchbin-assets.s3.amazonaws.com/public/sites/268/ assets/6GI_earthdayjserve_lcdill_021_P.1_Banner_Shot.jpg [World Vision Logo] - Retrieved August 6, 2016 from https://lh6.googleusercontent.com/-qqbgtDsaQ1A/AAAAAAA AAAI/AAAAAAAAABs/zq6KjaQ-i9w/photo.jpg [WWF Logo] - Retrieved August 6, 2016 from http://awsassets.wwf.ca/img/original/wwf_panda_logo.jpg Copy http://www.govolunteer.ca/centres/vancouver/nature-house- host-3 Interface Inspiration Instagram Yelp Air BNB iOS App Guidelines Fonts Brown London Between SanFrancisco