Canopy
by Ethan Newburger
Contents 1. Overview
4. Style
2. Research
5. Testing
3. Planning
6. Prototype
1. Project Overview
The Problem
The Solution
Ohio State students are continuously under pressure to meet increasingly high academic demands, spurring university-wide initiatives for mental health. The goal of this app design project is to create a digital experience to either reduce stress or increase positivity in the lives of college students. This designed system should be a platform or tool that enables, supports, and inspires individuals and communities in their pursuit of happiness.
With the initial idea inspired by classmate Nick Romanawski, I created a platform for new students and student organization leaders to connect, share information, and have more opportunities to build a sense of belonging at Ohio State University’s campuses. This app will be a redesign of the existing Ohio State: Discover iPad app
Existing App
Option to search by category
Random organization suggestions
Calendar of campus-wide events “Get Involved� is one of multiple sections of the app
Stakeholder Insights Nick Romanawski As a second year student and employee for the OSU Digital Flagship Initiative, Nick works alongside the app development team and has identified issues with the existing app.
Goals for the Redesign • Create a customized feed of relevant events and experiences • The app should be informative, yet feel hip, playful, and relatable. It should bridge the gap between OSU developers and what students really want • Provide value for using the app, offering unique features that aren’t available using the Office of Student Life website
Inspiration Nick suggested looking at the Apple Music survey for inspiration on surveying interests in a playful way
App Description Canopy is a new app for Ohio State students to discover events and meetings hosted by student organizations on campus. Drawing reference from the existing “Ohio State: Discover� iPad app, this re-imagining provides personalized suggestions for involvement, based on an initial interest survey, community-based identities, and postevent feedback, continuously promoting new ways to experience campus life.
2. Research
Competitor Analysis
Eventbrite
Meetup
Facebook Events
Navigation
Search has a “mood” filter, simple navigation
Straight-forward, has messaging component
Home feed has lots of types of info – confusing!
Usability
Easy to use
Easy to use, good interests quiz at set-up
Integration with Facebook is successful
Aesthetics
Fun illustrations, lots of inviting orange
Fun motion design, but tacky filter on all photos
Looks clean, but lacks personality
Function
Intelligent suggestions
Intelligent, organized around groups
Intelligent, suggestions based on past events
Student Interviews I conducted four 30-minute in-person interviews with current Ohio State students: two freshmen and two upperclassmen that hold leadership positions in student organizations on campus. Insights from these conversations inspired four distinct personas.
Underclassman #1 • Knew exactly what he wanted to join at Ohio State • Extremely sociable and never used the iPad app
Underclassman #2 • Wants to get more involved on campus • Doesn’t use any app for discovering social events
Upperclassman #1 • Wants to grow membership and develop leaders • Feels he’s marketing to the wrong people
Upperclassman #2 • Leads a committee for a large, complex organization • Focused on increasing fundraising
Leadership Survey Survey responses from 31 upperclassmen student organization leaders
If there was a central university-wide application that could target specific students for you to advertise your organization’s events to, do you think you or someone on your executive board would be willing to upload information about upcoming events on a monthly basis?
Yes Maybe No
Aside from the involvement fair, how do you usually broadcast your events to new members? Top 4 answers below: Social Media
Word of Mouth
Physical Flyers
College Newsletters
Can you think of any special features of this app that might help YOUR specific organization promote to new members? (Repeated responses denoted with multiple dots) Categorization of organizations Can send info to specific groups of students Social media integration Calendar of weekly meetings Sync personal or academic calendars Something to help orgs collaborate with each other Videos and photos Applications
Developer Interview Chris Fish Chris is the Project Manager for the Ohio State app and all its variations, including “Ohio State: Discover.” He works with a team of 5 client-side and server-side developers.
App Development • “Ohio State: Discover” had a tight deadline • The other 2 sections: “For You,” and “Course Planner,” were prioritized and “Get Involved” was left underdeveloped • App usage was high during orientation
“Get Involved” Wish List • Personalization • An employee to monitor content • Maintaining lists of group membership • A student job board
Pain Points • Lack of incentive to return to the app as the autumn semester progresses • Lack of personalization
Goals • Students should receive a customized experience that uses machine learning to predict events of interest • Student organization leaders should be able to target market groups of students directly • Help make a large campus feel small
3. Planning
Persona Studies
James
Maya
I created four fictional archetypal characters that would guide the remainder of the design of the Canopy app. Each persona is based off of real college students who participated in interviews in the research stage.
Sean
Sam
Basic Demographics Age, Rank:
18, Freshman
Major:
Undecided, Maybe Economics
Living:
4-Person Suite Taylor Tower
Hometown:
Dayton, Ohio
Smart Technologies Owned
James P. Freshman
Goals for Getting Involved
“I can’t wait for everything to get started already! I know exactly how I want my first year to go.”
• Has specific plan for clubs to join: try out for mock trial, find a service organization, join a social fraternity • Wants to make as many friends as possible in his first few weeks
Getting Involved Frustrations • As school progresses, he becomes increasingly stressed and has much less free time • Faces the possibility of being rejected from clubs he wants to join
About James As a life-long Buckeye fan, James has always known that he wanted to go to Ohio State. In high school, James loved mock trial and volunteering and wants to continue those activities on campus. James quickly made friends with his floormates and is excited for football season to start. He went to the fall involvement fair to talk to the clubs that he knew he wanted to join and gave each one his email address to send him information about their first meetings. He was told about the “Ohio State: Discover” iPad app at orientation but has not found a need to use it, since he already has all the information he needs.
Basic Demographics Age, Rank:
18, Freshman
Major:
Biochemistry, Pre-Vet
Living:
2-Person Dorm Smith-Steeb Hall
Hometown:
Chicago, Illinois
Smart Technologies Owned
Maya R. Freshman
Goals for Getting Involved
“I’m still struggling to get involved on campus. I miss my dog and my friends from back home.”
• Develop a tight-knit group of friends, especially since she’s now so far from home • Wants to participate in community service to prepare for her graduate school applications in a few years
Getting Involved Frustrations • Doesn’t know what she wants to join and feels overwhelmed by the number of organizations on campus • Feels apprehensive about attending a club’s first meeting alone
About Maya Maya is a straight-A student who excelled in high school, where she had a great group of friends and a large family surrounding her. She’s passionate about animals and hopes to become a veterinarian. She is nervous about not having best friends right away, and hasn’t yet felt at home on campus. Maya has scrolled through the “Ohio State: Discover” app, hoping to find the right club to join, but none of the community service or animal-related clubs had uploaded info about their meeting times. Maya wants to attend more meetings and events, but doesn’t know where to start.
Basic Demographics Age, Rank:
21, Junior
• Unreliable leadership team
Major:
Computer Science Engineering
• Small membership body results in poor turnout to some meetings
Living:
2-Person Apartment East of Campus
• Difficulty retaining members
Hometown:
Cleveland, Ohio
Smart Technologies Owned
Sean F.
President, GrOSU Goals for His Organization
“We want new faces to show up at meetings, but I think we’re marketing to the wrong people.”
Leadership Frustrations
• Recruit new members at the beginning of the school year • Develop more dedicated members who can take on leadership positions • Increase membership specifically from agriculture-related majors
About Sean and GrOSU Sean created GrOSU last year in order to engage fellow students in sustainable agriculture by planting gardens around campus and teaching members about caring for them. His new club has approximately 10 regular members. Both Sean and his professor, who serves as an advisor the club, want to see the club’s membership and activity grow. Sean loves to be outdoors, and takes a lot of pride in the gardens he has developed both at home with his parents and on campus. He loves being active and meeting as many people as he possibly can.
Basic Demographics Age, Rank:
21, Senior
Major:
Political Science & Communications
Living:
5-Person House South of Campus
Hometown:
Cincinnati, Ohio
Smart Technologies Owned
Sam T.
Director of Campus Engagement, BuckeyeThon “How can we best inspire more students to become passionate about funding cancer research?”
Goals for Her Organization • Increase attendance at “signature events” throughout the school year and at the main event • Get a higher percentage of those who register for BuckeyeThon to meet their fundraising goals
Leadership Frustrations • Difficulty maintaining enthusiasm of registered participants all year • Within BuckeyeThon, she struggles with encouraging people outside of her committee to feel accountable for recruitment goals
About Sam and BuckeyeThon Sam joined the BuckeyeThon team during her freshman year because she had lost a cousin to pediatric cancer and is passionate about funding cancer research. Throughout her time at OSU, she worked her way up to her director position, and now leads a committee of 12 members. Her committee focuses on motivating participants outside of the BuckeyeThon general body to register and fundraise throughout the year. Outside of BuckeyeThon, Sam has an incredibly packed schedule, with her two majors, an intramural soccer team, and juggling other involvements.
Fill in interests
Student Side
Register account by logging in with OSU credentials
Get notifications about meetings & events
Visit feed & sort through suggested organizations
Subscribe to clubs & RSVP to meetings & events
Fill out postevent survey
Attend president training
Leader Side
User Journeys
Attend orientation
Search for & subscribe to clubs he wants to join
Register account, syncing student org. database information
President gives Sam access to edit leader view
BuckeyeThon President attends president training
Register account, syncing student org. database information
Attend meetings & events
Set meeting schedule & reminders for subscribers
Update regularly
Set future events & reminders for subscribers
Revisit for each event
Edit page, creating tags & defining target audiences
Sitemap – Registration Student Side
Leader Side
*
Login with OSU Name.#
Sync Bitmoji
Select Organization and Your Role
Demographics
Edit Information
Community Membership
Add Media
Interests
Create Weekly Meeting Schedule
Custom Interests
Setup Tags
Register as a Leader
*
Setup Target Audiences
Sitemap – Returning User Student Side
Feed
Search
Alerts
Bio
Chat
Organization
Top Picks
Event Survey
Edit Info
Conversation
Application
Search Results
Confirmation
View as Leader
Confirmation Event RSVP Confirmation
Leader Side
Feed
New Event
Members
Club Settings
Chat
Event Page
Target Audience
List
Edit Info
Conversation
Create RSVP
Statistics
View as Student
Set Alerts
Wireframes
Feed
Search
Alerts
Bio
Chat
Organization Page Application Event Page Top Picks
Search Results Post-Event Survey Edit Bio Conversation
4. Style
Moodboard
fresh resourceful personal
playful
App Name Canopy refers to the scarlet tents set up for the annual Student Involvement Fair where students can meet organization leaders and receive information about meetings. Canopy seeks to digitize these interactions for the other 364 days of the year.
Logo
Canopy Canopy
Canopy
Canopy
Logo Anatomy
Colors
Scarlet
Gray #e5e5e5
#bb0000 Colors are sampled from the official Ohio State University brand colors
Secondary Colors These colors should be used sparingly, in: • The custom “Block O” pattern students create in their profile setup • Reference to the categories of student organizations
Used in the Canopy logomark and in various UI elements to draw emphasis
Shades of gray are used in the majority of the app’s interface, using 50% and 100% black for text
#851e5e
#d65828
#909738
#26686d
#442369
#dcaa38
#d4df48
#6ebbab
#92b0d7
#ffeaae
#453831
#dddec6
Typography Logo
Headings
Body Copy
Capita
Proxima Nova
Proxima Nova
Aa Bb Cc Dd Ee Ff Gg Hh Ii Jj Kk Ll Mm Nn Oo Pp Qq Rr Ss Tt Uu Vv Ww Xx Yy Zz
Aa Bb Cc Dd Ee Ff Gg Hh Ii Jj Kk Ll Mm Nn Oo Pp Qq Rr Ss Tt Uu Vv Ww Xx Yy Zz
Aa Bb Cc Dd Ee Ff Gg Hh Ii Jj Kk Ll Mm Nn Oo Pp Qq Rr Ss Tt Uu Vv Ww Xx Yy Zz
1234567890
1234567890
1234567890
Extrabold Italic
Semibold
Light
Headings
Canopy
Typeface: Capita
Size: 57 pt
Weight: Extrabold Italic
Typeface: Proxima Nova
Size: 53 pt
Weight: Semibold
Typeface: Proxima Nova
Size: 45 pt
Weight: Semibold
Typeface: Capita
Size: 32 pt
Weight: Extrabold Italic
Typeface: Proxima Nova
Size: 32 pt
Weight: Semibold
Heading 3
Typeface: Proxima Nova
Size: 29 pt
Weight: Light
Heading 4
Typeface: Proxima Nova
Size: 17 pt
Weight: Semibold
Body Text
Typeface: Proxima Nova
Size: 13 pt
Weight: Light
Name of Page
Heading 1
Some Buttons Heading 2
Iconography
Student Side Navigation Icons
Feed
Additional Icons
Search
Alerts
Bio
Chat
Members
Club Settings
Chat
Leader Side Navigation Icons
Feed
New Event
General
Buttons
Subscribe
Yes
Edit Information
Subscribed
No
Edit Bitmoji
Register as the leader of a student organization
Back
Apply
Registration
Official Member
Continue to app
Academic Program
Academic Program
Community Service
Community Service
Performing Arts
Performing Arts
Interest buttons become one of the secondary colors when pressed
Submit Back to Student Organization Page
Post-Event Survey
Next Works in schedule
Works in schedule
Bitmoji Canopy connects to Bitmoji, a popular application where users create unique avatars. A user’s Bitmoji will show up in multiple locations within Canopy, giving users the opportunity to ‘see themselves’ in various student organizations.
“My Block O” Visual Arts Community Service Writing & Journalism
As students build out their profiles, marking information based on demographics and interests, they build their own unique Block O pattern, which corresponds to the identities and interests they’ve selected. This pattern will be used in other areas of the app, in efforts to customize the user experience.
Sports Greek Life Technology Governing Organizations Performing Arts Activism & Awareness Outdoor Activities
Layout Elements in Canopy are organized on a 26x26 pixel grid. The margins of each page are two 26x26 boxes wide.
5. Testing
Usability Testing The Prompts • Register your profile as Sam Thompson (her interests were provided to classmates) • RSVP to the Nourish Ugly Sweater Sale • Reply to the message sent by Talia Zaverdinos of Nourish International • Take the post-event survey about the Nourish fundraiser from last week • Find a list of clubs that are focused on “sustainability” • Edit your interests in your bio
Classmates were given a number of prompts to follow, while clicking through the hi-fidelity prototype of Canopy and usability errors were noted and fixed.
Usability Testing Usability Fixes • Place notifications on navigation bar icons • Clubs in Search need images • Should be able to click Nourish International from the Feed • Simplify upcoming events calendar
Cosmetic Fixes • • • •
Center event times on Feed Make magnifying glass in Search scarlet Equal spacing on login screen Make Search illustration more in the style of a Bitmoji illustration
6. Hi-Fidelity Prototype
Registration
Feed Pages
Search Pages
Alert Pages
Bio
Chat
Major Updates Personalization measures, including “My Block O,� Bitmoji incorporation, machine learning from registration interests quiz and post-event surveys Playfulness added with color-coded categories of organizations, dynamic quiz styles, and Bitmoji illustrations throughout A built-in chat section for students to connect with student leaders Opportunity to develop leader-side student organization management system
Thank you! Ethan Newburger