My Digital TAT2 is a nonprofit organization focused on empowering young individuals to cultivate positive digital habits through considerate and respectful online interactions. They offer a range of workshops and seminars tailored for students, parents, educators, healthcare providers, and business professionals.
They
The goal of this redesign was to help MyDigitalTat2 increase partnerships, donations, and visits to resources created.
As a team, we analyzed the current website and had difficulty navigating it. Some pages' content was too extensive, relevant documents were hard to find/access, and most importantly we couldn't understand at first glance what the non-profit did along with its mission & vision.
So the challenge became, how can we improve user engagement by redesigning the website with simplified navigation and easier access to resources, all while integrating a closed-access school partner portal?
They
Our primary focus was on enhancing user engagement through the optimization of content flow, structuring information across pages, refining appearance, and design conciseness that aligns with the organization’s values.
The current website contained redundant content, was heavy in text, had design elements that were overwhelming and weren't intuitive for the content flow.
They
We did a survey of different non-profit websites who work in similar spaces and websites the clients stated they liked. We assessed each website’s color scheme, accessibility, organization of information, and overall look and feel. The purpose of this research was to understand what other non-profits are currently doing so that we can better structure our website. When researching websites, we did it through the lens of three different user personas: teachers, parents, and students.
Relevant aspects:
- Clear Mission Statement on Home Page
- Easily Visible Donation Link
- Diversity of Stock Images
- Accessible Color Contrast
- Screen Reader Accessibility
- Usability when Zoomed in at 200%
• Primary Users: Parents - Find resources to educate you and your child about difficult situations surrounding social media, cyberbullying, etc.
• Secondary Users: Children/Students - Learn about and join programs with peers to stay informed and share personal stories around technology.
• Other: Healthcare and school programs - Learn about the student, parent, and administrator programs and trainings (this is what drives revenue, so make sure this is well advertised). Access additional resources to revisit themes from the programs (at the moment this is "closed access" in that the team only shares the link with school partners and does not publish it anywhere).
We prototyped the layout of each page & established our information architecture to make the information easy to find. Ensuring that the relevant information was easy to find was our #1 priority.
• Homepage
• Resources
• Teen Empowerment
• Get Involved
• Donate
• Programs
• About us
After going through critiques and analyzing thoroughly, our designs changed significantly from the one above, the sections that I worked with (for example: resources) were narrowed down and their layout was optimized. In the old design the website included images that were unnecessary and could be substituted with text and improvement on the headers.
They
MDTAT2 wanted their website to be playful & friendly to visitors. We maintained their color palette, but decided to have a color hierarchy and created a system to its use, so that they could have a stronger and tighter identity. We prioritized ensuring that all other media, such as images, icons, and buttons, remained within this color palette range.
.png)
During this stage where we got into the fun part of dealing with colors and contrasts we did multiple revisions some takeaways from the discussions we had were: keeping color of buttons and text accessible, settled on using rounded corners shapes/ icons to make our design playful, use short previews of paragraphs when there are buttons that have that information and later take you to the full content. Below you can fid the final designs for our Main website and then our School Portal !
Before settling on this design we made some important decisions:
- Finding a way to integrate the school portal in the same site was something that could be approached in multiple ways: 2 nav bars, a drop down menu, another bookmark on the navbar, etcetc.. We decided to add a new button next to the Donation button, new visitors can now see that we also work with school districts!
- While we were designing on Figma and later Wix we noticed that some of our planned features couldn't be implemented and had to make some adjustments accordingly... (Bye slideshows with frames and text 👋)
- We tried to have images or icons in most of our buttons to keep our content engaging and grab our viewers attention at first glance.
Important decisions made:
- Since this side of the site consists of a lot of resources useful for school trainings and programs we prioritized communicating in a simpler way what each section was and having a clear communication about what type of media each element was (Is this a video, document, or another website article ?!)
- Shortening and organizing our "Resources by topic" footer section
This was my first team working with a product manager and design manager and also my first time working in just a team of product designers! I learned that communication is key, it is important to discuss as early as possible how we feel about the tasks, as well as clarifying what we believe is in scope for the project. I obtained many useful insights from my team members and their prior design experiences.
This experience taught me how to communicate directly with a client, how to take feedback, most importantly taught me about how helpful it is to have someone bridging that conversation, like our AWESOME PM. I gained valuable experience presenting my own ideas and their rationales in a thoughtful manner, but always making sure to prioritize the client's desires, rather than my own.