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.
As noted earlier, most students do not have any out-of-class experience to show off in their portfolios. That hurts fresh graduates during the job search. Students are typically limited to their minimal expertise, affecting the project at its core. There is no platform where students can collaborate with peers who attend the same university with the necessary knowledge. You have to rely on meeting someone organically or be introduced to one another. Limiting, isn’t it?
The solution is a freelance job board but for college kids. Where you work for free. A student will utilize the platform to find people in their college, find projects that may be of interest to them, and meet new people. By collaborating and working with other people, they will earn achievements to boost their motivation, expand their portfolio of projects, and learn valuable skills, like communication, teamwork, etc. Students get to work on real projects and solve actual problems, which is a whole lot more motivating than a made-up prompt.
User Research Phase
First, a survey was distributed among college students in majors, such as IT, engineering, art, and others. The primary focus was on majors that require a portfolio or proof of skills when applying for a job. The survey mainly focused on features. The results revealed the following information:
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
Based on all of the data compiled, three user personas are born for this project. Each user has a specific set of skills, motivations, and experiences. They allow for a wide range of use cases to accommodate and keep in mind while designing the UI.
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
Writing this months later, I cannot find the wireframes of the design. However, I do have an inspiration board that I created. These shots were taken from dribble, featuring many design elements that I wanted to implement in my design. There are some colour scheme examples that I was considering.
In the end I decided to go with the following 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.
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.
I decided to go with Vue.js for the client-side and Laravel for the back-end for the development stack. Using Vue and Laravel is pretty standard, as the two applications have great support for each other. UI libraries used are VueBootstrap and Element UI with components updated one way or another using SCSS to fit the theme.
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.
I am still developing the application, and my capstone is ending in a few months. Until then, I will not share the code base publicly. This case study is more focused on the UX/UI aspect of the development. I hope you enjoyed reading it, and if you have any feedback, I am looking forward to it!