Brief
A website redesign for the Atlanta chapter of Kollaboration, a non-profit organization that empowers the creative Asian American community through performances and conferences. They host a lot of events, but their unclear mission and vision left many confused about what they actually stood for. Kollaboration Atlanta asked us to redesign their website in a way that would ultimately improve engagement. Engagement will be measured by increase of time spent on website, increase in donations and sponsorships, increase in participation of events, and an increase of followers on their social media platforms.
Solution - In a 3-week design sprint, we collected user and market research to understand the organization’s core needs and users and used our findings to further drive our design process and improve engagement. We delivered a new branding and social media strategy and a new website design with a revamped information architecture that highlights the mission and the ways people can get involved with events, sponsorships, and donations.
My Roles + Responsibilities
Create and sent out User Survey
Conduct User Interviews
Research synthesis
Create INITIAL SKETCHES
Conduct Usability Testing
Create Social Media Strategy
Process
Scope + Investigate - Understand stakeholder goals, understand user needs, conduct field research and in-person interviews, synthesize with affinity mapping, conduct a competitive analysis, heuristics analysis, develop personas and a user journey.
Ideation - Feature prioritization, card sorting, restructure information architecture, develop user flows, sketch, paper prototype, create low-fidelity wireframes.
Design + Refine - Wireframe iterations, create a high-fidelity mockup, finalize clickable prototype.
Understanding the Scope of the Project
Business Goals - Stakeholders wanted a restructure of the information architecture for their global navigation page and a website redesign for their local navigation page. Also, they wanted an increase with their engagement, sponsorship, and donations.
Constraints - We were given a three-week timeline we had to restructure Kollaboration’s Information Architecture for their Global website and create a website redesign for their local website. We also had to design with Squarespace template formats because the client already purchased a subscription with them.
Defining Research Goals
We first started our contextual inquiries with our initial client meeting because it was the first time most of my team heard about Kollaboration, we had different ideas of the core problem and target audience. For example, some team members thought we should focus mostly on increasing donations since we discovered they were experiencing financial struggles. Others felt we should staying true to their original target audience of Asian-Americans instead of expanding to all creatives of color, and some felt we should focus more so on their branding and marketing strategy to make the brand more cohesive since there was a lot of confusion found from our user interviews. We started by pinning down some relevant research goals to evaluate all of our initial assumptions.
Market Research
To better understand Kollaboration’s major competition and to get an idea of what it takes for them to gain a competitive edge, we performed a comparative and competitive analysis on similar organizations and a heuristic evaluation on their current website.
Comparative and Competitive Analysis
We compared Kollaboration Atlanta with 4 other organizations that engage similar audiences (Asian Americans or creatives). The three main areas of opportunities we discovered were very beneficial since we knew they could help improve engagement and add value to our potential users.
We found three major areas of opportunity that the new website redesign would benefit from having:
Donations page
Sponsors listed on the website
Mentorship program
Heuristic Evaluation
We wanted a better understanding on why users weren’t engaging with Kollaboration’s original website, so we performed a heuristic evaluation to inspect usability and user interface problems. We knew if we fixed the key insights we discovered it would improve their engagement.
Key insights:
Need for better navigation - the majority of links are in the footer, not the header
Inconsistency of style and colors
Lack of hierarchy
Dark Imagery and text
User Research
Our team conducted two separate surveys and user interviews with Asian Americans, creatives in Atlanta, and people involved with Kollaboration as staff, performers or event attendees. We created our surveys with google docs and sent them to various Facebook groups, Meetup groups, people in our personal network, and our client’s staff. The entire team wanted to further develop their skills with user interviews, so we divided up the number of participants amongst each other; we conducted our interviews in person and via phone. Since our team had many different assumptions, we wanted to better understand who Kollaboration’s users were and what they were looking for, their donation habits, and to see if they had any previous awareness and involvement with Kollaboration. We also wanted to see how the users were engaging with Kollaboration’s existing website.
During the scope and investigation phase, our team ran into some problems with recruiting. Our client did not want to disclose their sponsors lists because they wanted to protect their privacy and did not want them to feel uncomfortable or suspicious. Many of Kollaboration’s staff members did not want to interview with us because they were concerned with their anonymity, so we could not record their interviews and had to take hand written notes. We received a large number of female respondents in our survey, so we researched similar organizations on Facebook and Meetup. Also, we scouted recruits at Honey Bubble and Sweet Hut to gain a more diverse data set.
Surveys + Interviews
40 Survey Responses:
90% discover Kollaboration events through word of mouth and social media
64% are aware of Kollaboration but only 35% are involved
81.8% said they donate to places from word of mouth recommendations
14 Interviews:
A common theme of lack of clear understanding of what Kollaboration does
Not many knew about the existence of a website
Empowered by the idea of building up Asian American creatives
Affinity Mapping Our Insights
Moving forward in our second phase, ideation, we took all of our insights from surveys and interviews, and we created an affinity map to discovered trends, common goals, and pain points among the users. We recorded quotes, behaviors, and insights on different colored post-its for every person we interviewed because we believed this would be the most effective and collaborative method, so we could easily visualize our data and dig deeper into our findings.
Once we narrowed down common pain points and opportunities we were able to get a clearer idea of what our personas should be, confirmation of producing a social media strategy since 90% of discovery was through word of mouth and social media, and expanding demographic to all creative minorities. These discoveries would help us with the website redesign and improving engagement.
Pain Points
People don’t have a clear or accurate understanding of what Kollaboration is
Reluctant to join something seen as exclusively Asian American
Opportunities
Discovery: Word of Mouth + Social Media (90%)
Use clear messaging and imagery to represent Kollab and its goals
Continue the goal of building up Asian American creatives while focusing on attracting those outside the demographic
User Personas
The user personas that emerged related with the user groups we found most common in our research, the Performer, the Creative Professional, and the Sponsor. For example, our primary persona, Emily Kim the Performer, represents Kollaboration's artists who want to promote their work, and The Creative Professional, Jonathan, is motivated by his professional career and seeks events that help him learn and network. Our third persona, Michelle Soto the sponsor, represents Kollaboration’s sponsors who feel connected to their mission and want to use their network and resources to host events to try to bring awareness to the organization.
Our team initially assumed at least one of the personas would be a minority outside the Asian American race since we received so many comments, from users, saying they did not want to be apart of something marketed as exclusively Asian American. It was important to our client that we stayed true to their original mission which is promoting Asian Americans in the creative industry even though they are open to expanding their demographic in the future. We were surprised by the Creative Professional persona because we initially considered users who were mainly interested in art, music, or acting, and did not even factor in other creatives in backgrounds such as tech, graphic design, fashion, etc.
Acknowledging and using these personas, to drive our design process, allows our team to narrow down feature prioritization and create new elements that will add value to Kollaboration’s users and ultimately increase their engagement.
Check out our primary persona, Emily Kim the performer!
Redesigned Navigation
Through feature prioritization and card sorting, my team revised Kollaboration's sitemap to include intuitive ways for members and newcomers to sign up for events and get involved. Increasing engagement was ultimately our main goal, and making specific features predominant, on the site, was important in order for Kollaboration to be able to continue helping others. Previously, most navigation was only available through the footer of the website, so having a clearer hierarchy gives users direction and an overview of what Kollaboration does.
Initial Sketches
As a group, we collectively sketched our ideas based off the sitemap we created and reviewed each page to determine which assets to use. This was the most time extensive process because all had many different ideas and we all explained our reasoning behind each screen we sketched. The main differences we had with the home screen was with the layout. Some felt we should take a more minimalistic and modern approach with a list/image format, and others wanted a lot of elements featured on the home screen. We knew we wanted to use images to make it enticing and increase involvement. Also, we wanted to find a way to incorporate their social media feed onto the main page, but we weren’t sure if it was compatible with Squarespace templates or if our client would be consistent with posting new content. Once we were finished discussing a screen, we would collaboratively sketch out a new screen on the whiteboard walls.
Usability Testing
My main role on the team was user research, so another team member and I divided up the number of users we were going to test and we each conducted four rounds of usability testing for our lo-fidelity, mid-fidelity, hi-fidelity prototypes and mockup designs. During each round we each tested three different users, synthesized the data, compare notes with the other team member, and meet with the team members who were in charge of iterations and explained our findings.
We recruited users who were similar to our personas and a few creatives of color since our client was open to expanding their demographic in the future. Our research labs was very mobile, we would bring our laptops with the prototype on it, go through the usability script, screen record the users’ process with QuickTime, and took notes on their behaviors, comments, struggles, and delights.
Key Trends
Users felt there was a lot of text on the events page
Users wanted a more established header and footer from our original concept.
Users thought the donations page was overwhelming.
Iterations
We conducted three rounds of our prototypes. During the research phase, we discovered a lot of confusion, from users, about who Kollaboration was and what their mission was, so initially we felt adding a lot of copy was necessary in order to prevent this from happening again. Unfortunately, it only made the users overwhelmed and disengaged, so we changed direction with adding more vivid imagery and reducing the amount of copy. After the second round we were comfortable with moving forward with creating our hi-fidelity designs which we tested in our third and final round.
Below you can see our annotated wireframes, from round one and two, of the home and event pages.
Home Page annotations (top images from left to right)
Large Feature Image
Image to reinforce mission of Kollaboration
Image for featured event
Footer with additional links
Edit to header style
Added text and other information to clarify elements for testers
Events Page annotations (Bottom images from left to right)
Banner featuring big event
Listing with information and images for upcoming events
Media showcase for previously held event
Rearranged events and added context
Possible area for testimonials
Converted showcase to carousel
High Fidelity Prototype
Check out our video of our final mockup for Kollaboration’s local page!
Success
Our project was very successful. Kollaboration implemented our ideas for their website redesign, branding, and social media strategies immediately. You can check out here on https://www.kollabatl.org/ and on their social https://www.instagram.com/kollabatl/.
Takeaways
We had difficulties with communication from our clients because they all had full-time jobs in addition to Kollab ATL which made it difficult for our team to stay on our projected project plan. Despite these challenges, we were able to persevere with our team work with daily stand-ups and we able to diffuse tension by meeting outside our typical office setting. In the future we learned to express clear and concise expectations when it comes to communication from the very beginning.
If I go start this project all over again, I would love to more involved in the design process. At the time, my design skills weren’t the strongest, so now that I’ve improved in that area I’m curious to see if how different the final result would turned out.
This project really helped me grow into a better researcher. Having to analysis multiple recorded interviews with users, you become aware on how you can improve with your tone, verbiage, and questions.