University choice — a UX case study
The Studia app, difficult decisions at 19 made easier.
Did you ever know who do you want to be when you grow up? Or at least, did you know in high school? Well, I didn’t. Hi, I’m Weronika and the Internet somehow bring you here where you can read about a project that arose from my personal frustration of never having a clue about what I want to do. This lack of a purpose was followed by studying at a technical University for five years which only reinforced the feeling of choosing wrong. But don’t worry, the story ends well. At least, I hope it will. If you want and can spend a few minutes with an easy read about my project and a little bit about me, let’s get started. If not…
First things first
That introduction doesn’t tell much, doesn’t it? This is a case study of a fake app called Studia which is my Capstone project for the Interaction Design Specialization at UC San Diego via coursera.org. We were provided with three briefs: Time, Glance, and Change. I decided to go with the last one. My mission was to design an interface that facilitates personal or social behavior change.
I decided to take this opportunity to address a problem that I’ve observed during my University years. This is, the majority of people that I’ve met were unhappy or not 100% sure about their choice regarding the course they were taking.
A small explanation here. My observations were based in the Polish realities. ur education system may differ from the one in your country but I’m sure you can also relate to some of the issues presented here. Ok, let’s go on.
But here’s the catch — it was their choice. So why is that? They’ve chosen it themselves, right?
Nowadays it became a standard that after graduating from high school we go to the University right away, spend there a few years learning about very important stuff and finally, after getting a degree, all companies fight between each other just to offer us a job. Ok, the last part might be slightly far-fetched. My point is, getting a higher degree became more like a common practice rather than a willingness to learn deep about a field that fascinates us.
Second of all, the choice is often greatly regulated by the Matura results (final exam every student has to take at the end of high school). If your score doesn’t land you a place on your dream course you decide to go with your second or farther choice from the backup list. Just for the sake of studying. And because that is the way things are. And most of all… all of your friends are going too!
Or you’ve passed with flying colors but don’t know what to choose so you go with a course that’s not an easy one but seem like a reasonable choice. All of this hard work will pay off once you’ve finished with a great diploma and a well-paid job that will surely make you happy.
And here comes the hindrance. You are supposed to make this challenging decision that will affect your future life at just 19 years old. If you still haven’t specified the path you want to take there’s a great risk you will regret your choice. The problem isn’t the lack of options. It’s the lack of knowledge about all the possibilities that are out there. The decision-making process lies at the bottom of the problem and is the factor that needs improvement. That’s how I came up with my POV (Point of View):
Provide high school graduates a way to make a more informed decision regarding University and a graduate course while making the process an easier one itself.
Design process
Needfinding & Ideation
Whether it’s where I’m eating, where I’m traveling, or, god forbid, something I’m buying, I feel compelled to do a lot of research to make sure I’m getting the best.
— Aziz Ansari, Modern Romance
In his book and also in his show, Master of None, Aziz Ansari nicely illustrates our need of researching even the smallest everyday choices. Whether it’s a new phone or recently opened restaurant in town, there’s a dedicated place to look them up. So how can there be no place where you can verify a choice that will affect your life but there are at least three that address your struggle of getting the best pizza in town?
Considering the undecided students-to-be, there’s one more thing. Starting the research on your own you have a preconceived idea of what you are looking for. But what about the choices you never have thought of only because you don’t know they exist?
With a bit of luck or determination for doing a research that’s broad enough, there’s a chance that you can stumble upon an option that will feel like a perfect fit even if you’ve never heard of it before. But the truth is that we satisfice easily when we find something that matches our criteria. And that’s not a bad thing, every choice depends on a set of requirement. But with all the information spread around lots of different sources, we can miss out on a better opportunity. Also, digging through all those school sites, brochures, and forums can quickly turn into a nightmare.
I’ve collected tons of insights during my University years but to make sure that the problem I identified was accurate I interviewed some students and students-to-be. Also, I was able to observe the decision in the making in the case of this year high school graduate. Here’s all the information I collected in an essence:
The user needs a way/needs to be able to…
1. Find a course or a school based on:
- their interests,
- Matura results (compare the score with the previous years’ threshold),
- location,
- other specific requirements (e.g. school’s type).
2. Conduct a detailed search based on a credible source without a massive workload.
3. Get to know the opinions of the actual students to verify their expectations and find answers to additional questions.
Doing the desk research for this project I found some sites dedicated for single of mentioned issues but there was none solution that would address them all at the same time. My project was aimed at improving the existing solutions with some additional features. The goal was to create a credible database that would help manage the information overload and would allow sorting through it easily and quickly. I believe that it would help with the decision-making process and lower the rate of the undecided and unhappy students out there. So I got to work.
Prototyping
I’ve begun with some storyboards that addressed the identified needs. Based on those I’ve come up with some paper prototypes to investigate possible options. It was time to figure out the information architecture and functionality. That part took a lot of time, paper and new room decor.
The initial ideas synthesized into one, yet still, paper prototype which was ready for its first in-person testing with my ideal target user. After the first reality check and some improvements, it was time for the Heuristic Evaluation. I’ve used POP by Marvel for this purpose. I was surprised by the outcome. I’ve spent a lot of time tinkering on the paper prototype (this sounds stupid but that’s something I tend to do) but still haven’t spotted some obvious issues. Lesson learned, no more time wasting on perfecting mediocre solutions instead of coming up with new ones!
Further corrections were implemented right into the lo-fi prototype. I used Figma for that purpose and InVision for the interactions. As we are still learning that tests are the most important part of every design process and with my new no-more-time-wasting policy I decided to test that monochrome prototype during the in-person tests. And… the reception wasn’t as good as my attitude was. I’ve learned the hard way that for kids and teens the content itself isn’t enough, especially when it comes to a topic as boring as choosing a school. For the sake of the next tests, I took care of the entire visual side of the project so it won’t be as dull and boring as the previous prototype was.
UI Design
That’s when the fun but also difficult part started. I studied the new Material Design, to begin with. For a novice, it’s like a handbook with guidelines. But once I implemented those rules I had a problem with personalizing them. I tried a lot of different colors and fonts. Ideas were coming and the outcome was still unsatisfying. I was stuck.
And then, Erik D. Kennedy’s newsletter came to the rescue (I recommend it, especially for the UI beginners). He suggested an exercise so simple, yet so brilliant.
List 5 sites or apps with good UI design, and 1–2 with bad design. For each, articulate in your own words why you believe it works or doesn’t work.
Also, I was looking for help in Robin William’s Non-Designer’s Design Book. She believes that:
Once you can name something, you are conscious of it. […] You ‘re in control.
Design analysis by simply articulating what you like or don’t like with the importance of being able to name things. That was a solution to my struggle. This new knowledge made me realize that I’m a huge fan of white and whitespace. Yeah, the current obsession can be definitely seen in this project.
Colors
Besides lots of white, there are some colors, too. I decided to maintain the overall look in soft, pastel colors for a calmed and relaxed feeling. Blue was great for conveying that purpose. It also reflects safety and reliability which are virtues you would expect from an app that deals with important life decisions. For the complementing color, I’ve chosen yellow as it reflects optimism and enthusiasm which is greatly needed for that dull school subject, duh. Its softer shade, which also gives a calm feeling, is used as an accent color within graphics. More vibrant yellow and blue express action. Those shades stand out from the rest of the design and can be seen anywhere there’s something clickable. The bright yellow is also incorporated in the logo. Dark navy shade was used for the header, the main text, and a set of buttons. Its 70% opacity version was used for the subheaders and additional info. As for the text…
Typography
At first, I was looking for some serif typeface just because I love pairings of elegant titles with minimalistic design. But at the end, I’ve made a 180 degrees turn from my initial idea. I didn’t want the first impression to be too serious as I was working with a topic that’s not especially thrilling.
I was looking for a free alternative to Circular which is very clean and geometric but has a lot of warmth to it. I decided to go with Raleway, which can be seen in different weights and sizes throughout the app.
Interactions
With the screens ready it was time for the interactions. I tried InVision once again but its features were too limited to implement my ideas. I had to use other software and my only (Windows user’s problems), but not that bad of an option, was ProtoPie. It’s super intuitive, I highly recommend it! The prototype is not free of glitches because I’m not a ProtoPie pro yet but it conveys my vision pretty good. For additional animations, I’ve used After Effects.
A/B testing
The better looking and working version was ready for some A/B testing. During the previous tests, the direct Search function was being left out. I wanted to find out if the placement of it has something to do with it.
I conducted 4 tests through UsabilityTesting.com, with 2 users per each version. With the test number being limited my results weren’t statistically significant but assured me that the initial design of the Search bar was the one to go with. These tests were also an opportunity to get to know users’ thoughts on my design solutions and on the look and feel of the app itself.
The Studia App
Here’s a brief outline of some features and solutions with the reasoning that stands behind them.
Home screen
The Home screen greets the user with a First things first section that suggests actions that should be undertaken first to fully experience the app’s functionality. User can leave it out or even delete those cue cards and revisit suggested sections later using the menu hidden in the bottom app bar. Underneath it, there is the Explore section with direct links to Universities and Courses lists. I’ve added some additional sections for socializing the app a little bit, like favorite hashtags or top 3 courses. It also gives the user an insight of what’s trending now and maybe will interest them in options they haven’t have thought of. In the course of time, those suggestions would be more personalized based on the user’s activity.
FAB
The FAB (Floating Action Button) is a repeating element in the app. It always presents the main action the user can undertake, therefore it can be different depending on a screen that is currently visited. It serves as Filter, Bookmark and a Check sign in the Filter section. In case of a mistake, there’s always a way back.
Matura results
Every Polish University has a different score counting system but they are all based on the Matura results. The Matura results section does all the math for the user. It consists of “Select subject” dropdowns with three of the subjects selected by default. These are Polish, English, and Mathematics — three exams that every student has to go through. Each of these subjects has 2 or 3 (depending on the subject’s type) exam levels assigned. Instead of choosing levels manually from some list for every subject I decided that it will be easier to just delete or left out the fields that don’t apply to the user (eg. Polish on an advanced level). What’s more, you can add more subjects or edit the default ones by selecting others from the list.
When the user will visit a course page in the app, their score will be already there, with the point thresholds from the previous years listed below. This way they can easily and quickly assess their chances of getting into their dream course.
I mean, doing the Math yourself isn’t that hard as those equations aren’t that advanced but while doing the research and looking through different University sites I’ve found that some of them can scare off potential students right from the first sight. Or maybe… that’s their purpose?
Reviews & My courses
On the course page, a tab with reviews can be found. But how make these reviews trustworthy? That’s what the My courses section is for.
In that section, the user has to add their course details so the review is assigned to the right place. Also, they can choose a time span in which they have studied and if they ended the course with a degree or resigned earlier. All these details can tell a lot about the credibility of the review. A 4-star review from a person who got their Master degree is treated differently than a 1-star review from a person who ditched the course after one month. The users can easily asses the review’s value themselves.
I’ve decided to left out the University reviews section completely. IMHO, if you’ve studied on just one course only and it wasn’t a positive experience that doesn’t mean that the whole school is bad, maybe just that particular course wasn’t so great (hence the courses reviews). But, if you want to share your opinion on the school there’s still their Facebook page, just sayin’.
Also, I’m not trying to say that everybody would be eager to share their review. But with a place dedicated for that purpose it’s possible that maybe more people would be keen to contribute if they knew they can help future students. After all, they were in their shoes once.
Filters
To personalize the search results user can apply filters like type, location or category. The filters are in the form of choice chips. There are a lot of them, especially in the “Category” subsection. At first, you can think that it’s too many and they can overwhelm the user. But the multiplicity of choice is the very essence of the whole thing. The user is supposed to choose only the ones they find interesting, it’s that simple. If you don’t like Geography you won’t choose it for the world and would omit this option. But you still have a choice. With different filters applied the user can find options they haven’t have thought of or never heard of. It’s all about exploration, especially in the case of the undecided ones out there.
Now for the reasoning that stands behind the Categories. They address the need of finding a course based on user’s interests. Each of the courses would have three main categories assigned. They would be ranked based on how accurate they are. No course can be defined by just one category. Three don’t describe it fully either but it seems like a reasonable number to figure out what the course is about at a glance.
With the filters being chosen the system will show the users their “Best Matches”. These would mean that those courses fulfill all of the chosen requirements. The section below it, “Courses you’ll also like”, will show courses that match less of the chosen criteria. If there are no results there would be a proper message suggesting to delete some of the filters. It can be done in the “Filters” section or right from the results list as all of the chosen choice chips would be visible at the top of the screen.
University & Courses screens
The University and Courses screen has all the basic info about those listed in the Info sections. There are also direct links to the school’s website and social media (which apparently is SO important). All of the faculties and courses the University has to offer are listed on individual tabs. Reviews and criteria for the courses are presented in the same manner.
The prototype
You can check all of those options below. Remember, it’s only a prototype, it can’t do all that magic stuff described above yet. Some testers were even asking if I plan on developing the app in different languages. The positive feedback I’ve already got made me realize that there is an actual need for a product like that. I would love to be able to work on a live version of it as I really invested myself in this project. Maybe someone is interested in making it possible? Let me know! I really believe that this app could make some change, which was the main purpose from the beginning.
Finally…
Here comes my story. If someone would have told me years ago that there’s a field which is a mix of IT, new technologies, art, design, psychology, analytics, and much more then my University choice would be a totally different one. UX a mix of everything I’m interested in for years but didn’t know that there’s a single name for that. After getting my Master’s degree I’ve decided to go on a limb and start to learn everything I can on my own. The Interaction Design Specialization helped me to begin that journey. If you’re looking for a course that would be great to begin learning about UX with, this is the one. Now, it’s been a year of solid hard work and there’s still a lot ahead of me. I can’t wait to continue that since I’ve finally found a path that really interests me. I’m looking for an opportunity to learn more and to share the knowledge I already have. Finding a job where I could do that would be a pretty happy ending to my story.
If you somehow reached to the end — thank you for your time! I would totally give some claps for all the patient readers out there 👏 If you would like to share your thoughts on this matter leave a comment, I’d be happy to hear your feedback 😄
Contact me via LinkedIn, Email, Behance.
TL;DR?
I needed five additional years and a wrong choice along the way to figure out what I want to do. I believe that with my project, someone won’t have to.
