CASTAWAY - a one-stop-shop that educates you about refugees.
don’t worry anymore about going to a website that is overload with information. we make it easy for you.
Castaway is a free web-based, open-access information source that educates users on issues and policies concerning refugees while providing them with a holistic range of information. Aiming to offers to combat misinformation, Castaway enables people to identify the problem, gives them the tools to learn and encourages them to take action as advocates.
Role: UX DESIGNER/UX RESEARCHER (Jan 2020 - June 2020)
Responsible for end-to-end product life cycle including producing product & design spec, prototyping & wireframing, conducting user research studies and leading usability testing. Integrated research insights to UI Design and iterated themes and versions of user flows and prototype design toward product shipment.
BACKGROUND
Refugees seeking refuge within the United States are denied entry due to government policies. The common misconception is that refugees pose security risks and overuse government resources. This leads to prejudice and policies that continue to deny refugees. Currently there are 1.4 million refugees who need resettlement, 37,000 people are forced to leave their homes everyday and 70.8 million internally displaced people. The current atmosphere allows for misinformation about refugees to persist and denies refugees accurate representation and recognition.
As the UX Designer/UI Designer, I was responsible for not only conducting initial market research and user research, but also designing the product specifications and coming up with different variations/iterations of themes, allowing our team to select what best represented our principles. Due to time constraint, our final product captures the essential features but looks a little different from the intended design.
TARGETED AUDIENCE GROUPS
Initially we wanted to target our web platform for different users: general public and media. We aimed to combat misinformation and disinformation that could be possibly spread by other media. As a result, we started off by creating wireframes for different user groups.
UNDERSTANDING THE PROBLEM
Market/user research, literature reviews, and surveys were conducted and the following information was gathered to uncover the pain felt by individuals:
most users gained their knowledge or information about refugees through social media or news
most users don’t know the difference between refugees and immigrants
existing competitors lack the ability to integrate all features to one platform (have messy content hierarchy)
DESIGN PROCESS
We started the design with high-fidelity wireframes for different variations of themes for both groups and had teammates vote to decide on one during weekly stand-up meetings. After deciding on a style for our web platform, we then move on to brainstorming the features that we want to include for each user group and start creating wireframes for them.
For media center, we focused more on the efficiency, meaning that users would be able to reach to the needed information in least clicks and fastest way. As a result, the home page for media would display the latest news or policies regarding to the topic. General public, on the other hand, would have less intense content hierarchy compared to the prior group. We would be introducing the users about the difference between refugees and immigrants first following by difference pages that allow users to explore more upon.
NARROWING SCOPE
After the first round of exploration, research, and prototypes, we wanted to hone in on a direction to tackle first as out backend dev mentioned that it would be nearly impossible to ship a platform for two users within three months. Progress was complicated and we had so many features we wanted to implement. To help us decide, we listed out all the features that is a must to our product and decided that targeting general public would best align with our goal and principles.
FEATURES
USER RESEARCH
From surveys, user interviews, and remote usability testings, we discovered that most users are able to understand more about refugees through our prototypes; however, there are several problems with user flows where it is not intuitive enough for users to navigate through the website. Some surprising findings include:
users sometimes feels like features are disconnected from each other
users would like to add a general search function to the web platform
users think having a landing page that consists a summary of each features is helpful
After extracting insights from user research, we made some modifications to our product, ranging from adding a context landing page to creating an unified section header explaining about each feature on the page.
DESIGN SPECIFICATIONS/DOCUMENTS
RESULTS & TAKEAWAYS
Although we had to remove one of our main audience group, we were able to successfully implement 80% of the designs and shipped the product. There are some limitations to this project where we didn’t have enough time and resources to develop one platform for two audience groups and we were not able to perform a physical usability test after we developed the product due to COVID-19. However, we managed to pursue the UX research online using UserTesting.com. Although we had a rough time in the middle of this project (mainly because COVID-19 happened and everything was shifted to online) and there were some conflicts between each role because we have different work habits, we were able to set clear goals for every milestone and learn to set priorities if goals can’t be met.
I learned a lot from CASTAWAY not only because I participated in a full project cycle but also because I had to take the leadership for any UX or design related work. I also started to develop the habit of creating a design library for devs from this project in order to best maximize the efficiency as a team. Lastly, I saw the power of diversity when designing for CASTAWAY. In the beginning of design phase, I asked the team to share fitting design inspirations to our product theme. Overall, most design ideas implemented in the current design were a combination of or extended from everyone’s idea.