Select Page

A common problem

The task

The main objective of this web app is to connect students online to facilitate peer-to-peer learning, support, feedback, and motivation. There are tons of social platforms out there, but none of them is specifically designed for students all over the world. Some are limited to a few universities or to single classes, not allowing for a larger and more comprehensive support network.

I undertook this project in order to complete my UI Design specialisation course with CareerFoundry, and I chose to develop this particular app because studying has been an important part of my life, ever since I can remember. When I was a student the means to share materials and ideas were less common, so I wanted to create a structure that fits the needs I would have had at that time. Moreover, I have professional experience helping students through visual thinking techniques, and I am trying to integrate this aspect of my background into the design of the responsive web app.

Main tools

  • Sketch
  • InVision
  • Affinity Designer
  • Photoshop
  • Principle

Research and analysis

From UX research to user flows

First, I analised all the research data and the personas that described both new and frequent users. I designed a simple user flow that would allow students to find support without being distracted by too many functions.

Finding peers, communicating with them, sharing opinions, experiences and studying material will be the main focus of the app.

Starting to design

From low to mid-fidelity

The low-fidelity screens gave me the chance to explore the main structure and the most important pages of the website. Some examples below include the dashboard, the creation of a new post, the private message function and the search function.

The next step was the mid-fedelity prototype, which kept improving over different versions. I started by setting up a 4 x grid system, and then I started to translate the ideas I had previously put on paper into a more precise prototype. At this point, all icons and UI elements were taken directly from stock resources and I just focused on content organisation.

Defining the mood

Moodboards

When I started exploring possible moods for inspirations, there were two main directions I wanted to explore.

Mood #1

Analog, vintage and familiar

The first mood board is focused on analog studying tools: mostly pens, pencils, books and good old backpacks. It should convey a sort of vintage feeling, with bolder icons and a bold contrast between warm and cold colours.

I chose a combination of Serif and Sans Serif fonts, the first one for headers, the second one for paragraphs and buttons. It is very easy to associate this style with many textbooks used in schools and universities, so the users should feel a sort of warm familiarity with such a design.

Mood #2

Digital, modern and minimal

The second mood board is focused on modern, digital studying tools: laptops and smartphones, now more important than ever in the field of education. It should convey a modern feeling, with minimal icons and a mostly blue color palette, which is often associated with a focused, relaxed environment. I also used a brighter red, perfect for highlighting important functions and draw the users’ attention.

In this case, I chose a Sans Serif font, which looks cleaner and is highly customisable thanks to many different styles.  Both younger and older students should find this combination captivating, since there are so many digital learning opportunities now, and there is really no age limitation for further education thanks to modern online platforms.

The final choice: time to get an update

I chose the second mood board for a couple of simple reasons. This web app is designed for students that are looking for an easy and quick connection with students from all over the world. They need a fast and reliable way to find other people with the same interests, to share with them studying material and to get feedback from them.  They should feel that they are using a modern and powerful digital tool, and they should not be distracted from too many saturated colours and bold icons. So a combination of more relaxing colours, modern fonts and minimal icons should be the best way to go.

Defining the style

Logo and style guide

Colours: Modernity – diversity

I used the square technique starting from a red color that was part of my moodboard. This palette, mostly made up of cold colours, is modern, diverse and fresh. The warmer red color can be really helpful for highlighting different functions of the web app and surely gives the opportunity to create a playful, yet not stressful experience for the users.

Logo: sharing ideas

Having the chance to connect with peers means that there will be a constant exchange of ideas. The logo is a clean and simple visualisation of this concept, easily understandable by everyone.

It is also meant to convey the same minimalistic idea of the whole design approach used throughout the web app.

 

Icons, typography and imagery

I created a minimal set of icons for all the functions of the web app. Since the search buttons will be smaller than the icon on the navigation bar, there are two versions of the magnifying lens that will serve both purposes.

I chose to use a single Sans Serif font, Nunito Sans, because it offers a lot of different styles and weights. It is easy to read on screen and has enough variety to avoid becoming boring.

Images were an important choice. I went for a simple illustration style for two
main reasons. First, most of the pictures relating to education and studying seem so banal and insignificant. There are tons of images with books, laptops, students
smiling and pointing all together at a screen. This doesn’t say anything about
the web app and what it’s made for.

These illustrations use a nice mix of analog and digital educational tools, of
both individual and collaborative studying.

Second, it’s much easier to play with colours and customise an illustration.
It is very easy to change the color palette of these drawings according to the mood I may want to convey in each screen.

 

Finishing touches

Perfecting functions

I really wanted to give much attention to the peer searching process. If students all over the world are connected, it’s important to be able to filter the results in the most precise way possible, avoiding a huge waste of time looking for the wrong person.

This is the result I came up with: the users will have the chance to refine their research as much as possible, based not only on a main keyword (in this case, a name), but also on the institution, location and interests of other people.

High fidelity prototype

Results

Interactive prototype

A journey evaluation 

Final considerations

The good

One of the very best things I got from this course were the feedbacks from my mentor. Having someone with tons of experience reviewing with much attention all my work has been extremely helpful and gave me the chance to grow a lot.

I also improved my skills with many softwares that I already knew, but that I had never had the chance to use so thoroughly.

Also, improving and learning new skills is an important part of my life, and this has been yet another step in my continuing education.

The bad

Juggling many activities and studying is never easy. I feel I could have done more on certain tasks, and surely with more time I would have further refined certain details. Anyway, this was a good reminder that some steps require full dedication and cannot be skipped.

The kind-of-improvable

The UX research was quite basic and not extensive at all. It would have been interesting and useful to have more data to base the design on.