lead-generation website design

https://mepro.pearson.com/

Year:

2019

Skills/ Tools

EduTech, Visual Design, User Personas

MePro is a feedback based English language improvement tool that betters your chances of employability and career development. To enable this tool to reach its audiences through the primary channel of information - a website, it was necessary that the website was well designed.

Role: As a junior designer on this project, I worked on the design with guidance from my senior designer who provided feedback and improvement suggestions at each step.

User Personas

Based on initial secondary research and client interactions, I created two user personas. These personas represent the primary target audience that would access the website and invest in this learning solution. One is an individual learner and another is an institution head who wants to train several individual learners.

Initial Brainstorming

To make the website engaging and convert more customers, I sketched out different forms of interaction. The key consideration was to still provide the necessary information in a clear and concise manner. To add to the concept and develop an underlying theme, I tried working with various ideas that would reflect the brand.

Landing Page Wireframe

Some of the key problems addressed while designing were -
1. Addressing all target users
2. Prominent CTA buttons
3. Clearly mentioning advantages and benefits
4. Courses and content shown in brief to give the users an idea about what to expect
5. Explaining how the tool works

Other Wireframes

Using "conversations" as the theme of the website and ensuring that a consistent flow of information is maintained across all pages of the website, the wireframes were created. Another consideration was to make the pages easy to navigate and accessible.

Brand Guidelines and UI

Based on the brand guidelines, I worked on developing a visual style while still maintaining the concept of "conversations" across the website. The focus was on making the UI less text heavy and created a smooth flow and visual hierarchy while
browsing.

UI Implementation

This visual style was implemented across various pages creating consistency and providing precise information. The process involved many iterations and client feedback.

Responsive Design

Finally, I created a responsive mobile UI based on the web for easier development and implementation. Throughout development, there was communication with the development team to ensure accurate implementation.