New Student Orientation Reskin

Assisting students in finding a path in a new environment for success.

Project

UX/UI + Research
Roles:   Concepting, User Research, Visual Design, Motion (Independent)
Timeline:   December 2019, 3 Weeks
Tools Used:   Figma, After Effects, Photoshop 
banner2-01

PDF: long-form process explanation

Cover Pages

I designed each section of the app to have a cover page when landing. These cover pages will have displays of clubs or upcoming events. Each of these pages will display a link and a flashy photo. These pages are designed to get students interested in activities that they may have not normally have checked out.

mock13
mock12
mock6
mock7

Swipping Up

From a cover page, the user can swipe up to bring up the categories or schedule from that page. One can also swipe left or right to see other displays that pertain to that subject. This is designed to encourage a student to see clubs and events that they might not have been otherwise they interested in. It encourages users to seek out new adventures that they never saw coming.

Discovering Your Place

New students are trying to find their place in college. With the app, students can look up organizations that may be a good fit for them. Student clubs are divided up by categories first then the clubs themselves.

mock26
mock20
mock9
mock17
mock14

Finding One's Way

As my contact explained, many students don't know where they are supposed to be until it is time for the event, or, they do not know where the location is. To address the location issue, there is an option for a map in the nav and initial landing. For the schedule, there is a simple display that shows at the top for the week of orientation and the events that fall under that day. This makes knowing where and when to go easy.

mock23
mock11
mock14
mock15

Changes to One's Direction

According to the users I interviewed, they said that there was no easy way to change their orientation group if they felt as if they would do better with another group. This might be for reasons such as they don't like their group or they made a friend in another group. When a user is in their personal setting they can make a request to change their group.

mock24
mock25
mock18
mock19

The Prototype

The final prototype was made in the Figma prototyping tool. Due to the applications less than ideal swiping options, all swipes are handled by tap to help with a smoother experience.

https://www.figma.com/proto/S3Jy9LWvocPeA1KNKnmMBaNA/NSO?node-id=244%3A3227&viewport=527%2C161%2C0.06787613034248352&scaling=scale-down

mock2
mock27
mock28

For Other Universities

To save money on designing and development, other universities can use this software to quickly and cheaply make a fully functioning app that represents their school's imagery and values. Beyond the apps simple design, it can be used by other colleges. It is just a matter of changing some text and images to be appropriate for their campus. This stops the app from only applying to one college, making its use versatile.

01 - Research

Finding One's Path

When people are moving to a new place there is a list of things they want to know about their new home. For my research, I spoke with the head of new student orientation at RIT and a recent freshman (See Process Deck For More Details).

old_app

Broken Roads

Many new student orientation apps are quickly and poorly made. Frustration from common questions such as where and when do I need to go may lead some students to skip these events altogether.

Problem Statement

Many new student orientation apps are quickly and poorly made. Frustration from common questions such as where and when do I need to go may lead some students to skip these events altogether. My redesign takes into account the users age as well as the functions the young adults use to interact.

Problem Statement

Many new student orientation apps are quickly and poorly made. Frustration from common questions such as where and when do I need to go may lead some students to skip these events altogether. My redesign takes into account the users age as well as the functions the young adults use to interact.

Problems include:

1.     Dull design

2.    Confusing multi-branched

3.    No ways to find student organizations

4.    Boring interactions

What Students Need

To get a good idea of what were the biggest problems I needed to tackle I spoke with the orientation coordinator and a first-year student with the experience fresh in her mind. The following are my findings.

1. Students don't know what is on offer

2. There is uncertainty with the schedule 

3. There are issues finding friends

4. Students what to switch groups

4. What happening now?

5. Where is the location listed?

6. Can I switch to another group?

4. What happening now?

5. Where is the location listed?

6. Can I switch to another group?

students

The Student Base

According to RIT analytics, 75% of student started at RIT straight out of high school, and 25% transferred from another college. The transfer groups tend to be a little bit older. This means that 75% of user are aged 17 to 19 while 25% are 18 to 30 years old. Because the vast majority of potential users had more experience because of their age, that meant I had to design with them in mind.

Goals

Based on my interview I found that students mainly struggle with knowing what they need to do during orientation. This confusion needed to be addressed. But, students also needed to know how to take their own initiative to find their place at college with clubs and finding friends.

1.    Add an option to change groups in-app.

2.   Be sure that students can find out where they need to go and when.

3.   Make finding student organizations easy.

4.   Design for an 18-25 year old demographic.

02 - User Stories

After defining what my user goal were is was now time to make my personas to feel out how one might move thought my app and what they might be thinking.

