As a non-profit educational organization, SquareOne's website serves as a platform to provide services and resources for students and job seekers. However, the existing website is only a temporary version with very limited functionality. As a result, understanding the needs of stakeholders and ensuring that users can quickly learn about our services and access the resources they need has become a top priority for our web design project.
The website serves international students at various stages as well as internal administrators. It aims to provide students with free resources, hands-on guidance, and reliable support while allowing administrators to easily edit and update content. The primary goal is to increase enrollment and drive membership sales.
To design a website that aligns with this image, we drew inspiration and references from other non-profit and educational websites.
We analyzed their design language and common visual elements, distilling key concepts from them.
The previous web page provided basic information and services for SquareOne. We now need to create an updated version that reflects SquareOne's new services and improved information design. SquareOne's brand marketing personality is defined by the keywords: Proficient, Empowering, and Mature, along with behaviors that are Versatile, Educational, and Solution-oriented.
According to the user profiles we prioritized, we conducted a survey of potential users, collecting the demographics of our target groups and their potential needs.
The main user groups for the web design project are international students at various stages and internal administrators.
However, the primary goal of this redesign is to market services to international students. After the discussion with the stakeholder, we decided to prioritize the part of the web page that was shown to international students instead of the part that was used by administrators.
Based on user research and discussions with the Marketing team, we designed a new IA, reorganizing and adding features to our website. At the same time, we prioritized the homepage sections for information display.
For the version we already had, we planned and conducted a usability test designed to test the overall structure, task completion rates, and reviews of visual elements.
By dividing the "What We Offer" section into two clear categories—"Free Resources" and "Services"—we clarified the distinction between free articles and premium paid services. This structure enables users with varying needs, including those searching specifically for OPT information, to locate relevant content more efficiently. With this organized approach, users can easily find the resources they seek or explore additional service offerings, enhancing both accessibility and user satisfaction across the site.
By removing redundant content in the navigation bar and shortening category labels, we reduced the overall horizontal length, which lightened the visual load and made navigation clearer. Additionally, we emphasized high-frequency actions such as 'Donate' and 'Login,' making them more visible and accessible to users, ultimately enhancing ease of use for essential functions.
We extracted key terms from lengthy service descriptions and paired them with illustrative visuals to enhance focus on the core service offerings. By highlighting these essential points visually, users can quickly understand and retain the main ideas without needing to read through dense text. This approach not only streamlines information but also creates memorable touchpoints, making it easier for users to recall important details about each service.
To ensure users can quickly access the free resources they need with minimal clicks, we incorporated a direct display of free articles—the primary content of our free resources—on the resources page. This layout allows users to immediately view and select articles that match their interests, without additional navigation. By making relevant topics readily accessible, users can easily find content that engages them or be inspired to explore other areas, improving both discoverability and overall user experience.
To enhance browsing efficiency and make better use of screen space on desktop displays, we restructured the information layout from a single column to a two-column format. This allows users to view more content at a glance, reducing scrolling and making navigation faster. Additionally, we introduced colored labels to emphasize key characteristics of each item, making it easier for users to identify and differentiate content based on its specific attributes.
Following the redesign, we conducted a new round of usability testing to validate our modifications. This not only confirmed that the changes met our objectives but also provided an increased volume of data to inform future design iterations.
Through efficient and purposeful collaboration with XFN, we conducted numerous surveys, interviews, and tests, gathering valuable first-hand user insights. This enabled us to create value from both a commercial and user-centric perspective.
This project has given us the opportunity to think from both a business and a user perspective. Balancing these two viewpoints and finding the optimal solution has been challenging but also incredibly inspiring.
The next step is to design the administrator section of SquareOne's website, which includes brainstorming and designing from the perspective of internal administrators. At the same time, we will continue to engage in conversations with users, gather their feedback, and iterate on the design continuously.