Ohio Y{ }uA mobile app for Ohio University Communications & Marketing- 4/28/2013

Cassandra Sharpe Jered MarshallGina RanalliBrynn Shuller

Table of Contents1: Project Proposal 2: Persona 13: Persona 24: Persona 35: Persona 46: Inspiration & Comparative Apps7: Userflow & Theme8: Sketches9: Wireframes10: Mock Ups11: User Testing #112: User Testing #213: Development14: Recommendations

Project DescriptionOur goal is to provide a mobile app experience to target perspective students and make them aware of the Ohio University ‘it’s you” marketing campaign. The app will allow users to upload photos of themselves in an Ohio University environment and share it on Facebook, with possibilities of monthly prizes from the best photo.

Project StrategyOur group was split into specific roles each completing different tasks in order to deliver the end product. We used the Lean UX method, which allowed for rapid production and allowed the designers and developers to work together. With Lean UX, there were less complex deliverables, more low-fidelty cycles, and frequent feedback from all members. This required bi-weekly meetings with the entire team, including those involved at UCM.

RolesCassandra Sharpe Lead UX Designer, Project Manager

Jered Marshall Lead Front-end Developer, File Manager

Gina RAnalliLead Designer, Front-end designer

Brynn Shuller Client Contact, UX Designer and Designer

1

Alyssa comes from a small rural town. She is a senior in high school, but is not really

sure where she wants to go to college. She uses online resources like allcolleges.org and

collegeboard.com to try and pick a school that is best for her. Her mother is urging her

to go to an out of state school, so she can gain a sense of independence, but her father

thinks it is more important to go to an in state school, because she will still gain a sense of

independence and be able to come home whenever she wants. Also, in state school tend

to be much cheaper.

Alyssa is very involved in her high school. She is the president of two clubs and is a member

of two others. These include the marching band, volunteer groups, and a ballet group.

Also, she is a great test taker. Her ACT score is 28, and her overall GPA is 3.9. She is not in

any Advanced Placement classes, but she does take a lot of honors courses.

She tends to be a little behind in technology. She pays for school herself, so she put all

of her money towards school. Currently she does not have a smart phone, she has an LG

Cosmos Touch, which she enjoys very much, but this does not allow her access to many

great teaching tools.

age 18sex femaleethnicity caucasianhome jackson, ohoccupation studenteducation high school

Alyssa Sentman

2

Jon is currently a senior at a High School in Cleveland, Ohio. He is a 17-year-old white male from a middle class family. His family comprises of his parents and 2 siblings. His mother attended Kent State University and is now a Registered Nurse. His father attended Wit-tenberg University and is a City Manager. He has two sisters, one who is two years older and another who is 2 years younger. Jon does well in school, maintaining a 3.2 GPA. He plans to achieve a higher education, but is unsure where to attend yet. He would like to go to school with a couple of his close friends. Also, he has a steady girlfriend that he would like to attend the same college as or at least a college within driving distance.

In his free time, Jon enjoys working out, hanging out with friends, and playing video games. He had played JV soccer, but quit in order to have more free time his senior year of high school. He also likes to spend time with his girlfriend. Jon tends to believe he is a “funny guy” and is often the center-of-attention while in a group setting.

Jon has been an iPhone user for a year and a half. He shares a PC laptop with his other two siblings, but since he has his own iPhone, he tends to use that for his internet needs and wants. He uses twitter and Facebook every day. He knows how to download apps. The main apps he uses are sports apps, games, and social media apps. He also uses music apps frequently.

Jon would like a way to communicate with his friends about where they each are attend-ing college. Being a young man, he would like it to be in a non-serious way, therefore over a social media platform would be preferred. Jon is reluctant to join any groups relating to universities.

age 17sex maleethnicity caucasianhome cleveland, ohoccupation studenteducation high school

Jon Generalson

3

