Role
UX/UI Design
Skills
Research | Secondary research, user interview, competitive analysis
Ideate | Sketches, wireframes
Design | Mid & High fidelity prototypes
Test | Usability testing
Timeline
Sep - Oct 2023
(8 weeks)
Tools
Figma, Squarespace
I conducted a competitive analysis of three similar non-profits to gain insights into their website features. This allowed me to identify essential content elements and evaluate each site's strengths and weaknesses. From these observations, I pinpointed effective strategies and areas for improvement to inform the website redesign.
I conducted one-on-one interviews with both stakeholders and users to uncover their goals and frustrations. This process was essential in validating my initial assumption that the site lacked clear information on admissions and program structure. Users expressed frustration at not being able to find key details, contributing to a high bounce rate.
Drawing from user interviews and project goals, I developed two personas — a student and a potential donor. These personas provided valuable insights into each group's needs and perspectives, guiding me to enhance their website experience and support the project’s objectives.
After gathering requirements, I reorganized the website content and incorporated new information. After multiple discussions with stakeholders, we collaboratively developed a revised structure, which was tested with users to ensure its effectiveness.
To rapidly generate potential screen solutions, I engaged in ideation sessions and created sketches to visualize the layout of the screens before moving on to the prototyping phase.
To help stakeholders and users visualize the website layout more effectively, I created mid-fidelity screens. This also aimed to determine whether the information presented would facilitate users in making decisions, such as donating, volunteering, or signing up for admissions.
I utilized the branding guidelines provided for color and typography, selecting lighter variations to evoke trust and using bright orange as an accent for buttons to convey youthfulness and optimism.
This project was a challenge as it was my first attempt at redesigning a website on an existing Squarespace platform. To ensure my design was viable, I researched Squarespace 2.0 features and learned custom coding to enhance my skills.
Challenges faced
Ensuring design viability
The design was centered around the features offered by Squarespace 2.0 and the available custom coding options.
Identifying Missing Information
Initial research, including user interviews and competitive analysis, was essential in determining the information users needed to make informed decisions.
My learnings
I analyzed website analytics to identify underperforming pages, recognizing that high bounce rates may not indicate poor design. This analysis, combined with user insights, helped validate my assumptions about the sufficiency of existing content.
I structured the website according to users' mental models for non-profits to minimize confusion in navigation.
Close collaboration with stakeholders was essential for gathering the necessary information, ensuring it accurately reflected the final product on the Squarespace site.
There were instances when the layout didn't translate well to mobile due to the limited flexibility of the website platform. As a result, I had to modify some designs, which deviated from my original vision. If I could redo the project, I would prioritize incorporating responsive mobile designs from the outset to ensure a seamless user experience across both mobile and desktop platforms
