Sojourner’s Spring is a personal project that came from my interest in providing to support to refugees who are looking to start a new life in a place that is unfamiliar to them. My role as the UX Researcher and Designer would be to design a site that provides users with methods to support refugees by understanding what helps them accomplish their goals in a satisfying and efficient manner and be visually appealing.
The first question that needed to be answered was what the goals of the users would be, and how I could bring the best experience for them to accomplish those goals. An online survey was conducted presenting a pool of 20 – 30 potential users with a set of questions designed to gauge the demographics of the audience as well as what their interest level was in supporting refugees. Using the results from the survey, a smaller group (10) of the surveyed would be interviewed to better understand their experiences working with existing refugee support sites.
Results of the survey: Survey Documentation
From the information gathered, I was able to come up with 3 potential profiles of the users. The profiles would be crafted into persona cards and empathy maps, displaying the user’s biography and goals, that I would regularly use to remind me of the people I would be creating the site for.
I spent some time thinking and listing out all of the possible activities that the users would be likely attempting to accomplish on the site. These tasks would be written on an individual index card and shuffled all together. I would use these cards to conduct a card sort with 3 volunteers who would act as potential users. Their input would help shape the language and the order of information for the whole site.
In general, the participants sorted and grouped the tasks in a similar manner such as placing a donation and volunteer tasks in one group labeled, “Ways to Help” and leader and administrative information in a different grouping under “About” or “Organization”.
Results of Card Sort: Card Sort Documentation
To visualize the layout of the content and functions, wireframes were quickly sketched out for both the desktop and mobile version of the site. Based on user input, I wanted to be sure that the design was clean with visual separation between blocks of content as well as to put refugee imagery at the top of the layout. Users also requested that donation and volunteer forms be as simple as possible requesting only necessary personal information and keeping pagination down to no more than three pages (form, confirmation and thank you).
In order to see how on track the project was, I conducted usability testing early on using wireframe prototypes. A small group of participants was gathered to test some of the major functionalities such as the donation and volunteer form. Some of the insights from the testing included:
The organization was without name or identity. A number of different ideas floated around in my head that needed to be listed in front of me. Using a technique called mind mapping, I started to list aspects of the organization and what I wanted it to mean. From the words listed, I was able to come up with the name Sojourner’s Spring.
Similar to the mind mapping exercise, I drew a variety of designs that were in my mind on paper and played around with each. I eventually landed on a design that played with the idea of a person’s joy and a spring of water.
Honesty and trust were important to surveyed participants. While there would be efforts made to assure users of the fidelity of the service in the content, such as accountability reports on donations made to refugees, plans to use visuals to help users feel comfortable with the site were also made.
With these thoughts in mind, I created a style guide that focused on being relatable to users and provides a sense of trustworthiness. I decided to use brighter earth tones to help invite the users into the site and bring a sense of comfort. While the primary and secondary colors were cooler colors to help users be more at ease, I also included a tone of Mimosa to convey a sense of warmth and welcoming.
Fonts needed to be easy to read as the users would be spending a good amount of their time reading about refugees and the organization. Semplicita Pro is a clean and clear san-serif font that can easily be read by most users with a good number of variants (normal, bold and italic). Good Life is a handwritten or decorative font I wanted to use to humanize the site along with the painterly visuals making it accessible to people.
In order to maintain the cohesive identity of the organization, standards needed to be set so that the logo would be used properly. I set variations on the logo based on the standardized color list. It is always to be used on solid colored backgrounds and never to be seen on image backgrounds that would make it difficult to be seen properly.
With the initial usability testing of the prototype completed and enough user feedback gathered, I was able to begin work on the high-fidelity concepts for the site. Some of the higher priorities for the design would be to maintain a clear separation of blocks of content with a sense of trustworthiness.
While a corporate look would certainly be a clean layout that could easily be navigated around, I wanted the site to have a human component. To this end, I created clear visual separations between blocks of content through both white space and the elements like large “paint” splashes of different colors.
Large photographs were also used so that the word, refugee, be not just an identifier, but it would have a face that people could relate to.
While this project was merely an exercise in the user experience process, there were some interesting takeaways that came from the work:
Testing showed even small but necessary details that I had missed early on. It is important to have a good number of eyes on what you’re working on. My users are the ones using my product and thus I build for them.
When it comes to functions such as forms, users are looking to get through the process as quickly as possible with minimal effort (i.e. requesting only basic and required information only along with minimal steps to submit the form).
