WriteGirl Website Relaunch
Helping teens write their way to brilliant futures.
Roles: UX Research UX Design UI Design
Overview
WriteGirl’s mission is to promote creativity and self-expression to empower girls and gender-expansive youth, within a community of writers. WriteGirl's website lacks a distinctive and cohesive design, which diminishes its ability to capture visitors' interest and encourage sign-ups. Our redesign of the website will help improve navigation and enhance visual storytelling which will result in more enrollments to the program from teens to young adult females. Wireframes will be created through Figma to improve the organization of information on the website.
User Research
The problem
The current WriteGirl website presents a crowded and overwhelming experience for users due to an excess of information and repetitive secondary tabs in the main navigation. The layout lacks visual appeal and relies heavily on text, making it difficult for visitors to quickly find what they need. Many sections could be consolidated or streamlined to improve clarity and usability. Additionally, the site’s plain design and lack of a cohesive visual theme fail to engage users or reflect the vibrant, creative spirit of WriteGirl’s mission.
Problem Statement: As a young female interested in writing, I want to learn more information on non-profit organizations like WriteGirl but am overwhelmed with the poorly organized information on the website.
Research Goals:
Redesign website navigation to enhance visual storytelling
increase the enrollment through website redesign
Consolidate information shared on website to make it easy on the eye
Incorporate new fonts and colors while following the original theme
User Persona
Research Plan:
Design Team:
Group project with three members total
Mission:
Be able to shop for vintage clothes online and encourage community building
Duration:
One month project
Create new navigation system on Figma
Create wireframes for important website pages on Figma
Make a mobile wireframe
A/B usability testing on mobile wireframes
User Journey Map
Mind Mapping
We want to focus on…
Content: Relevant and simple navigation
Informing: Send emails with information or mail brochures
Community: Inclusivity/diversity
Navigation Sitemap
Navigation Wireframe
Website Wireframes
Mid fidelity Wireframes were made through Figma for the website redesign. We focused on the important pages such as the home page, who we are, donation main page, donation payment, and the donation confirmation page.
The sketches below are low-fidelity brainstorms for different pages of the website.
Final mid to high fidelity wireframes are shown in the slideshow below.
Style Guide
Home Page
Who We Are Page
Donation Page
Donation Payment Page
Donation Confirmation Page
Mobile Home Page
Mobile Who We Are Page
Mobile Donation Home Page
Mobile Donation Payment Page
Mobile Donation Confirmation Page
Mobile Hi-fi prototype
Usability Testing
Testing Plan:
Hypothesis: If we move the donate button to the middle of the home screen users will click on it more.
Reasons for choosing this variable:
Increasing donations for WriteGirl is one of the biggest goals to support program resources and longevity.
We want to make it easy for users to find the donate button so they don’t get frustrated or distracted and leave the site.
Having the donate button in multiple places will increase the chances that people will click to donate, and to be aware that the program is accepting donations.
Four user tests have been conducted.
Home Screen A- The donation button is in the middle of the home screen.
Home Screen B- The donation button is located on the bottom right, where the other home screen icons are.
Home Screen Version A
Test Results
Based on the A/B test results, our hypothesis was correct in that having the donation button located in the middle of the home page delivered faster awareness and action.
For version A, users noticed the donation button almost immediately and knew the program was accepting donations out the gate upon visiting the site.
For version B, users did not realize the site was accepting donations until provided the information or until they clicked on the bottom right button that lead to the donation landing page.
Overall, users were satisfied with the layout of both pages and though it was easy to understand.
Home Screen Version B