ODIS Redesign
Opening Doors International Services is a US Department of Justice recognized agency that has been providing immigration assistance and humanitarian services for families and individuals in North Texas since 2003.
In the past six months, we developed a redesign of this local non-profit organization’s website. Our team conducted in-field interviews and gained an expert understanding of the company's needs and services. We then created an enhanced, immersive experience for clients obtaining naturalization and other immigration services.
Context
Team
Roles
Website
Opening Doors
International Services
Thea Marie
Nicholas Valdez
UX Design
UX Research
Visual Design
01. Understanding the Audience
Problem Statement
Upon opening the site, there is an outdated aesthetic that leads to confusion and disorientation. This feeling is compounded by featured dead links, excessive use of jargon, and complex information hierarchies. These lead to the user feeling a lack of trust in the site as a whole.
Hypothesis
We believe that humanizing this experience and addressing the hierarchy will help reduce the anxiety the user experiences. Simultaneously we want to rebuild trust by using simple terminology and minimizing the number of steps to complete a task. Through our [solution].
Personas
Painpoints
We prioritized our user’s main pain points based on our in-field interviews and feedback from our peers. We selected the top two most pressing concerns and assigned them to each persona that fit the narrative.
-
Struggles to understand what all the immigration terms mean
-
Wants to volunteer and be an advocate for ODIS due to their affordability
-
Needs advice on the type of jobs he is allowed to do as an F1 Student
-
Not sure what the requirements are to stay “in status”
-
The previous company violated his trust due to an insecure process of collecting documentation
-
Afraid to lose his personal documents or have them forged
Journey Map
Information Architecture
We took a closer look at the original information architecture displayed on the ODIS website. When we looked at the hierarchy we noticed several areas of error that may have led to the user’s pain points while going through their user flow.
Findings: There was a repetition of the same tabs listed in various categories. An example of this is the “DACA resources page” which is listed under the categories: forms, services, and resources.
We also found that there were too many pages for the information presented. Most of the information on these pages could be condensed into one. Additionally, after we did our closed card sort testing, we found that there were more effective ways to simplify the steps a user has to take to achieve their task.
02. Outlining the Experience
We did a couple of open card sorts to streamline our process. Below, is our updated proposed Infomation Architecture based on our user flows.
Closed Card Sort
In our first card sort, the results were randomized and scattered due to the lack of information and instructions about the test. Based on our post-questionnaire we learned that many of our participants didn’t know much about immigration services. After gaining this information, we developed a pre-screening to consolidate our targeted audience and established background context about ODIS.
We then created a second card sort where we were able to synthesize our cards into five categories. The information below displays the similarities of each card. The darker sections include the percentages of the participant groupings and show positive trends that helped us conclude our proposed information architecture.
Comparative Analysis
We wanted to take a step back from our process and look to see what other companies were doing. We then went ahead and made a table listing out the categories on the lop left that we felt would be necessary for our redesign. We compared ODIS’s original site to the other companies using this as a framework. This is so we had a clear idea of how to move forward with our redesign in terms of function.
Comparative Exploration
Inspiration
After looking at websites that are similar to ODIS, we wanted to go further and get inspired by websites that had a clear and well-defined design system. We looked specifically for good layering techniques, vibrant illustrations, their understanding of color theory, and how these websites incorporated them. We did this to ensure our website is unique and stands apart from our competing non-profit organizations.
Style Guide
We developed our design system based on our inspiration and competitor analysis.
We went with our specific color palette because it is versatile and each color combination works well together. We tried a couple of options for our typography such as Poppins and Open Sans but ended up going with Rubik because of its simplicity and rounded edges. We found that using this typeface gave us a warmer, more friendly tone based on the research and testing we conducted. For our illustrations, we wanted to go with something that didn’t have a very defined outline. We chose illustrations that could be dynamic without the use of line work but instead featured our selected color palette.
Logo Redesign
The current combination mark that is present on ODIS did not match our design system and brand focus. We sketched some ideas for a new logo direction. From these, we narrowed our idea to one similar to the final logo below. Once we had a direction, we implemented our color scheme and shading techniques to form our final design. We found this best fit for our proposed system. With this logo, we wanted to capture the essence of unionized, joyful, and diverse people. The negative space in the center is a metaphor for the doors that will be opened obtaining immigration services with ODIS.
03. Creating the System
Sketching
Below you can view some of our initial ideas and brainstorm of what we wanted our redesign of the ODIS website to look like.
Testing
For our testing, we created a script that asked our users to perform 10 tasks. These tasks essentially were a compilation of our user flows based on our original persona. We then asked our testers to perform the 10 tasks from our script and we rated them as “successful” or explain why they could not complete the task. For this round of testing, we tested four users, Matt 18, Josh 25, Alyssa 21, and Lauren 38. The following were their results for the 10 tasks.
Rethinking Our Design
At this stage of the project, we tested our digital lo-fidelity prototypes. We ran into a lot of inconsistencies in our hierarchy of information. We noticed that our users were struggling to get to certain pages because of the options in the drop-down menus. Some of them were looking for hamburger menus or search features in order to complete their task instead of going the intended route. This was productive because we were coming to a dead-end in terms of user ability and design choices for certain parts of this website. After testing we went back to the design board and rethought our process, adjusted our user flows, and essentially created a new system.
Mid Fidelity Wireframes
Below you can view our mid fidelity wireframes in grey and white composed of our final information architecture, layout, and placement of components within our system.
Components
While designing our Hi-fidelity wireframes we focused on designing components for the header and footer of our redesign. This helped the prototyping and design system stay consistent. We found that when designing components it decreased the time it took to finalize our hi-fidelity prototype.
In the component section, we used four different states: default, hover, mouse enter, and pressed. Each state was prototyped in the component to work coherently with each other for a smooth interactive experience. The unique state that was added was mouse enter, this was used because three pages had drop-down menus. We found that when the state was set to hover, the drop-down would close when moving the mouse off of the menu button. To fix that, we extended the boundaries of the button to cover the entire drop-down menu and changed the state to mouse enter, so that when the drop-down menu is exposed it will stay open until you hover off of the selected area.
Final Wireframes
04. The Future of ODIS
Below you can view the completed design wireframes. This includes our updated style guide, final illustrations, and screens designed based on our persona’s SOUs.
Edits for the Future
Thinking forward, we would like to show more diversity in our illustrations so that all people that come to the site feel that this service is for them. On this note, we also would like to make our site more inclusive in terms of languages offered and expand the usability for people with disabilities. In terms of practicals, we would like to add a back button to the survey pages in case the user would like to alter their response, add in a glossary to explain some of the unavoidable
