School Site Redesign
Type
UX
UI
Education
Web Design
Responsibilities
User research
Competitive audit
Paper and digital wireframing
Low and high-fidelity designs
Conducting usability studies
Interating on designs
Date
October 2023
Current Website Design
Problem
Current website is clearly outdated, lacking modern and engaging design elements. Additionally, the site map appears overly extensive, potentially overwhelming visitors and hindering easy navigation. The calls-to-action (CTAs) are notably unclear and lack intuitive visual aids like icons, leading to user confusion regarding desired actions. Furthermore, a considerable number
of pages redirect users to PDF files, disrupting the browsing experience by requiring constant file downloads rather than providing seamless on-site access to information.
of pages redirect users to PDF files, disrupting the browsing experience by requiring constant file downloads rather than providing seamless on-site access to information.
Goal
To revamp the outdated design by introducing modern aesthetics and incorporating colours associated with school, creating a visually engaging and cohesive identity. Optimizing site navigation by restructuring and simplifying the site map, ensuring intuitive usability without overwhelming visitors with excessive choices. Refine calls-to-action (CTAs) across the website, making them clearer and more actionable. This involves incorporating intuitive visual cues, such as icons, to guide users effectively. In addition design should ensure seamless on-site access to resources, reducing the need for frequent redirections to downloadable files.
Understanding User
Research Study
I conducted a research study involving school students in collaboration with my former teacher, Mr. Tur. I created 100 surveys and entrusted them to the teacher for distribution among the students during their classes. While the results were largely as expected, the study provided deeper insights into the primary needs and challenges faced by our target user group.
Moderated Usability Study
A usability study was conducted using my parents as participants, both of whom possess limited familiarity with technology. They effectively represented parents who might encounter difficulties navigating a school website. Each of them was assigned identical tasks to assess usability.
Insights
some users find it hard to find CTA buttons
redirecting users to external pdf files is frustrating
website is badly organised and often confuses users
Persona
Wireframes & Low-Fidelity Design
Takeaways
During this design stage, digital wireframes were developed to delineate the visual structure and layout of the website. These wireframes serve as a blueprint guiding the design and functionality of the site. Utilizing a Low-Fidelity design approach aided in establishing the overall ambiance of the website and contributed to the selection of
a primary color, which was derived from a School Symbol
a primary color, which was derived from a School Symbol
Visual Structure determinated
Hierarchy established
Leading color selected
Placement of essential elements outlined
Wireframes
Low-Fidelity Design
New Simplified Sitemap
Hi-Fi Design
Takeaways
Impact
Having worked solely on this project, I've crafted a new website that boasts a modern design and prioritizes user-friendly navigation. All Call-to-Action (CTA) buttons have been revamped to enhance their intuitiveness. Moreover, by eliminating the need for users to download PDF files and integrating all information directly onto the website, I've successfully enhanced its credibility and ensured a smooth and trustworthy browsing experience.
What I learned
Creating this redesign has been very learning experience that has deepen my knowledge in brand identity. user research and simplicity of the design. Understanding the core users of the product and their problems is always a great starting point to elevate future designs.
Thank You!
Thank you for your time reviewing my work on the School Website Redesign If you'd like to see more or get in touch, my contact information is provided below.