illustrator + designer
work please.jpg

Scotty Mobile

 

Scotty Mobile

Time is very limited for college students, so being able to prioritize, be aware of what goes around on campus, and plan actions ahead effectively are all very important for using the time wisely. However, everyone has different priorities as every human being is different.

Challenge: Design a college app for Carnegie Mellon University students that aims to connect the student community together and provide various school services all in one app in which students can customize to only see their most-used services.

 

Winter 2017

Individual Project


Understanding the Problem Space

Over the winter break of 2017, I wanted to redesign the mobile experience of our school’s student-run newspaper The Tartan as a layout manager.

 
 
 
 
 thetartan.org | December 27, 2017

thetartan.org | December 27, 2017

 
 
 

I not only wanted to redesign the mobile experience because of its bad UI that doesn’t attract people to the website, I wanted to design an app for the newspaper that could give a clear sense of what The Tartan (our school newspaper) is and potentially engage more audience through the app, so that more people can read about what's going on in our school community and what amazing things our students are doing. 

I then asked myself, “why an app for the newspaper?”, “what’s the real people-problem I am trying to solve and who are the audiences?”. The real people-problem wasn’t the newspaper’s bad UI that distracts students from being on the website, but it was the lacking sense of community of student body in general that has possibly resulted in making a less polished-looking mobile website of the school newspaper in the past. If students care less about their school, they would care less about seeking out the potential community they could build and other activities they could join in school.

But then again, I had to ask myself, if spending their time for school communities is not necessarily the students' priorities, what are their priorities? Having been in this school for about a year and a half, I could already tell what their (our) priorities are: 

 
 
 Source: CMU Bookstore

Source: CMU Bookstore

 

It's our work. We want to do great things with our time and community and make impacts.

After realizing what our students prioritize, I shifted my direction from redesigning the mobile experience of The Tartan to designing something that would help our students prioritize their work even more and possibly bring them closer to the school community by better informing different things going on on campus. Thus, I decided to design Carnegie Mellon app. Here is one of the examples of student experience that could be changed.

IMG_4738 copy.png

In the student center of our school or other places on campus, there are walls dedicated for putting on school-related event posters. However, as shown in the picture, it gets disorganized easily as there are more and more posters, and this one I found in the student center is placed where many people walk to go through buildings which makes it hard for people to just stand and find events. And, often times, people take pictures of posters they are interested in instead of taking a closer rook at it.  

 

Storyboards

I then thought about possible common scenarios that students can face and made storyboards of the scenarios before and after the app I'm making is used by the students.

Screen Shot 2018-01-13 at 3.25.32 PM.png
Screen Shot 2018-01-13 at 3.25.18 PM.png

By visualizing with the storyboards, I could empathize with the students more, be in their position, and focus directly to what improvements the app can bring.  

 

Defining the Problem

I then framed my question to, “what features should the school app have in general?". Then I went back to my earlier question, "what do students prioritize?".

These two questions guided my direction towards looking at various school services we all use often but can be improved.

To visualize the services and the app integration, I made a chart to write about each of the most-used services, how they can be integrated into the app, and how they can improve student lives.  

The chart shows how some services can enhance student lives by making them be more productive, bringing a sense of community, or by doing both.

However, like the situation shown in the scenario 2 of the storyboard, I realized some of the features/services I want to include can only be done when the school service providers themselves help with this app development as well.

 

 
Screen Shot 2018-01-08 at 2.32.08 PM.png
 

Ideation

Screen Shot 2018-01-08 at 2.21.41 PM.png

For the first iteration of the app, I decided to take a more general approach, focusing less about the micro-interactions of each feature or services but focusing on the integration aspect of all the different services into the app.

I thought about how the app can help students prioritize things that only they care about and how this understanding should guide the direction to making the app structure. 

 Thus, the total customizability of many services became the most integral part of the app: letting students to customize the services and allowing them to see only the services they care about.  

Idea Sketches/Wireframes

 
 

With the general structure of the app and possible use cases in mind, I started sketching quickly to visualize wireframes and interactions.

I then repeated the process but with more details to better visualize how the structure of the app is going to look like on phone and whether the information included and the visual hierarchy make sense on each screen. Working just with pen on paper with no images and colors helped me just focus on visual and information hierarchy. 

 

Prototype

Style Guide

 
 
 
 The icons are all free vector icons on Google Images

The icons are all free vector icons on Google Images

 

First thing I did on computer was to create a style guide for the app that shows colors, typography, and icons that simply and clearly represent what this app is about in terms of its function and identity.

The style guide was constantly iterated during the process of the app's development but remained around Carnegie Mellon's style. 

 
 

App Style - Development/Iterations

 From left to right: earliest to latest (final)

From left to right: earliest to latest (final)

During the process of designing the app, there were constant minor changes of the app's name and the loading screen UI.  Both the Scotty Dog and thistle icons represent our school, and Scotty Dog was chosen because of how better it looked when the screen's animated (shown later in the page).

 

Home - Iterations

Screen Shot 2018-01-07 at 12.14.41 AM.png

Originally the name of the app I started off with was The Tartan, but because it's already the name of the newspaper, I decided to change to Tartan then to Scotty Mobile at the end which comes from the Scotty Dog that has been chosen to represent the app. 