Stephanie is 17 years old and a senior at North Valley High School in Cleveland, Ohio. She has blond hair, blue eyes and is an athletically built 5’4”. She is a cheerleader at her high school as well as a gymnast. Her day usually consists of gymnastics in the morning, followed by school. After school, she goes to cheerleading practice. She usually has just enough time to grab a bite to eat before she heads home and does homework. She is al-ways on the go.

Stephanie uses her iPhone constantly because her days are so packed full. She likes to stay up to date with things going on with her friends as well as playing games on her phone during a quick break. Her phone is her main source of communication during the day.

Stephanie is currently looking to apply for college. Her parents told her she could go out-of-state, but would have to pay the difference of the out-of-state costs. Therefore, Stephanie is more in favor of going to a college in Ohio. She wants a college with a good Cheerleading program that could offer her a full ride. She wants a place where she can feel she fits in and where she can grow as an individual. She doesn’t want to lose her friends, so is most likely to apply to colleges where her cheerleader friends are applying to. She and her friends like to have fun, so she wants a school that has a lot of fun things to do.

age 17sex femaleethnicity caucasianhome cleveland, ohoccupation studenteducation high school

Stephanie Tomlinson

4

George studied Communications Studies as an undergraduate at Ohio University. He loved his time at Ohio University, and enjoys returning for alumni events when possible. Even though he graduated years ago, he likes to remain active with the University. He lives in Cincinnati with his wife and 1 child.

George has an intermediate knowledge of technology. He has a home computer and a Smartphone, and uses both to participate in social media such as Facebook, LinkedIn, and Twitter. He couldn’t tell you how to fix a computer, but he is capable of using most tech-nology.

age 35sex maleethnicity caucasianhome cincinnati, ohoccupation programming managereducation college

George Peck

5

Inspiration Looked at mobile pattern websites and comparative apps from the App Store in order to gain inspiration and form ideas for how the right user experience and design of our app

Comparative Apps Downloaded comparative apps to gain inspiration as well as see their userflow, user-experience, color palettes, design, and features.

}• www.mobilemozaic.com• www.mobile-patterns.com• www.lovelyui.com• www.inspired-ui.com• iTunes App Store

6

Sketches Began to sketch out the app and how it should be laid out

Theme Used Ohio University’s Brand Standards while developing the theme of the app

LOGOS

COLORSFONTS

Amaranth

BitstreamBebas

Cicle

Franchise

Mido

OswaldYanone

DIMENSIONS20px44px

49px320px

480px

7

User Flow Splash Page

Entries Get Started Explore Ohio

-Contest Winners-Contest Entries

All backgrounds available (locked by levels)

Camera Images Facebook

choose background(accordion feature- picture

and description)

Camera loads into empty hole, take picture

Choose photo from camera reel

Adjust Photo(scale & rotate face with index finger and thumb)

Reveal Hair

Choose Props

Sports

E-Mail

Ohio

Message

Skip Submit to Contest

FoodSchool

Twitter

Pop-up submission confirmation

Misc.

Facebook

Move prop on top of image using index finger

Choose photo from facebook photos

Move Rotate Resize

Choose anotherShare

Future Students Schedule a tour OU facebook OU twitter

Apply Online App Creators

(by erasing with finger)

OHIO y{ }u // userflow final version 4/19/2013

Save & Share

1st time pop-up explanation

1st time pop-up explanation

8

Wireframes

EntriesThis month’s winners will receive free basketball tickets

12:00 PMVerizon

Last month’s winners received a free shirt

Get Started Explore OHIOEntries

Entries

March Winners

enter contest

Write a caption...

12:00 PMVerizon

Share Photoprops

Message

Facebook Twitter

Email@

Save & Share

12:00 PMVerizon

Add Propshair next

OHIO FoodSports Misc.School

12:00 PMVerizon

Add Photo

Camera FacebookImages

back

12:00 PMVerizon

Pick Your Backgroundback

Level 1 BackgroundsPlace yourself in any background to unlock level 2

