PassPapers is an online mock test platform for Selective Exam preparation. My role involved developing a fresh design for the business’s landing page which provides a smooth user flow and introduction to the features of the platform.
PassPapers’ previous landing page was mainly missing a strong user flow which could clearly articulate the features of the platform. Elements were arranged in an overly linear, boxed structure which failed to provide an engaging form of storytelling.
The main sites viewed in comparison to this project were either SaaS landing pages or other educational platforms which provide similar services. The main purpose of this was to find forms of site layout which have a strong start to end user progression through the service’s main features.
Some points of interest from a UI/UX standpoint include:
Sites analysed (from top to bottom)
north.cloud
www.empact.partners
www.notesedu.com.au
www.hopenvios.com.ar
www.onassemble.com
The user flow of the landing page is intended to provide a detailed run down of the platform’s features and ultimately persuade potential customers. The hero section provides a brief outline of the platform’s purpose: “Level up your selective test preparation,” and introduces credibility through customer success rates and reviews. The features section initially introduces the the simple 3 step summary of the program before going into further depth on each category: Learn, Practice and Revise. Finally, a final testimonial section is added with a quoted review block to further increase credibility before the pricing CTA and FAQ.
The key development through client review and feedback moved initial prototypes towards a stronger sense of visual accompaniment to textual information.
The typography of the site revolves around a clear communicative function in order to articulate the key information of the platform. The main fonts used are:
The colour choices aim to achieve a modern and vibrant feel which compliments the engaging and dynamic learning style of the platform. The main layout of the page is built on monochromatic greys and whites. This is used in tandem with the bright and dark blue brand colours as well as a saturated pink and yellow for highlighted sections.
Vector images are also combined with text sections to further enforce the information provided as well as provide visual reference and vibrancy to the layout.
The final design aims to convey the key features and mission of the platform through a straightforward layout backed by a vibrant colour palette. Users move through key sections of multiple features and testimonials before arriving at a CTA pricing section which is styled based on tiers of subscription.
From top to bottom:
Full landing page
Introduction to features iPhone mockup
Hero Section iPhone mockup
