What is First-Gen Place?
First-Gen Place is a non-profit organisation that creates a virtual safe space for first-generation students. The goal is to help students through any challenges they might face because of the first-generation status.
My role:
UX/UI Designer (created new features for an existing website in WIX)
Duration:
6 weeks
Tools:
Figma
Wix
meet
First-Gen
Place
First-
Gen
Place
In progress
In progress
What is First-Gen Place?
First-Gen Place is a non-profit organisation that creates a virtual safe space for first-generation students. The goal is to help students through any challenges they might face in college because of the first-generation status: particularly, applying to college, working towards a degree, and looking for the first job.
My role:
UX/UI Designer (created new features for an existing website in WIX)
Duration:
6 weeks
Tools:
Figma
Wix
meet
First-Gen
Place
In progress
What is First-Gen Place?
First-Gen Place is a non-profit organisation that creates a virtual safe space for first-generation students. The goal is to help students through any challenges they might face in college because of the first-generation status: particularly, applying to college, working towards a degree, and looking for the first job.
My role:
UX/UI Designer (created new features for an existing website in WIX)
Duration:
6 weeks
Tools:
Figma
Wix
meet
Case Summary
Background
The First-Gen Place was created by first-generation students for first-generation students, who believe that success of college experience shouldn't depend on student access to resources.
The process can be daunting, confusing, and students might feel like nobody else understands how they feel.
Problem Statement
Our users need a way to select relevant scholarships based on their criteria and contact a mentor whenever they need help, because they often find college processes confusing due to their first-generation status.
Additionally, our stakeholders need a way to collect data from various users (students, parents, educators) to better support them with relevant information.
Potential Solution
Create a members area on the existing First-Gen Place website where users can view relevant scholarship information and select the best options for themselves. Include a list of verified mentors with relevant information and provide a way for users to contact them whenever they need advice.
Add a required step to the sign-up flow for users to select their user type, with the goal of collecting data.
Case Summary
Background
The First-Gen Place was created by first-generation students for first-generation students, who believe that success of college experience shouldn't depend on student access to resources.
The process can be daunting, confusing, and students might feel like nobody else understands how they feel.
Problem Statement
Our users need a way to select relevant scholarships based on their criteria and contact a mentor whenever they need help, because they often find college processes confusing due to their first-generation status.
Additionally, our stakeholders need a way to collect data from various users (students, parents, educators) to better support them with relevant information.
Potential Solution
Create a members area on the existing First-Gen Place website where users can view relevant scholarship information and select the best options for themselves. Include a list of verified mentors with relevant information and provide a way for users to contact them whenever they need advice.
Add a required step to the sign-up flow for users to select their user type, with the goal of collecting data.
Design process
What are the first-generation students needs?
I began my process with a kickoff meeting involving the stakeholders and the designer of the First-Gen Place website. This meeting helped me gain a better understanding of the users' and the organization's needs. The CEO also highlighted key goals to effectively support students, their parents, and educators.
I began my process with a kickoff meeting involving the stakeholders and the designer of the First-Gen Place website. This meeting helped me gain a better understanding of the users' and the organization's needs. The CEO also highlighted key goals to effectively support students, their parents, and educators.
First-Gen Place needs and potential solutions
First-Gen Place needs and potential solutions
01
"We want users who fit our terms to be able receive personalized support."
"We'd like to see how many students, parents, and educators are in need of our platform and we want send them relevant information."
"We want users who fit our terms to be able receive personalized support."
"We'd like to see how many students, parents, and educators are in need of our platform and we want send them relevant information."
Create a member area for users to access once they create an account.
02
"We want to provide users with a list of available scholarships along with the necessary information so they can select those that fit their requirements."
"We also want to be able to update this list regularly."
"We want to provide users with a list of available scholarships along with the necessary information so they can select those that fit their requirements."
"We also want to be able to update this list regularly."
Create a CMS dataset to display available scholarships, and add filters to help users find the best matches.
Create a CMS dataset to display available scholarships, and add filters to help users find the best matches.
03
"The website has a few issues and not responsive subscription form."
"The website is missing a footer, and some parts of the navigation are not smooth."
Improve the overall website consistency and visuals across different breakpoints, enhance navigation, and create a footer.
What screens need to be designed?
Following the user needs and First-Gen Place requirements I created user flows which helped me define the necessary features and functions needed for each step in the journey.
Following the user needs and First-Gen Place requirements I created user flows which helped me define the necessary features and functions needed for each step in the journey.
Requirement 1
As a non-profit organization, we want users to confirm their user status so that we can provide them with the best support.
As a non-profit organization, we want users to confirm their user status so that we can provide them with the best support.
Requirement 2
As a non-profit organisation, we want users to clearly review and confirm our terms of use, so that we can fulfil our mission.
As a non-profit organisation, we want users to clearly review and confirm our terms of use, so that we can fulfil our mission.
Requirement 3
As a student support service, we want to keep a list of available scholarships so that users can easily find one without extensive research.
As a student support service, we want to keep a list of available scholarships so that users can easily find one without extensive research.
How did I design wireframes?
I created all my mobile and desktop wireframes in Figma, which allowed me to share them with stakeholders and gather feedback.
I also designed multiple variations, following the provided style guide and branding.
After my detailed presentation, we discussed which design version best meets the users' needs, allowing me to move forward and create the screens in Wix.
I created all my mobile and desktop wireframes in Figma, which allowed me to share them with stakeholders and gather feedback.
I also designed multiple variations, following the provided style guide and branding.
After my detailed presentation, we discussed which design version best meets the users' needs, allowing me to move forward and create the screens in Wix.
Log in / Sign up (mobile) wireframes
Log in / Sign up (desktop) wireframes
Scholarship (mobile & desktop) selected design
How did it go with designing in WIX?
I started using Wix by exploring its features and identifying the best options for creating the necessary components and screens.
However, I encountered design limitations and constraints that prevented me from implementing my designs as planned.
With my users in mind, I made the necessary adjustments to adapt.
I started using Wix by exploring its features and identifying the best options for creating the necessary components and screens.
However, I encountered design limitations and constraints that prevented me from implementing my designs as planned.
With my users in mind, I made the necessary adjustments to adapt.
Challenges and solutions
Challenges and solutions
01
Restriction with navigation bar (members area) and it's issues of responsiveness trough different breakpoints.
Restriction with navigation bar (members area) and it's issues of responsiveness trough different breakpoints.
Adapted horizontal navigation bar instead of vertical, which allowed me to safe space and present content in a better way.
Adapted horizontal navigation bar instead of vertical, which allowed me to safe space and present content in a better way.
02
Repeaters that display scholarship content from the CMS don't allow to add a collapsible element to present the information.
Repeaters that display scholarship content from the CMS don't allow to add a collapsible element to present the information.
Presented all scholarship information at once. Used visual hierarchy, different typography weights, and spacing to make the information easily scannable.
Presented all scholarship information at once. Used visual hierarchy, different typography weights, and spacing to make the information easily scannable.
03
Wix doesn't display data on how many different types of users (students, parents, educators) have created accounts or provide their details.
Wix doesn't display data on how many different types of users (students, parents, educators) have created accounts or provide their details.
Collaborated with a developer to discuss the necessary details for building a dashboard that tracks account creation by user type and collects relevant user information.
Collaborated with a developer to discuss the necessary details for building a dashboard that tracks account creation by user type and collects relevant user information.
Original Design in Figma (scholarship screen)
Original Design in Figma
(scholarship screen)
Adjusted Design in Wix (scholarship screen)
Adjusted Design in Wix
(scholarship screen)
Adjusted Design in Wix
(scholarship screen)
What other elements did I optimize?
What other elements did I optimize?
What other elements did I optimize?
Apart from creating new features I identified website elements which needed improvement.
Before
After
Reflection and Next steps
Key learnings
Understanding technical limitations early on is crucial to save time, design effectively, and present feasible solutions to stakeholders.
I’ve gained experience with Wix and its CMS features and dataset functionality.
I’ve enhanced my coding skills, particularly in adjusting elements and creating simple interactions.
Understanding technical limitations early on is crucial to save time, design effectively, and present feasible solutions to stakeholders.
I’ve gained experience with Wix and its CMS features and dataset functionality.
I’ve enhanced my coding skills, particularly in adjusting elements and creating simple interactions.
Next steps
The next step in website development is to create a mentorship screen where users can select a mentor and contact them whenever they need help.
Another focus will be updating the landing page hero copy to shift from encouraging users to subscribe to prompting them to create an account.
I will also maintain the website according to stakeholders' needs.
The next step in website development is to create a mentorship screen where users can select a mentor and contact them whenever they need help.
Another focus will be updating the landing page hero copy to shift from encouraging users to subscribe to prompting them to create an account.
I will also maintain the website according to stakeholders' needs.
Thank you for scrolling!
See other projects
