Out of The Closet
MY ROLE: UX-UI DESIGNER
DURATION: 3 WEEKS
OVERVIEW: Out of the Closet is a non-profit chain of thrift stores whose revenue provides medical care for patients with HIV/ AIDS. My team consisted of myself and two of my classmates. This project was made to be an introduction to website design and development. We chose to pursue this organization due to the relevance of the cause that OTC supports in the city of Atlanta, Georgia. HIV/AIDS affects people of all different backgrounds and the OTC brand is helping to remove the stigmas to help people live healthier lives.
The Problem: While the Out of the Closet Organization has been making an impact on its community for more than two decades, OTC’s current web design most likely doesn’t maximize its foot traffic and donations. The website’s interface was not user-friendly and most importantly responsive, which is relevant in a world where our mobile phones are used to explore the worldwide web.
The Solution: We thought we might solve this problem by proposing a website redesign that would fulfill all modern and standard design practices. The website redesign could possibly open up new possibilities and an audience for the Out of the Closet brand, therefore creating an opportunity for an even bigger impact within the community.
Research
Since the Out of the Closet brand was already established, a lot of our research included prior knowledge and actual facts from the resources already provided by the organization. It was also important to research a few facts in regard to HIV/AIDS since it was the focus of OTC to educate its consumers and beneficiaries on the subject matter. We began by looking up national statistics about HIV/AIDS through the Center for Disease Control (CDC), a federal agency under the United States Department of Health and Human Services that serves as the center of Public Health in the USA. According to the CDC, since 2016 over 1.1 million people are living in the United States with HIV.
We decided to also do a few interviews, including one where we actually spoke with the store manager of the Atlanta area location of Out of the Closet to receive some relevant user insight from a first-person perspective. He is quoted below:
“Out of the Closet was created for people to get tested during everyday life… People are not wanting to get tested or get the medications when it can all be taken care of here, for free… if more people knew more people would come.”
– Stedman, Manager ATL location
We did a few 1-on-1 interviews to get more qualitative information in order to empathize with our users. Once again, I decided to incorporate the use of social media surveying, in which I conducted quantitative research on the topic of non-profit organizations with the help of the Instagram story feature, shown with a gif animation of the survey below.
The social media survey was effective in widening our reach due to the time constraints we had for this project.
After conducting user interviews, it was important to know who Out of the Closet’s direct and indirect competitors were. It was a bit difficult to find competitors at first because OTC is such a niche organization.
A few of the direct competitors we found were Lost-N- Found Thrift Store, Goodwill, and Aid Atlanta. On the other hand, Rag-O-Rama seemed like the only indirect competitor for OTC, sharing the thrift store aspect in common. We wanted to see how the other brands’ websites reflected what they had to offer to their intended demographic.
Definition
Moving forward we used the data collected from the interviews conducted to start focusing on who the user is. Although this project was a re-design, we still wanted to follow as many steps within the design thinking process as if the website was a fresh new idea. We decided to use an affinity diagram to sort the user insight and find the key features that the potential visitors of the site would want.
It was important to organize the information collected, we wanted to focus on what people thought of non-profits and their motivations to participate in the initiatives.
Moving forward, we needed to define our users. We created two personas, one being representative of the consumer and the other being a donor of the OTC organization. See the user personas below:
Ideation
Ideation can usually begin when we know who the project is being made for. Now that our user had been defined, we needed to start focusing on the actual user experience and interface of the new website. We used a few tools to help us identify the look and feel of the site, including the actual features we would include based on importance to the user experience.
We wanted to visualize what that user experience would look like based on the wants, needs, and goals of a site user. We chose David, a full-time college student who finds out about Out of the Closet’s Thrift Store through a friend. David’s story is illustrated in the user journey map to show the stages of the possible user experience below.
Using our user journey map, my teammates and I decided that we should focus on designing an interface that would show off the vintage/eclectic style of the OTC brand. We also wanted to make the HIV/AIDS testing aspect more inviting and easy to find for the website users. Lastly, although not included in David’s story, per the user journey map, we also decided that the “DONATE” option should also be a stand-out item because of how important it is for people to keep OTC going by donating their used items.
“Ideation is one of my favorite parts of the design process because you get to focus on the look and feel of whatever project you’re working on and the Out of the Closet brand provided a space where the possibilities aren’t limited because it is so much about bright, fun colors.”
We decided to go with a flashy but vintage (ode to the “thrift” store) look because it keeps the design true to the already established brand of OTC. We incorporated a few design thinking tools such as a style tile, a mood board using the inVision website, and a heuristic evaluation of the current OTC website to get a better understanding of what the site should look like.
Information Architecture
We began to break own OTC’s website by doing a heuristic evaluation of the current site, bringing attention to the areas of the website not in alignment with good design practices.
Original OTC homepage (via. Aug. 2019) – The website did not have a consistent look or font among the items on its homepage.
Original OTC homepage (via. Aug. 2019) – As you can see the white space has not been used effectively and the colors can make the readability hard for the user.
Since Out of the Closet is an already established brand, it was important to not make any changes to the navigation of the site and page choices already provided on the website. We decided to focus on the structure of the website through card sorting and site mapping. The card sorting helped us to finalize a site map that appropriately provided the same choices as the current website, but with more attention to the user experience being as seamless as possible.
The final sitemap, helped us to figure out the placement of the navigation.
Design Inspiration
We decided to create a mood board as a reflection of the OTC brand and also as an inspiration for the new website. The style tile was also a guide for the color scheme of the site and the type of fonts we would be using to provide the copy and content on the site.
The OTC Brand is very vintage because of the thrift store aspect so display fonts were something we definitely wanted to use.
UI Style Tile
Prototype
Wireframing
We created a few different prototypes over the course of a week. We began with a couple of different prototype wireframes. The first wireframe (Prototype A) was a one-page website format that could have potentially worked. It was a one-page site that touched all the sections needed for the best user experience.
Prototype A
We also created another wireframe (Prototype B) in which I personally suggested that we try to use non-traditional navigation that would sit to the left of the web page, rather than the top since the established OTC brand seemed open to creative and colorful ideas. We wanted to ensure that we explored all design possibilities.Prototype B
We needed to decide between prototypes A and B, so we decided to do some tests on the low-fidelity wireframes to see how users would respond to the interface before we moved on to the high-fidelity design on this website.
We had users do a walk-through of both prototypes to see which one they preferred and most of the testers preferred Prototype B, which made it the winner in our book, allowing us to move forward!
Final Outcomes
Final Prototype
With the choice of design being finalized for us we were able to move forward with our final website design. We also designed a responsive version of the site aka a mobile site, since users are more likely to use their phones when they discover OTC.
You can view the final prototypes at the following links: OTC Website & Responsive Mobile.
You can also view a preview of the website in the following gifs.
Social Media Branding
We were given the opportunity to create a social media guide to ensure that if this design was ever implemented in the future of Out of the Closet’s organization the curator would have some kind of guide to ensure content that reflected the OTC brand. I enjoyed creating this, as my previous experience before UX/UI included creating my own social media brand and hashtag.
In Conclusion
This project was a fun and challenging one. My teammates and I were going through a few personal obstacles but we were able to pull together to result in a lucrative project.
This project was a preview of what website development looked like. I had not yet honed my front-end development skills but it’s possible that I could develop this website in the near future.
This project was put on a tight deadline, but my teammates and I managed to rise to the challenge