One thing I had to ask other people about was whether I should keep the top bar (rectangle) with the logo and name at the top since without it there is more screen to see more content. However, people I've asked liked the screen with the bar and the dog logo at the top more then just not having anything, so I then decided to just leave it. This feedback I got from other people intrigued me because they are willing to sacrifice some screen space for small details that perhaps makes the experience more delightful than what I would've expected in reverse.   

 
 
 

Opening The App

 
 
 
 

The app opens up with somewhat heavy animations just to welcome the user right from the get-go. 

When opening the app, the user is going to be logged into their school ID (SIO), so that it's easy and skips the steps later for logging in when they want to buy tickets, sign up for an event, or see their schedule (in SIO).

Right when they land on the home screen, there will be a reminder sign that shows up to remind the user about an event that they either bookmarked or is coming up soon. Users can freely choose this feature to not show up in the setting. 

Screen Shot 2018-01-06 at 4.09.47 PM.png
tartan app.gif
 
 
 

Customize What You See

tartan app.gif

        

Screen Shot 2018-01-06 at 3.48.52 PM.png

         

The key feature of this app is its customizability of all the services included in the app. This means that they can customize what they see in the home screen and also the menu bar that acts as a location where the users can find more services.

At first, I wanted to leave what's shown in the home screen to not be customizable and have news, events, and other community-related services but wasn't so sure about doing that since it loses the idea of total-customizability of the app to fit every user's need and what they prioritize. However, I would want to know more about what other students think and take their suggestions.  

 
 
 

Transit Service

One of the services of the app is the transit service. It primarily focuses on the school's shuttle schedule and their routes which can also be found through our school website but not many people know about.

For the next iteration, I would like to include other bus routes not just limited to school shuttles but the bus numbers they use the most while they are on/off-campus because students only take specific buses to get to places so would be helpful if they can bookmark those buses to quickly see their time and routes.  

          

Screen Shot 2018-01-06 at 4.18.25 PM.png
 

     

tartan app12.gif
 
 

Event Wall

Screen Shot 2018-01-06 at 4.37.29 PM.png

             

tartan app.gif

          

Event wall lets any student logged into school ID, basically people who are using the app, to be able to post any of the events they are holding from the groups and clubs they are involved in.

Students can then bookmark these events and get reminded of when they happen and buy tickets.  

Because anyone can add events, this page will get pretty cluttered. By having a bookmark feature and letting users to change the order of events, it helps users to better prioritize. And, the events that are already over will disappear. 

Also, when they are not interested in any of the events, users can swipe right to get rid of them.  

 
 
 

Test

 
 
 

The prototype was presented to multiple users at its multiple stages and the walkthrough video was presented to get feedback on what could be improved and whether they would want to use this kind of app. 

 

Takeaways

From testing multiple users, here were some of the insights and comments I gained that I thought would be good to focus on for the next iteration: 

  • App in general - The app is interesting and useful in a way that it provides various services all in one app, but there needs to be more in-depth exploration in terms of visual-hierarchy and overall experience of each of the function. Also, focus less about how "useful" the app could be but try to identify one problem to focus on which in this case would be either the most-used services/ service or bringing the community aspect with the news and events.

  • Total Customizability - people generally liked the fact that they could customize what's in both home and menu.

  • Features/services - The app in general widens the problem space too much due to having so many features. Some people felt that I could get rid of some of the services included in the app that students don't necessarily use much as some overlap with already existing platforms that do a good job. For this, I would have to conduct surveys and ask people what services students use the most and try to improve on those once I get back to school.

IMG_4524.JPG
 
 

Reflection

Does it solve the problem?

People use social media like Facebook to create groups or use the newsfeed feature to announce events and their accomplishments/memories. Social media used in an active manner like this is a good use of social media because it keeps the community together and does the job of bringing the community stronger. However, according to Facebook, spending time on Facebook just passively scrolling down and consuming information is bad, and often times when people are on Facebook, this can naturally happen as they face so much information all in one app. Decision fatigue is something people often face in this era as they constantly face so much information everywhere and according to a study done by Case Western University and FSU, "humans have a finite amount of mental energy for exerting self control". 

I wanted to first create a product that would not necessarily replace social media but make a product that provides only the information necessary to communicate and help better students' lives and make the app to be the go-to app for anything school related to help students better prioritize with their time and not get distracted. 

However, as I was working, I realized maybe I was thinking too broad, forgetting what I should be focusing on instead as a designer: solving "a problem in a simple and delightful way". 

Further Work

Thus, this project is still at its early stage, and I'm going to be keep working on it once I get back to school.

This was my first time doing anything UX/UI related for mobile platforms and was a good opportunity building skillsets for prototyping and animating the prototypes. I learned a lot from doing this work in a short period time and realized what my strengths and weaknesses were as a designer and what could be improved. 

For the future iterations, I will be focusing on the feedback I received from the user-testing and try to be more simple and direct with the problem I'm trying to solve and be more careful about how much information I'm putting in the app as the problem space I'm working around is still quite large.

Please let me know what you think about this project and I would be glad to receive any suggestions or feedback! Thank you for reading!