Nova Spero
Overview
Nova Spero, is a student-run non-profit organization that strives to empower students from underprivileged refugee communities through education and one-on-one mentorship. In an effort to help refugees that come to America without adequate resources, opportunities, and contact with society, Nova Spero partners with other San Diego organizations to provide resources to these underrepresented communities.
Our objective was to have a functional website in many different languages by the end of the seven week turnaround so that the website can be used as a tool by Nova Spero and the other San Diego organizations.
Context
Over the course of seven weeks, we conducted interviews with users to create multiple iterations. We received feedback from Nova Spero president, Simmi John, to lead the team in a sustainable business direction. The design itself and translating the designs to Squarespace took two weeks.
Background
What is the importance of accessible resources?
The problem is the lack of a centralized resource site for refugees to access housing, education, and food resources. Refugees arriving in the US often lack familiarity with American society and struggle to access essential resources, hindering their ability to find employment and support their families.
According to data from the San Diego County Health and Human Services Agency, approximately 21.5% of the county's population consists of immigrants, including refugees. These individuals face challenges in adjusting to a new environment, particularly children who have experienced trauma and struggle academically, emotionally, and socially.
My Approach
Before diving into ideation, we created a gameplan.
Using prior research and notes from Simmi John, we set three design goals. These elements would provide the best results for the users and the organization's maintenance team to keep the website running.
Include language translation of the website in top languages spoken by the users of Nova Spero.
The website has several design flaws or areas that could use improvement for user clarity and ease of use.
Gather resources from different websites and integrate the database within the same domain
Ideation
We wanted a new perspective on a classic website layout.
An important aspect of this design is to understand what works best for the current and potential users of Nova Spero. Pre-existing websites and other resource databases were utilized to identify possible solutions that we could implement into the redesigned Nova Spero site.
We analyzed pain points in the previous database website that could seek improvement.
○ No options to translate to languages other than English.
○ About Us button is not functional and does not link to the main home page
○ Profuse amount of information
○ Section titles not easily differentiable from subsections
○ Information cards are extremely large and require scrolling to view each section
○ Copy remains as default text○
○ Could use either more symbols or imagery to make navigation more streamlined
○ Contact Us button is not functional
Gaps could be resolved through data integration and improving user flows.
With the resource database, we would like to integrate the database links and structures into the main website. Our resource databases have somewhat confusing layouts and might be hard for users to navigate.
Furthermore, even though San Diego has a very diverse community, many websites do not have or have limited multilingual support. Google Translate can be very helpful, but requires some familiarization with the computer and the translation result is not guaranteed to be accurate. Even though we will be using Google Translate, we aim to let native speakers of these languages correct the potential mistakes before implementing them into the website.
Although the design process is done through Figma, a no-code platform would be best for the Nova Spero team to constantly update the website, with little need for coding experience.
Design
We outlined user flows for two possible personas: a student and a potential volunteer.
User Flows
.png)
The first round of prototyping in the ideation phase began soon after.
Lo-Fidelity Wireframes
I collaborated with the design team to create simple layouts based on the user flows we created in the beginning of our ideation. These low fidelity wireframes detail several functions such as a dropdown menu, pop-up notifications, and expanding panels.
Mid-Fidelity Wireframes
The next steps following lo-fi wireframes were to focus purely on the user experience at large. We implemented the copy from the previous website. The minimal visual aspects were utilized to place emphasis on clarity and navigability.
.png)
.png)
.png)
.png)
.png)
