SMC-GO App

96bf6d07-7bf0-468a-b3aa-8e2796e4eb97.png
mock up smc go spp _edited.png

Introduction

25ac52d6-3ea8-46c6-ae55-60236d38cb1c.png

SMC GO is Santa Monica College's mobile app with the necessary information and tools for current and prospective students. In this project, we were asked to redesign the app so that it would be more successful, easier structured and meet the students needs

My Role:

Designer

Research designer

Prototype

Time Frame:

7 weeks

Artboard.png

Creative Brief

Screen Shot 2021-10-01 at 5.43.38 AM.png

Problem Statmement

Objectives

Expected outcomes

Based on the statistics, students seem to download the app in the beginning of a new semester but to current data, it is not being used as frequently as we would hope. 

That the user will download, keep using, and taking advantage of the helpful tools that the app offers tough out their whole academic journey. 

The user will be confident knowing that they can get all the information they need through the SMC GO APP. They will experience an easy, accessible, and helpful tool that they will take advantage of in their education and social life. 

undraw_In_progress_re_m1l6-2.png

The Process

1
2
3
4
5
6

Research

Ideation

Low-Fy wireframes

Usability Testing

Prototype

Final Outcome

RESEARCH

Stakeholder Interview

We first met with the stakeholder to ask any questions that we had after reading the project brief.

1568640039362.jpg

Esau Tovar

Dean of enrollment

services and Faucalty leader

Unknown.jpg

Cleve Barton

"The school needs to, each year, drop a lot of students because many students forget the deadline date of paying their fees."

"Success may be measured based on how many times the app is downloaded and also how many users that allows push notification."

Admission & record department at SMC

Screen Shot 2021-10-01 at 6.05.25 PM.png

Student interview

Persona

Screen Shot 2021-10-01 at 6.03_edited.png

Competitive Analysis

I did some secondary research and investigated the school app of three other universities, their features, and how they worked. Based on that we were able to narrow down pros and cons of each app.

Screen Shot 2021-10-01 at 6.19_edited.png
Screen Shot 2021-10-01 at 6.19_edited.png

IDEATION

Tone & Charater Attributes

Now that we gathered some valuable insight from the research phase, we went into the ideation phase, where we wrote down and mapped out what tone and attributes the ap should communicate.

●  Formal

●  Warm

●  Social

●  Helpful

●  One-stop-shop

 Easy to navigate

●  Accessible

●  Modern

●  Simple

●  Stuffy

●  Business-like

●  Overwhelming

●  Information overload

●  Outdated

●  Redundant

●  Overwhelming

● Hyperlink based

● Unreliable

Content tonality

Feature Matrix Development

We then used sticky notes so that we could map out the most Important and necessary features. Then we used a valuable diagram to get a underating in which one of those was our area of focus.

Screen Shot 2021-10-01 at 9.13.17 PM.png

Sitemap

For Marketplace & Comminucation

Now that we had decided on the app's essential features, we could create a sitemap to see how the categories and subcategories should be organized.

Chatterboxes_Sitemap_Lodestro_edited_edi

LOW-FI WIREFRAME

Story Board

We came up with a possible scenario where our persona, Dominic, would take advantage of the feature we decided to focus on: the marketplace.

Screen Shot 2021-10-01 at 10.44.15 PM.png

Dominic has an old math book he does not use any more & he needs money for some new furnitures in his apartment.

He had recently heard about a feature on the SMC GO app where one could buy and sell stuff.

He takes a photo of his book with a short description and post his add.

Screen Shot 2021-10-01 at 10.44.24 PM.png

Sara replies and wants to trade his book for a chair. Perfect, he thinks. A new chair is one of the items he needed for his new place.

Dominic has an old math book he does not use any more & he needs money for some new furnitures in his apartment.

Dominik is super happy. He now got a new chair, and at the same time got rid of his old math book. So convenient.

USABILITY TESTING

UXFlow Demo.png

Feature Scenario Wireflow

Screen Shot 2021-10-17 at 7.43_edited.png
Screen Shot 2021-10-17 at 7.43_edited.jpg

We sketched out the scenario and any possible screen likely to be involved in that interactive process. We used a whiteboard to make changes during the process smoothly

Screen Shot 2021-10-17 at 7.40_edited.png

We did usability testing on our rough wire flow with other students to catch any errors and figure out what did and what did not work. Based on the feedback we received, we made changes and added new features.

Screen Shot 2021-10-18 at 9.29_edited.jpg
Screen Shot 2021-10-18 at 9.29_edited.jpg
Screen Shot 2021-10-18 at 9.29_edited.png

Key-Takeaway

  • Switch the screen of "upload photo" with the screen of "Create an ad". 

  • Add a button in the right corner.

  • Organize content differently (Button, description before tags.

  • Add a function/button that lets the user preview the ad. 

  • Option for trade vs sell. 

  •  How could they swish between "trade or sell" - (switch button?) 

With the Feedback we gathered from user-testing, we were able to create Hi-fi wireframes to show the visual process when we presented our concept to the stakeholders.

unnamed-8.jpg
unnamed-7.jpg
unnamed-10.jpg
unnamed-9.jpg

From Insight to Action

unnamed-11_edited.jpg

The feedback we received from the stakeholders and the class when we have presented our concept that creating a marketplace for students inside the app was a great solution and would hopefully create community and reliability. 

 

They also pointed out the importance of taking safety into concern when developing that kind of feature.

Additionally, one crucial question that was brought up regarding the communication channel on the Marketplace and if it should be a feature located there itself or send the user directly to another platform. Something we may need to research further in order to see what is requested by the target audience.

unnamed-12_edited.jpg

PROTOTYPE

Visual UI Design

2133e64c-1879-4070-9594-860cf563619c.png
25ac52d6-3ea8-46c6-ae55-60236d38cb1c.png
09238c89-5cd2-425d-86ed-c9d43574006e.png
96bf6d07-7bf0-468a-b3aa-8e2796e4eb97.png

Let's try it out!

unnamed-13_edited_edited.png

Final outcome & reflection

During this project, I experienced and understood how valuable and essential the research phase is in the design process. Furthermore, the importance of dividing the work effectively in a group projects like this and also frequently have good communication throughout the whole process to have the ability to work more time-efficient and, more importantly, focus that time on the essential issues. 

Moreover, I understood the importance of wire flow and prototype testing in the design process to spot any arrows with the module and then have the ability to go back, tweak and therefore improve our outcome. 

I did not realize that in this way, we were able to open up our eyes and have the ability to think outside our own minds. Since we are designing for others and not for ourselves - things that may work well for some people do not necessarily work well for others. 

THANK YOU!