110 Clippinger Lab

110

The marching 110 is famous at OHIO. You can even check some of their videos out on youtube!

Select Background

12:00 PMVerizon

Explore OHIO

Explore OHIO and see if we’re the right fit for y{ }u

ApplyOnline

Schedulea Tour

FutureStudents

OHIO y{ }ucreators

Get Started Explore OHIOEntries

9

Mockups

10

User Testing- 1Our first user testing session was performed using a powerpoint presentation with slides linked to each other. We tested 4 Ohio University freshman, watching them interact with the prototype and asked them questions afterward.

Problems• The brackets are confusing on the splash

page• Users were confused by filler images• Didn’t know that they could click on

multiple items on the share page• Did not like the props being used• Users did not know where they were in the

process of taking their picture and putting it in the photo.

• Users did not like that the “X” button immediately took them to the landing/entries page

• Did not understand what the different levels were

Solutions• Include a face between the brackets on the

splash page• Include more images with real people in

them and less filler images.• Style sharing buttons to look like check

boxes• Props should look realistic• Add a progress bar to show where users

are in the process• Add a pop up that asks user if they would

like to exit the photo process• Add an explanation under each level

11

User Testing -2Our second user testing session was performed in a freshman dormitory using an interactive PDF prototype. We tested 4 people, watching them interact with the prototype and asking them questions afterward.

Problems• Wanted more categories for props• Wording for levels was confusing• Design looks too green• Need another call to action on landing

page (entries)• Users exiting pop-ups without looking at

them• Reveal hair page is confusing

Solution• Added a separate category for school

related props• Re-wrote copy under levels• Added an accent color to the design• Added a button to the landing page

(entries) that also takes user right to the photo creation process

• Incorporated pop-overs with instructions and illustrations of how a process will work

• Added an illustration and re-worded instructions on the reveal hair page

12

DevelopmentOHIO Y{ }U was created using traditional coding languages HTML, CSS, and Javascript. The files were then compiled into an iPhone application using a program called PhoneGap. To supplement the mobile experience, jQuery and jQuery Mobile were used, to enable for quick turnaround and usability testing.The delivered product as an app with a completed design style and front-end code. Further functionality will be added, such as the ability to take your picture, reveal your hair, and drag props

TOOLSPhone Gap

jquery

jquery mobile

xcode

html

css

javascripT

13

RecommendationsMuch of the content in the app is filler from the design process. Things like background pictures and props will need to be created and approved by the UCM team. Our team has some recommendations to aid in this process.

BACKGROUND IDEAS• WalkingupMortonHill• TopofBakerEscalator• WithPresidentMcDavis• InClassroom• StudyinginAldenLibrary• WalkingOnCourtStreet• EatingatDiningHal• AsRufusatPeden• ShootingbasketballatConvo• PlayingvolleyballonSouth• EatingaGoodfellas• As‘bighead’signatgame• PlayingbongoonCollegegreen• JugglingonCollegeGreen• Indormroom• DrinkingcoffeeatFrontRoom• AsOUcheerleadingontopofpyramid• Scubadivinginpool• InmiddleofCollegegreenWalkway• OnstageatMemAud• Runningonbikepath• StandinginfrontofCollegeGate• IceskatingatBirdArena• KissingonKissingCircle• Teacherwritingonwhiteboardinclass

PROP IDEAS• Foam finger• Football• Ohio Shirt• OU Coffee Mug• Hamburger • Thought bubble• Stickers• Text line• Writing pen• Microphone• Book• Pen

Prizes• T-shirts• Mugs• Game tickets for

family• Foam finger• Gift cards to

perks, front-room, donkey, and other local businesses

LevelsEach level must include very desirable backgrounds, but each level should have a number that are increasingly more desirable. The final level should include either one or numerous of the funniest backgrounds available. Another possible option is to have the final level have an animation you can create using your face.

Apple store Icon Ideas

14