Overview
We Connect The Dots is a non-profit organization that provides after school programs to help students succeed in STEAM careers. Which include programs like coding, teaching drones and VR.
Role and Duration
UI/UX Designer | WeConnectTheDots
Information Architecture, Interaction Design, Visual Design
Team of 5 designers
July 2019 – July 2020
The Problem
Needed a new homepage design in order to make the platform consistent, intuitive and easy to understand. Users who landed on the page did not understand what the organization is about and what they do.
The Goal
Redesign the websites information architecture with a focus on promoting new and upcoming nonprofit programs. Improve the overall visual design of the WCTD’s website. Help promote the organizations brand and value.
PROCESS
Heuristic Evaluation
User Personas
Empathy Maps
Information-Architecture
Wireframe
Prototype
Visual Design
Interface Design
Remote Usability Testing
Identifying the problems with the old website design.
In order to redesign the website we had to understand the problems users were experiencing with the current We Connect The Dots website. First step was to analyze the current content of the landing page and see which areas would need improvement/clarity.
Below are some of the problems the UX team and I identified with the old website design.
Heuristic evaluation of the current website design.
The usability testing was conducted by one of the team members of the project. The usability testing was done remotely and in-person with a metric table. There were a total of four participants. Each participant was given the same three scenarios and tasks.
The metrics included the time taken to complete the given tasks, satisfaction in doing the task, completion, and feedback. Based on the results we were able to see the strengths/weaknesses and the pros/cons from the participants.
Created three user personas to help build empathy with users and understand their needs.
After conducting the usability testing and discussing with the project manager we defined three user personas. One as the Parent, Sponsor and Mentor. These are the main target users groups we wanted to represent, based on the usability testing results and user research.
This will help us to efficiently identify and communicate user needs, experiences, behaviors and goals. It will also help build empathy with our target users and guide our design decisions.
Empathy maps shows users are not left with a good experience while navigating on the website.
We created three empathy maps to articulate and to visualize what we know about the three particular types of personas in an organized, empathetic way. This will aid us in gaining deeper insight into the different types of users, and be able to see shared understanding and prioritize user needs.
The empathy map is split into 4 different sections. We have tasks, emotions, thoughts, and opportunities. This will help us visualize user attitudes and behaviors.
New information architecture to help with the content organization of the website.
Before working on wireframes or visual design of the website we had to restructure the current IA. We wanted to limit the number of pages and tabs that were on the homepage and organize the site content and functionality. As we saw from the empathy maps there issues with the layout with the site. We had to do a lot of content inventory and information grouping for the site.
Main wireframes I was responsible for designing.
The wireframes were divided up by the UX team. I worked on the support section of the website. The main pages included the support page that lead to sponsor, scholarship, volunteer and donate page.
Visual design for the new landing page
There were many important items missing from the homepage. Which included a top and bottom navigation. It was also important to include search at the top of the page.
Main focus for the homepage is to provide an overview of what the organization does and what service they offer. It was important to get a clear message across about what the organization mission is and what they stand for.
Redesign of the scholarship funding page.
Redesign of the donation page.
Redesign of the volunteer page.
Reflection
There was a lot I learned from this project. Especially working together as a team remotely, as there were quite a few UX designers on the team. It was important that we made sure everyone was on the same page and that we completed our appointed tasks otherwise we would not have been able to move forward with the project.
Thanks for reading!