College portal that students may actually find helpful — Case Study

Cover Image

This idea for an application has been nagging me for years since I have started college. I wanted to build an application for students to find people with whom they can collaborate on projects. This idea came to me when I discovered that most students, especially tech majors, have no projects to show to a potential employer. Most of them have strictly class experience. I started thinking, “What if there was a place where they could post an idea and find someone to work with?” or “What if a back-end developer needed a client-side developer to help build the app of their dreams?”. Ironically, I never actually got around to building it because I lacked back-end expertise and never had time.

However, everyone in my major has to have a capstone project to graduate, and I could not think of a better project candidate. Hence “Mission Source” became a thing.

In this case study, I will go over all of the UX research, all of the UI work, and development. Buckle up. It may be a long one.

The Problem

The Solution

User Research Phase

Out of 41 participants:

38 said they would use a service like that

20 said a rating system would be necessary for them to judge a potential collaborator

28 said they would rely on the history of past projects to evaluate a potential collaborator

34 said keyword search would be a preferred way of searching for a post

Conclusions: having an almost 50/50 split for history and rating was anticipated. Initially, I only considered the history of projects. However, to avoid spammable or fake projects, a rating system with reviews came to mind.

You would understand what projects a person worked on and see reviews and ratings left by users. It is a lot easier to detect spammable activity if a user has many empty reviews and minimal projects but a high rating.

The second method used was focus groups. Due to the time constraints ( I needed to start the development as soon as possible), there were only two focus groups.

The first group consisted of a second and a first-year student. One being Computer Science and the other one was Information Technology majors.

The second group consisted of one first-year Information Technology student.

I walked both groups through the application concept, features, such as rating, history, keyword search project posting, and gamification of the process in terms of achievements. The responses can be summed up as:

  • A rating — review system is less valuable than having a history with a link to view the finished projects.
  • Ability to utilize the profile page as a portfolio and share it with LinkedIn.
  • Gamification to earn titles and achievements is something that the participants saw value in, as it acts as a motivator.
  • Keyword search is how the users would primarily search for projects.
  • Having pre-set keywords and having a separate feed dedicated to those projects is something that both groups brought up.

User Research Conclusions: Having a comprehensive profile page that can act as a portfolio page is essential to keep in mind when designing it. Since it is utilized to judge a person’s abilities, the rating system is a lot less important than having a history with finished work linked. Keywords system is vital for user’s ability to find projects they might find interesting.

Unfortunately, this being a capstone project, I have to abide by professors’ words. Leading to a rating system taking a higher priority than keywords, meaning that I HAVE to have it by the end of the capstone. Even with the research backings, the rating was “more important”. This was not the only issue this project had to compromise on, but in the end, there is nothing I can do about it.

User Experience Design

Persona #1
Persona #2
Persona #3

While I did create a use case diagram and a user flow, I decided not to include it, as it is not as relevant to these users and the project. The format we had to create it in did not abide by industry standards, as it lacked critical information, rendering it not as helpful.

User Interface Design

Mood Board

In the end I decided to go with the following colour scheme.

Colour Scheme

The whole application has a space theme. I felt that the application felt rather plain, achievements were kind of dry and bare, and it felt more and more official and serious. While that is not bad, I did not want to go for muted colors or a simple color palette. Adding an overall theme was an engaging way to interact with our users. For example, posts are referred to as missions, and look at these fun achievements titles. Who doesn’t want to be a Lunar Legend?

Having this kind of theme allows us to include a few fun graphics to make the User Interface more dynamic. Using specific space jargon, we would create a brand identity and, hopefully, have students use the same vocabulary when referring to the application.

Having a theme can be dangerous, as one can go overboard and oversaturate the application with jargon, graphics, etc. My goal was to have a few UI elements use the theme without becoming too much. For example, achievements are supposed to be gamified and encourage a user. Therefore it is appropriate to add themed jargon there. That is the only area of the application where the theme is very prominent.

Here is the final result.

Home Page
Detailed View
Create a Mission
Profile Pages

The goal was to have a simple interface that is straight to the point. I know what you are thinking. That profile page does not seem to align with the research. You are absolutely correct. I have mentioned that compromises had been made.

A few potential users saw the UI, and the feedback received was very positive. A lot of users liked the simplicity and the use of white space. The feedback on the theme was very positive as well; a lot of users liked the little jargon used throughout the application.

There are noticeable improvements that can be made to the interface layout and component-wise. I would love to improve upon them or even redesign certain aspects, such as “Mission Creation” and add some SVG to the side navigation, to add some dynamics to the otherwise static page. Once I am done and graduated, I might do that.

Development

I picked Vue because I love the framework; I think it can be mighty when used correctly. I needed to reuse components across the application and move data across the application without making thousands of repeating requests. I find Vue’s store very useful and powerful, which was another plus. As the data is stored and pre-fetched, I do not have to wait for the client-side to catch up and update, allowing for a seamless switch between the views.

I did not go with React because I do not have enough experience with it if any. While learning it would not have been an issue, I have to work fast for the capstone. I have way more experience with Vue. Besides, adding learning React on top of Laravel would slow me down.

Laravel is the back-end for the application. I always appreciated how “eloquent” it is. I never had a reason to use it, with me being a full-stack designer ( UI design & client-side development).

Initially, it was between Django and Laravel. Laravel won because I could find a lot more resources when it came to using it with Vue. Django is a compelling and valuable framework, so it felt that using it for only an API was overkill.

I did separate the applications instead of making it a full server-side app. Being a client-side developer, I know just how large the app can get. Navigating files when you have many custom components, views, scss files, etc., can be extremely overwhelming. I had worked with an intertwined application during one of my internships, and let me tell you, having to separate a beast of an app was not something I want to experience ever again.

I understand the implications of separating them, especially when Laravel has fantastic integration with Vue. I have already experienced data and routing consequences; however, I believe it was the right decision.

I have learned a lot about server-side development, I used to stay away from it, but I think it makes me a much better developer in the long run. In fact, I love Laravel so much, I am thinking of doing another project with it.

Conclusion

An opinionated full stack designer.