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. 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.
value. users + Boing provides value to its users as it takes all of the hard work out of searching and applying for volunteer activities. + For high school students, who are required to fulfill a minimum of 40 volunteer hours throughout their high school career to graduate this removes frustration points from the process $ $ stakeholders + 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.
audience. high school students 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
visual language. logo 1 VARIATIONS 3 2 Helping you help your community. type BROWN BOLD 1 Logo Graphic / A gradient swoosh to represent action and movement. ABCDEFGHIJKLMNOPQRSTUVWXYZ 2 Tagline / “Helping you help your community.” A straightforward abcdefghijklmnopqrstuvwxyz message to teens to describe the purpose and goals of Boing. 1234567890$:;()*~!?.,<>{}[]\| 3 Logotype / A customized version of London Between. This geometric typeface combines sharp points and rounded characters to create a fun BROWN LIGHT and youthful appearance. ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz 1234567890$:;()*~!?.,<>{}[]\| LONDON BETWEEN REGULAR ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz 1234567890$:;()*~!?.,<>{}[]\|
visual language. palette elements WHITE #FFFFFF MINT #EFFFF4 MARINE #2FC9AB DEEP TURQUOISE #427F74 BLACK #000000 CHARCOAL #333333 MIST #E2E2E2
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
friends’ activities are shown on the profile final product. interface mockups view recommended events settings screen to encourage users to get active and volunteer, maybe even invite a friend
final product. interface mockups The volunteer tab allows users to find the perfect volunteer opportunity and invite friends to help lend a hand. When can you attend Where is a good location? What are your areas Who do you want to invite? the event? of interest?
final product. interface mockups Events page lands on Filter events based on View results and tap view to recommended events personal preferences see more details and apply!
final product. interface mockups Open maps to see the best route Contact the organization directly Detailed event page Application for the event A dialogue popup will prompt the user of the next steps in the process
references. %2Fcosta-rica%2Fvolunteer-and-children-outside.1200.jpg&bv Images m=bv.129422649,d.cGc&psig=AFQjCNHNtZblsvIpSOFYuoemr4o [Canuck Place Logo] - Retrieved August 6, 2016 from ttNM9yg&ust=1471069040516054 https://www.canuckplace.org/drive/uploads/2015/03/CPCH_Pri maryLogo_PMS_Vert.jpg [Teen Volunteering] - Retrieved August 10, 2016 from http://matchbin-assets.s3.amazonaws.com/public/sites/268/ [Danica Anderson] - Retrieved August 10, 2016 from assets/6GI_earthdayjserve_lcdill_021_P.1_Banner_Shot.jpg https://www.pexels.com/photo/woman-girl-outdoors-blonde-26 435/ [World Vision Logo] - Retrieved August 6, 2016 from https://lh6.googleusercontent.com/-qqbgtDsaQ1A/AAAAAAA [Douglas College Logo] - Retrieved August 6, 2016 from AAAI/AAAAAAAAABs/zq6KjaQ-i9w/photo.jpg https://douglas.staging.bayleaf.com/~/media/0DFFDAF96EE9442 7A631F0B592DC6DE5.ashx?la=en [WWF Logo] - Retrieved August 6, 2016 from http://awsassets.wwf.ca/img/original/wwf_panda_logo.jpg [Forest] - Retrieved August 6, 2016 from https://www.pexels.com/photo/wood-nature-sunny-forest-1826/ Copy http://www.govolunteer.ca/centres/vancouver/nature-house- [Fun Society Logo] - Retrieved August 6, 2016 from host-3 http://static1.squarespace.com/static/5697c9814bf118ce98cad8 0c/t/5697cb3ddc5cb48ef9bd3664/1470029989452/?format=100 Interface Inspiration 0w Instagram Yelp [Richard Su] - Retrieved August 10, 2016 from Air BNB https://www.pexels.com/photo/happy-men-conversation-people iOS App Guidelines -38940/ Fonts [Special Olympics BC Logo] - Retrieved August 6, 2016 from Brown http://www.specialolympics.bc.ca/sites/default/files/SO_British_ London Between Columbia_Center_2c-Grey.jpg SanFrancisco [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
Recommend
More recommend