Desktop & mobile, design system, CRM & style guide
Studee student enrolment online porthole
This project was to create a desktop and mobile site for overseas students to enrol at different universities.
The problem: Finding and enrolling in an overseas university can be overwhelming. How can we make the process easier?
My role for this project was UI/UX and design systems.
Atomic design system
As this site was going to be fairly large and was going have many different components used throughout I decided an atomic design systems would be the best choice to keep everything consistent and well organised. This was also nice as it made creating rules and brand guidelines quick and made life for developers much easier.
UI & components
8px grid system
For the User interface elements I went with a 8px grid system to keep spacing consistent. Also the same system for typography and element sizing so everything would be in proportion to each other and therefore visually pleasing. For the colour palate I used the 60 – 30 – 10 rule as this is also naturally pleasing to the eye but also keeps the primary elements as a main focal colour.
Below are some UI elements.
Web and mobile
High fidelity mocks
Bellow are a series of selected screens. These are just a few.
There are many more in total but these I felt were some of the
most important pages and give the clearest idea at a glance.
These are the final selected designs for the mobile version. Apple higs has been used for best practice and usability. The style is clean and minimal to help create ease of use and feel of calm.
This was a fun but challenging project. I enjoyed the whole process and learnt lots. I had to find solutions and layouts to fix difficult issues like an ever changing amount of text and random data scraping. There were many tech limitations and time was very short.
There are definitely things I would redo given the chance and questions that I would address earlier on in the project. Over all it was a great success and the project was one of the most enjoyable to date.