Interactive Elementary Learning Center
Designing a responsive website and brand identity that increased program registrations by 140%.
Role
UX Designer | Brand Designer
Timeline
2 months | 2024
Team
2 Design, 7 Designers
Overview
Overview
Overview
Client Brief
IELC is a free 7-week summer program that prepares elementary students for the upcoming school year's language arts curriculum.
Client Brief
IELC is a free 7-week summer program that prepares elementary students for the upcoming school year's language arts curriculum.
Client Brief
IELC is a free 7-week summer program that prepares elementary students for the upcoming school year's language arts curriculum.
Project Goals
To design a website to build credibility and trust with users to promote new registrations.
Project Goals
To design a website to build credibility and trust with users to promote new registrations.
Project Goals
To design a website to build credibility and trust with users to promote new registrations.
My Role
I led the design of the 'Become a Tutor' and 'Contact Us' pages, which enhanced the brand image and resonated with target users, resulting in a 140% increase in registrations in the first month.
My Role
I led the design of the 'Become a Tutor' and 'Contact Us' pages, which enhanced the brand image and resonated with target users, resulting in a 140% increase in registrations in the first month.
My Role
I led the design of the 'Become a Tutor' and 'Contact Us' pages, which enhanced the brand image and resonated with target users, resulting in a 140% increase in registrations in the first month.
DISCOVER
IELC lacked a platform to promote their program to an audience.
As a newly established organization IELC had no web presence outside of Instagram. I needed to build a trustworthy identity so people would be enticed to apply to be a tutor.
Project Goals
01 Establish IELC’s credibility
02 Increase tutor volunteers
03 Provide users with easy contact with IELC
DISCOVER
IELC lacked a platform to promote their program to an audience.
As a newly established organization IELC had no web presence outside of Instagram. I needed to build a trustworthy identity so people would be enticed to apply to be a tutor.
Project Goals
01 Establish IELC’s credibility
02 Increase tutor volunteers
03 Provide users with easy contact with IELC
DISCOVER
IELC lacked a platform to promote their program to an audience.
As a newly established organization IELC had no web presence outside of Instagram. I needed to build a trustworthy identity so people would be enticed to apply to be a tutor.
Project Goals
01 Establish IELC’s credibility
02 Increase tutor volunteers
03 Provide users with easy contact with IELC
SYNTHESIS
Students value flexibility and transparency.
I created user personas using these pain points to have a reference point for my target demographic: students wanting to know how to become a tutor.
SYNTHESIS
Students value flexibility and transparency.
I created user personas using these pain points to have a reference point for my target demographic: students wanting to know how to become a tutor.
SYNTHESIS
Students value flexibility and transparency.
I created user personas using these pain points to have a reference point for my target demographic: students wanting to know how to become a tutor.
USER RESEARCH
Gaining a holistic understanding of my audience.
I conducted competitive analysis of other similar children’s programs and focused on prospective tutors as my target demographic.
Insights
I search for common patterns and found strengths and weaknesses among the websites that influenced my perception of the organization.
🎨 Lack of branding: Having a clear brand identity makes the organization seem more put together and legitimate.
📄 Information overload: I was easily overwhelmed and the websites were often not easily scannable, making it less hooking.
🤞 Doubting credibility: Testimonials with generic names (i.e Parent) or low quality or inconsistent photos that look lower effort make the organization seem less reputable.
USER RESEARCH
Gaining a holistic understanding of my audience.
I conducted competitive analysis of other similar children’s programs and focused on prospective tutors as my target demographic.
Insights
I search for common patterns and found strengths and weaknesses among the websites that influenced my perception of the organization.
🎨 Lack of branding: Having a clear brand identity makes the organization seem more put together and legitimate.
📄 Information overload: I was easily overwhelmed and the websites were often not easily scannable, making it less hooking.
🤞 Doubting credibility: Testimonials with generic names (i.e Parent) or low quality or inconsistent photos that look lower effort make the organization seem less reputable.
USER RESEARCH
Gaining a holistic understanding of my audience.
I conducted competitive analysis of other similar children’s programs and focused on prospective tutors as my target demographic.
Insights
I search for common patterns and found strengths and weaknesses among the websites that influenced my perception of the organization.
🎨 Lack of branding: Having a clear brand identity makes the organization seem more put together and legitimate.
📄 Information overload: I was easily overwhelmed and the websites were often not easily scannable, making it less hooking.
🤞 Doubting credibility: Testimonials with generic names (i.e Parent) or low quality or inconsistent photos that look lower effort make the organization seem less reputable.
DEFINE
Encouraging users to become tutors.
Because I was responsible for the “Become a Tutor” page, I wanted to make sure the page was informing users of their responsibilities and benefits.
DEFINE
Encouraging users to become tutors.
Because I was responsible for the “Become a Tutor” page, I wanted to make sure the page was informing users of their responsibilities and benefits.
DEFINE
Encouraging users to become tutors.
Because I was responsible for the “Become a Tutor” page, I wanted to make sure the page was informing users of their responsibilities and benefits.
IDEATE
Highlighting key info through various iterations.
Involving the development team early determined our decision to starting with a mobile-first approach. I considered the client's needs and prioritized the "Benefits" section to hook users. I also used buttons and embedded forms that would guide user's to their end goal of registration.
In the contact page, I highlighted the contact information and location to establish the organization's legitimacy.
IDEATE
Highlighting key info through various iterations.
Involving the development team early determined our decision to starting with a mobile-first approach. I considered the client's needs and prioritized the "Benefits" section to hook users. I also used buttons and embedded forms that would guide user's to their end goal of registration.
In the contact page, I highlighted the contact information and location to establish the organization's legitimacy.
IDEATE
Highlighting key info through various iterations.
Involving the development team early determined our decision to starting with a mobile-first approach. I considered the client's needs and prioritized the "Benefits" section to hook users. I also used buttons and embedded forms that would guide user's to their end goal of registration.
In the contact page, I highlighted the contact information and location to establish the organization's legitimacy.
BRAND IDENTITY
Exploring branding based on the client's needs.
To highlight the client's educational services, I used iconography associated with elementary school like books and apples and built-off ideas from my cohort.
Rapidly iterating before finalizing an idea allowed me to explore diverse ideas which was crucial in finding concepts that aligned with our client.
BRAND IDENTITY
Exploring branding based on the client's needs.
To highlight the client's educational services, I used iconography associated with elementary school like books and apples and built-off ideas from my cohort.
Rapidly iterating before finalizing an idea allowed me to explore diverse ideas which was crucial in finding concepts that aligned with our client.
BRAND IDENTITY
Exploring branding based on the client's needs.
To highlight the client's educational services, I used iconography associated with elementary school like books and apples and built-off ideas from my cohort.
Rapidly iterating before finalizing an idea allowed me to explore diverse ideas which was crucial in finding concepts that aligned with our client.
MIDFI DESIGN
Listening to feedback and revisiting the drawing board.
During midfis, I constantly iterated on how to visually present information-dense pages. How can I engage users while including all the info given by the client? Because of time constraints I couldn't conduct formal user testing, however I applied external feedback to improve the storytelling on my pages.
Below are two are the first iterations I made of the become a tutor page. I aimed to focus on hierarchy and storytelling through a linear timeline structure as pictured on the right.
MIDFI DESIGN
Listening to feedback and revisiting the drawing board.
During midfis, I constantly iterated on how to visually present information-dense pages. How can I engage users while including all the info given by the client? Because of time constraints I couldn't conduct formal user testing, however I applied external feedback to improve the storytelling on my pages.
Below are two are the first iterations I made of the become a tutor page. I aimed to focus on hierarchy and storytelling through a linear timeline structure as pictured on the right.
MIDFI DESIGN
Listening to feedback and revisiting the drawing board.
During midfis, I constantly iterated on how to visually present information-dense pages. How can I engage users while including all the info given by the client? Because of time constraints I couldn't conduct formal user testing, however I applied external feedback to improve the storytelling on my pages.
Below are two are the first iterations I made of the become a tutor page. I aimed to focus on hierarchy and storytelling through a linear timeline structure as pictured on the right.
DESIGN SYSTEM
Defining the visual language of the brand.
Our design system was built from scratch using the vibrant colors often used in a classroom, evoking a sense of playfulness. I chose a sans-serif font to stay modern and professional, and maintain legibility.
DESIGN SYSTEM
Defining the visual language of the brand.
Our design system was built from scratch using the vibrant colors often used in a classroom, evoking a sense of playfulness. I chose a sans-serif font to stay modern and professional, and maintain legibility.
DESIGN SYSTEM
Defining the visual language of the brand.
Our design system was built from scratch using the vibrant colors often used in a classroom, evoking a sense of playfulness. I chose a sans-serif font to stay modern and professional, and maintain legibility.
HANDOFF
Bringing the website to life.
I communicated my design decisions to the development team to ensure smooth handoff. My designs were optimized for mobile first and desktop second.
HANDOFF
Bringing the website to life.
I communicated my design decisions to the development team to ensure smooth handoff. My designs were optimized for mobile first and desktop second.
HANDOFF
Bringing the website to life.
I communicated my design decisions to the development team to ensure smooth handoff. My designs were optimized for mobile first and desktop second.
FINAL PROTOTYPE
Become a Tutor Page
I placed the time commitment at the top so my target audience would understand the expectation of the role immediately. The “Apply To Tutor” buttons are also easily accessible. I also chose hero images where users can envision themselves as a tutor.
FINAL PROTOTYPE
Become a Tutor Page
I placed the time commitment at the top so my target audience would understand the expectation of the role immediately. The “Apply To Tutor” buttons are also easily accessible. I also chose hero images where users can envision themselves as a tutor.
FINAL PROTOTYPE
Become a Tutor Page
I placed the time commitment at the top so my target audience would understand the expectation of the role immediately. The “Apply To Tutor” buttons are also easily accessible. I also chose hero images where users can envision themselves as a tutor.
FINAL PROTOTYPE
Contact Us Page
I followed best form practices with elements like labeling and format, and included a confirmation message so the user is assured their form has been submitted.
FINAL PROTOTYPE
Contact Us Page
I followed best form practices with elements like labeling and format, and included a confirmation message so the user is assured their form has been submitted.
FINAL PROTOTYPE
Contact Us Page
I followed best form practices with elements like labeling and format, and included a confirmation message so the user is assured their form has been submitted.
REFLECTION
Key Learnings
01 Empathize with your audience.
Designing for a client with a mission was new territory for me. This project taught me to always consider the target audience when justifying my designs. I realize how empathizing with the user produces more meaningful and valuable designs.
02 Don't filter your ideas.
I learned how important it is to document every idea no matter how 'out-there' it might seem given the parameters of the project. Sharing these ideas with others also allows the opportunity for the idea to evolve in many different ways, but it’s also ok if it doesn’t. Brainstorming is messy but that’s the point!
03 Be Adaptable
Being able to work closely with a client, I had to constantly edit and cater my designs based on client feedback while also keeping the business and user goals in mind. It was a balancing act between what the client wanted and what I thought would work best through a design perspective. For example, suggesting a more simpler logo design than what the client liked because of legibility reasons when sized down.
REFLECTION
Key Learnings
01 Empathize with your audience.
Designing for a client with a mission was new territory for me. This project taught me to always consider the target audience when justifying my designs. I realize how empathizing with the user produces more meaningful and valuable designs.
02 Don't filter your ideas.
I learned how important it is to document every idea no matter how 'out-there' it might seem given the parameters of the project. Sharing these ideas with others also allows the opportunity for the idea to evolve in many different ways, but it’s also ok if it doesn’t. Brainstorming is messy but that’s the point!
03 Be Adaptable
Being able to work closely with a client, I had to constantly edit and cater my designs based on client feedback while also keeping the business and user goals in mind. It was a balancing act between what the client wanted and what I thought would work best through a design perspective. For example, suggesting a more simpler logo design than what the client liked because of legibility reasons when sized down.
REFLECTION
Key Learnings
01 Empathize with your audience.
Designing for a client with a mission was new territory for me. This project taught me to always consider the target audience when justifying my designs. I realize how empathizing with the user produces more meaningful and valuable designs.
02 Don't filter your ideas.
I learned how important it is to document every idea no matter how 'out-there' it might seem given the parameters of the project. Sharing these ideas with others also allows the opportunity for the idea to evolve in many different ways, but it’s also ok if it doesn’t. Brainstorming is messy but that’s the point!
03 Be Adaptable
Being able to work closely with a client, I had to constantly edit and cater my designs based on client feedback while also keeping the business and user goals in mind. It was a balancing act between what the client wanted and what I thought would work best through a design perspective. For example, suggesting a more simpler logo design than what the client liked because of legibility reasons when sized down.