sally_cir
User Story 1:
Sally Pizzaroll

Sally is not enjoying her group, feeling that she is not connecting with anyone. She did meet some friends from another group that she gets along with very well. Sally wants a way to change her group to be with these new friends.

danny_cir
User Story 2:
Danny DiGiorno

Danny’s orientation leader has been struggling with keeping up with the schedule and is not always sure where to go. Danny needs a more reliable way of knowing where he is supposed to be and what he should be doing.

kelly_cir
User Story 3:
Kelly Hotpockets 

Kelly has a hard time relating and wants to find some people who share her interests. Kelly needs a way to efficiently search for a good sports team that will also help her find friends.

Use Case & User Flow:
Sally
userflow_sally
Use Case & User Flow:
Danny
userflow_danny
Use Case & User Flow:
Kelly
userflow_kelly
03 - Sketchs

Sketching a First Impression

Since the user base was so young I played around with interactions that a less experienced user might not think about.

Swipes

I thought of Tinder and how that apps big interaction was the use of the swipe over the tap to navigate the app.

sketch20

Cover

I hap the idea of showing a few different cover photos to show various clubs and events at RIT as a landing cover page. This would also serve the purpose of getting people interested in new events and clubs.

sketch19
sketch21

Changing Group

The change group page gives users the ability to change to a group that might have people that fit their interests better. Originally the aesthetic would be that of a message in a bottle to be sent away for approval.

sketch22
04 - Styles

Mood and Style Boards

I played around with 2 styles, one being more bright and poppy, and another being more a kind of vintage feel. 

Mood and Style Boards

I played around with 2 styles, one being more bright and poppy, and another being more a kind of vintage feel. I went for the more poppy feel of the 2000's Candy's boards because it would make it easier for the app to be adapted by other universities.
board2-01
board-02
board-01
board-02

I went for the more poppy feel of the 2000's Candy's boards because it would make it easier for the app to be adapted by other universities.

Comps

For the first few rounds of comps, I played with how many colors I wanted on the screen. At this stage, I was able to visualize my comps and see how I felt about a few screen stretching displays for an option as compared to an icon-based approach.

m_landing4-8_slide-up
2000's Candy
m_landing4-5
50's Brandy

Visual Design

I had an orange drop shadow style in the first round of comps but I pulled that back in later versions as I thought it was a bit much.

m_schedual3-3
2000's Candy
m_schedual3-1
50's Brandy

Cover Shadows

To get the text to show up better on the cover pages I made a few versions using different colors and lightness values. I eventually went for a version that had a lighter opacity shadow so as to show the text.

m_landing2_cover
2000's Candy
m_landing1_cover
50's Brandy

Organizations

I experimented with the way the organizations were displayed. I eventually settled on having them in a tablet-shaped presentation as it showed more on-screen as opposed to the screen stretching style.

m_club2-2
2000's Candy
m_club2-1_slideup
50's Brandy
05 - Closing Thoughts

Challenges

Picking Platform

Finding the best way to get this information to students was important. Originally I was trying to design a touch screen tv that would be spread all over campus. However, potential cost problems caused me to scrap this idea and design for smartphones instead.

New Interactions

I had to take the tech experience of the target audience into account to create the best app. To do this I played around with more advanced interactions such as swiping to develop a smoother piece of software.

If I Had More Time 

A 3D Map

There is a link similar to the map on the main menu. However, I did not have the time to make it. Letting the student know about what the can expect from their classes would be very useful to new students.

There is a link similar to the map on the main menu. However, I did not have the time to make it. Letting the student know about what the can expect from their classes would be very useful to new students.

There is a link similar to the map on the main menu. However, I did not have the time to make it. Letting the student know about what the can expect from their classes would be very useful to new students.

More Information About Academics

As stated in my research, a map would be very helpful to new students trying to find their way around. There was a map on the main page and in the hamburger menu. However, a map was not fully built because a map would be so complex that it would be a project in of itself.

As stated in my research, a map would be very helpful to new students trying to find their way around. There was a map on the main page and in the hamburger menu. However, a map was not fully built because a map would be so complex that it would be a project in of itself.

As stated in my research, a map would be very helpful to new students trying to find their way around. There was a map on the main page and in the hamburger menu. However, a map was not fully built because a map would be so complex that it would be a project in of itself.

More Options For International Students

International students have their own issues with moving to a new country that might have a language barrier. I did some research and interviews on how international students feel about orientation, but my research was inconclusive and needed more time that I did not have.

Lets Chat!

johnkeefedesign@gmail.com

Lets Chat!

johnkeefedesign@gmail.com

© 2021 John Keefe
 

ig
li
photo