– Project / Graduin Website

Graduin.com | Education Platform.

The goal was to create a functional user friendly platform for high-school or college students to be able to select and apply to multiple higher learning institutions from the same website as one application with a single fee.

Having an online application platform of this nature helps the different applicants to apply faster and more efficiently without the need to travel or wait in long ques at the physical premises of the different institutions across the country, and it also removes the stress of having to reapply at each single institution’s website one by one.

Some of the challenges on this project mainly revolved around the curation of accurately sourced institution course details for their differed enrollment requirements and specific prospectus per institution, in order for them to be readily available for viewing from the website directly.

Email - alcottdube@gmail.com

Information Architecture (CARD SORTING)

As part of  improving the structure of the platform on the front end and the backend functionality I conducted a card sorting session with a few individuals to find a solution.

From the sorting process, the initial functionality of the prior version of the platform had been overloaded & was too complex for the average user with too much information. Therefore I wanted to understand both the users experience and how they felt using the site, to get a better understanding overall. We found that by reducing the number of menu options and taking some of the headers to place them as sub sections within the page would be more efficient and the final results left the menu cluster free and easier to navigate with.

I found it was best to simplify the student application process with interconnected linking from the content of the site rather than separately from the website menu, and this would be better and more efficient from the users perspective.

graduin information architecture

User Journey

I mapped out the users’ steps to see how I could simplify their journey to help them reach their most important goals within the website during the selection of institutions via the application form through to final payment details section.

Wireframes

During my design process, I created wireframes for testing purposes and to get a general idea of the best layout to incorporate into the website overall.

I created high fidelity wireframes in Figma and used them for the final outcome after having tested the initial wireframes for the best possible user experience.

Based on the user research results this structure and layout were found to be timeless and most users found it more accessible.

Low fidelity Wireframe version

User Interface Design - Mockups

Once I tested out all usability mistakes, I started designing the final screens in Adobe XD. (only because I love Adobe 🙂

I proceeded with a visual style that is corporate and simple with a light color scheme blended with two main color tones – dark navy & faded reds, to avoid eye strain when in light mode.

This final look of the user interface and use of this style help the users to use the website with ease and stay engaged resulting in longer page usage times and better overall search engine ranking.

Desktop mockup

0
Pages & Screens
0 %
Increased R.O.I (and growing)