Elisse Education Website Revamp
Overview
Elisse Education is an Australian-based company that provides end-to-end educational support and personalised guidance on helping people acquire nationally-recognised qualifications in a quick, simple and cost-effective way to help them advance their careers. I did this as a freelance project and was supposed to only do the UX and UI of the website. Later on, they requested for me to do the frontend development as well. The project was done in the content management system, WordPress, which has more tools and flexible and would be easy for them to make changes in the future.
Role and team members
Role: UX and UI Designer, Frontend developer
Other team members: Product manager, backend developer and graphic designer
Tools used: Sketch, WordPress, Trello, Skype
The process
Research & requirements gathering
Figure 1 Research materials and tools used
The project manager already had in mind which competitors for me to check so I’ll know what could be the possible look and feel that they want. I laid out and studied the flow and elements on these competitor’s websites, as well as the information architecture, and compared it with what the current Elisse website has. I met the team to collaborate with so I know who to work with and tap on when I require additional information.
Sketches, information architecture & wireframes
After all the research, I created an information architecture for the Elisse website and sketched some wireframes. I sent the product manager a couple home screens for him to choose which look and feel best represents Elisse.
Figure 2 Some sketches and draft information architecture of the new website
Figure 3 The new website wireframes that were reviewed by the product manager
Iterations, mock-up screens and testing
After all wireframes were approved, I have started working with the graphic designer on creating the assets for the website which are then reviewed by the product manager. Mock-up screens and prototypes were then created and tested by the product manager.
Figure 4 First version of the mock-up screens
Website 1.0 vs the new Elisse website
Assets such as icons, logo and images were provided by Elisse. All the colors in the website are based on the brand color of Elisse, which are on the logo designed by their graphic designer.
Elisse website 1.0
The new Elisse website
