GMAT & MBA: responsive UI Kit
Project
Creating digital marketing material ask part of promoting campaigns for GMAT and MBA
Problem
The client wishes to have a way to make their promotion more enaging to their target audience and draw them to subscribe to their materials
Solution
Design a responsive UI Kit and samples of how they look in email and landing page layouts and design sign up forms.
Roles
UX design
UI design
Email design
Landing page design
UI kit
Responsive design
Both GMAT and MBA are part of GMAC and their main aim was to promote about their early rollout exams; targeting India, Europe, US and Canada.
Various marketing assets has been created to market this global campaign; my role was to design visuals for their online subscription and newsletter needs in relation with their brand in mind.
I mainly worked with the developers team to create live email newsletters and landing pages; as well as reviewing the brand design with our own art director.
Visual designs for GMAT
Visual designs for MBA
User goal
The client wants more engaging email marketing designs while promoting their latest exams to attract more targeted audiences to sign up.
They also wish to have newly designed components where they can use to build e-newsletters on their own.
Research, ideation & problem solving
Research on whether GMAT's and MBA's brand colours and fonts passes the web accessibility were made; especially for email designs and both issues had came up for them.
Ideations on how a user interacts with an email where discussed. Thoughts on what a user would see when they click through email CTA buttons had lead to the creation of landing pages, and how they should sign up for more material to complete their user journey.
Email designs & UI Kit
For both GMAT and MBA, each have their own issues when it comes to web accessibility and email designs. Back-up fonts were suggested for both. Extra tints and shades were researched based on their own brand colours so that it it passes for web accessibility.
It was decided that a design kit of components is to be created for their own use, along with sample templates of both email and landing page designs to showcase how they can visually appeal to their target audience.
GMAT: UI Kit visuals designed for email and some responsive email samples
MBA: UI Kit visuals designed for email and some responsive email samples
Landing page designs & UI Kit
Most hi-fi designs were based on initial ideations from our own internal group. Some additional functions were added later during feedback stage. Different variations of some components are made so that the client can use whichever was appropriate to build desired pages on their own.
GMAT: UI Kit landing page visuals and some responsive page samples
GMAT: Sample responsive landing pages
MBA: UI Kit landing page visuals and some responsive page samples
MBA: Sample responsive landing pages
Reflections
This project was built mainly with Sketch as it was a tool where I could collab with our own art director at the time. Both GMAT and MBA were created within a tight deadline of approximately a month, so if I had anything that I wish I could do better, it would be to to test out how an email would behave in both light and dark modes.
As someone who had built marketing email newsletters in the past, web accessibility was something new that I had to keep in mind when creating them (user experience was something that probably have not been present back then.)
Knowing the main user goal was important for this project as this helps to remind us on how many assets were needed to be built within restricted timings while also satisfying the client's requirements. Another was to remind ourselves on who will be the users, the clients or the client's customers.
See another project…
Wilberforce Institute, University of Hull: UI Kit
Discover the process on how a newly reskin UI Kit was created for the Wilberforce Institute.
