course landing page
course landing page
role
role
Product Designer
Product Designer
year
year
2023
2023
tools
tools
Notion, FigJam, Figma, Pen and Paper.
Notion, FigJam, Figma, Pen and Paper.
applied skills
applied skills
Desk research, stakeholder interview, experience map, wireframe, UI, and more.
Desk research, stakeholder interview, experience map, wireframe, UI, and more.
With the participation of the company's owner, the instructor and 7 other students, this was my first project as a Product Designer carried out through 10 weeks. The project was started together with the whole class and finished in partnership with Taryn Berbee as UX Designer.
With the participation of the company's owner, the instructor and 7 other students, this was my first project as a Product Designer carried out through 10 weeks. The project was started together with the whole class and finished in partnership with Taryn Berbee as UX Designer.
a new start
a new start
Going through a transition from consultancy to equity-based social impact online courses, the goal was to understand how best to reach new users, in addition to providing reassurance about the new product on offer.
After interviewing the stakeholder, some questions were raised.
Some of these would be business decisions, such as which platform to use, and others would focus on users.
Going through a transition from consultancy to equity-based social impact online courses, the goal was to understand how best to reach new users, in addition to providing reassurance about the new product on offer.
After interviewing the stakeholder, some questions were raised.
Some of these would be business decisions, such as which platform to use, and others would focus on users.
attention points
attention points
1.
What does a course need to empower students to create a positive social impact?
What does a course need to empower students to create a positive social impact?
2.
How to get users to trust the brand and invest their money in the course?
How to get users to trust the brand and invest their money in the course?
research
research
- All the research carried out can be found in this FigJam file, in case you're interested in a more in-depth look.
- All the research carried out can be found in this FigJam file, in case you're interested in a more in-depth look.
problem
New company approach with little direction on how to reach new customers.
discover
Brief analysis
Desk research
Survey
User/Stakeholder
interviews
Insights
define
Affinity map
Persona
Task analysis
Experience map
User flow
the real problem
A soon to be social worker needs to improve their abilities by taking an course, and wants to feel confident that made the right choice.
DEVELOP
Wireframe
low and
medium
fidelity
DELIVER
User interface
Prototype
Solution
A landing page that provides as much relevant information as possible to make your choice a safe one.
problem
New company approach with little direction on how to reach new customers.
discover
Brief analysis
Desk research
Survey
User/Stakeholder
interviews
Insights
define
Affinity map
Persona
Task analysis
Experience map
User flow
the real problem
A soon to be social worker needs to improve their abilities by taking an course, and wants to feel confident that made the right choice.
DEVELOP
Wireframe
low and
medium
fidelity
DELIVER
User interface
Prototype
Solution
A landing page that provides as much relevant information as possible to make your choice a safe one.
understanding
the problem
understanding
the problem
When we started the project, the brief was still very vague and, even after better understanding the market and the business, when we conducted the first interview with the stakeholder, we made an affinity map to organize the information.
Still at the start of the project, we needed to define a problem and understand what we were building - remembering that the stakeholder had not defined a final product.
When we started the project, the brief was still very vague and, even after better understanding the market and the business, when we conducted the first interview with the stakeholder, we made an affinity map to organize the information.
Still at the start of the project, we needed to define a problem and understand what we were building - remembering that the stakeholder had not defined a final product.
talking to
those who know
talking to
those who know
Although we conducted a logical survey to try to reach as many people as possible with the same questionnaire, we ended up interviewing 4 users who are friends and acquaintances with experience in social work.
It was through the interviews that we were able to get the clarity we needed to start defining a product and what was essential to transmit the desired confidence to each future student.
These are the main insights:
Although we conducted a logical survey to try to reach as many people as possible with the same questionnaire, we ended up interviewing 4 users who are friends and acquaintances with experience in social work.
It was through the interviews that we were able to get the clarity we needed to start defining a product and what was essential to transmit the desired confidence to each future student.
These are the main insights:
aligning the facts
aligning the facts
business believes
business believes
1.
choosing the platform was a major concern for the stakeholder
choosing the platform was a major concern for the stakeholder
2.
focus on professionals and individuals who have been working for a long time
focus on professionals and individuals who have been working for a long time
3.
without much clarity about what would be offered to the students
without much clarity about what would be offered to the students
findings
findings
1.
the student just need to have enough information to chose and trust, the platform is irrelevant
the student just need to have enough information to chose and trust, the platform is irrelevant
2.
professionals with less experience can show more interest and benefit more from course offers
professionals with less experience can show more interest and benefit more from course offers
3.
users and future students need clarity when making choices and categorizing can be interesting
users and future students need clarity when making choices and categorizing can be interesting
Meeting amanda
Meeting amanda
Having a persona during this project was essential to create a focus in the construction of the product, since the brief didn't present so many details.
In order to further detail the needs of Amanda, our persona, we detailed motivations, pains and frustrations, objectives, needs and expectations, interests and influences, as well as carrying out a task analysis and experience map.
Having a persona during this project was essential to create a focus in the construction of the product, since the brief didn't present so many details.
In order to further detail the needs of Amanda, our persona, we detailed motivations, pains and frustrations, objectives, needs and expectations, interests and influences, as well as carrying out a task analysis and experience map.
Age - 28
Location - London
Started to study history but changed to social work after pandemic
Loves to travel
Have a lot of online friends
Age - 28
Location - London
Started to study history but changed to social work after pandemic
Loves to travel
Have a lot of online friends
Amanda grow up in a regular family, having everything in the very normal way. When she was 16, she started a volunteer job at a charity bazar, close to her home. At that point, she needed to choose a career and her first choice was a History major.
After going to college and having more knowledge about what happened through the years, she felted that she needed to do more. During pandemic she decided to start a second major, this time in social work and being working in the area since.
Expectations:
Expects to know more people who have some experience in the field.
To feel more prepared and try new challenges.
To improve her knowledge.
Motivations:
Helping people through her knowledge and abilities.
To give tools to the people so they can have more power.
To feel a more complete professional.
Pains and frustrations:
The lack of organization about some of the courses she already took.
The big role that the money have for this job.
Some superficial trainings.
Goals:
Try to change the world even if she can not do too much by herself.
To make some difference to the people she crosses during life.
the Statement
the Statement
Amanda is a soon to be social who wants to improve her abilities by taking an additional course, and she wants to feel confident that she chose the right course for her.
Amanda is a soon to be social who wants to improve her abilities by taking an additional course, and she wants to feel confident that she chose the right course for her.
solutions
solutions
Through a landing page:
Provide plenty of information about the course, methodology, teachers, timetable.
Include testimonials from former students.
Provide short clips of some of the lessons to create familiarity.
Through a landing page:
Provide plenty of information about the course, methodology, teachers, timetable.
Include testimonials from former students.
Provide short clips of some of the lessons to create familiarity.
starting
to build
starting
to build
With the solution defined, the first step was to understand the structure of the page, what would need to be included and the order of this information.
Structure defined, a low-resolution wireframe was created to serve as the basis for the medium-resolution wireframe.
With the solution defined, the first step was to understand the structure of the page, what would need to be included and the order of this information.
Structure defined, a low-resolution wireframe was created to serve as the basis for the medium-resolution wireframe.
highlights
highlights
Social proof with student numbers and testimonials at the top of the page to generate trust.
Tags to organize courses, keep track of growing offers and also facilitate targeted searches.
Preview to offer familiarity and collect emails.
Space for suggestions and qualified opinions as well as another space for collecting emails.
Offer the course content to provide even more confidence.
Social proof with student numbers and testimonials at the top of the page to generate trust.
Tags to organize courses, keep track of growing offers and also facilitate targeted searches.
Preview to offer familiarity and collect emails.
Space for suggestions and qualified opinions as well as another space for collecting emails.
Offer the course content to provide even more confidence.
User’s feedback
User’s feedback
An informal usability test was carried out between the medium-resolution wireframe and the final design to see if the tasks would be completed successfully. All the tasks were completed without any major problems and we were able to move on to the final design.
An informal usability test was carried out between the medium-resolution wireframe and the final design to see if the tasks would be completed successfully. All the tasks were completed without any major problems and we were able to move on to the final design.
the design
the design
The design was based on the new brand identity provided by the stakeholder. In addition, the importance of conveying a young and relaxed image was emphasized, bringing a lot of color and irreverence to the page.
*After finalizing the design, we went back to the users who took part in the survey to validate some decisions and they were unanimous in their acceptance of the product, reinforcing the importance of collecting emails, the social proof at the top of the page and the space for suggestions.
To access the navigable prototype, just go to the Figma link.
The design was based on the new brand identity provided by the stakeholder. In addition, the importance of conveying a young and relaxed image was emphasized, bringing a lot of color and irreverence to the page.
*After finalizing the design, we went back to the users who took part in the survey to validate some decisions and they were unanimous in their acceptance of the product, reinforcing the importance of collecting emails, the social proof at the top of the page and the space for suggestions.
To access the navigable prototype, just go to the Figma link.
full preview
full preview
full preview
next steps
next steps
For the stakeholder, it is possible to keep the landing page growing thanks to the structure of the page. In addition, with the tags the courses can always be organized and make it easier for future students to search and choose.
As for the continuation of the product, it would be ideal to carry out an appropriate usability test and apply the adjustments potentially pointed out by users.
For the stakeholder, it is possible to keep the landing page growing thanks to the structure of the page. In addition, with the tags the courses can always be organized and make it easier for future students to search and choose.
As for the continuation of the product, it would be ideal to carry out an appropriate usability test and apply the adjustments potentially pointed out by users.
takeaways
takeaways
What began as a course to 'learn a bit of UX to be a better UI' became the start of my career as a Product Designer :)
One of the best exercises I was able to do during the classes was to think quickly and then organize the ideas, taking advantage of all the insights. Also, not getting attached to ideas and solutions was essential!
And last but not least, learning goes far beyond the process determined by instructors and is constant.
What began as a course to 'learn a bit of UX to be a better UI' became the start of my career as a Product Designer :)
One of the best exercises I was able to do during the classes was to think quickly and then organize the ideas, taking advantage of all the insights. Also, not getting attached to ideas and solutions was essential!
And last but not least, learning goes far beyond the process determined by instructors and is constant.
build with 🤍 in Nantes, France
don’t be a stranger!
feel free to connect :)
build with 🤍 in Nantes, France