Chic Geek Board
UX Design
Discovery:
The Chic Geek volunteer team works remotely developing programs, events, workshops and community engagement to provide support to women in technology. The team quickly doubled in size and communication between teams has become a challenge. The organization needs a hub or board to post all the happenings in each team.
Goals:
-
Find out whether a “Chic Geek Board” will help to improve communication between teams and volunteers.
-
Find out whether a “Chic Geek Board” will save Google Drive search time for the volunteers when completing their tasks.
My Role:
User Experience Designer
UX Research
Goal: The purpose of this research is to identify the challenges Chic Geek has with their internal communications and to find solutions.
First, I ran quantitative research by sending a Survey to all Chic Geek volunteers.
With the collected data I ran a qualitative research interviewing 5 volunteers at different levels: Executive Director, VP’s, Managers and Coordinators to understand the challenges.
Findings:
-
Most of the information is stored in the Executive Directors memory; it needs to be posted in a communication centre and be easy to find.
-
Overall, the personal goals for volunteering at Chic Geek is networking, learning new skills and giving to the community. Learning from each other is lacking as there is a communication gap between teams.
-
Regarding role tasks, the team has been more reactive than proactive. Tasks are completed at the last moment, as communications don’t reach volunteers on time.
-
A system/process/workflow can ease the last-minute work.
-
Current communication tools are: e-mail, Slack, phone calls and person to person.
-
Volunteers would like to know what the Board is working on, and which strategies and goals are being set for the organization.
Solutions:
In general, the idea of a communication centre has been accepted:
-
A place where you can see what every pillar is working on, easy to fill and update, including short summaries.
-
If it can be connected to Slack and Google Drive, quick links could be sent to email the person responsible for the posting to gain clarifications.
-
A Kanban board layout where each item is posted as a card to open.
-
For second stage, have a volunteer profile section with a link to each LinkedIn profile.
Some concerns are:
Would volunteers follow up and update it? Would it be another log in to worry about?
Heuristic Analysis
First I analyzed the Chic Geek website to evaluate the current Heuristic usability.
Competitors Evaluation
Then I evaluated two project management softwares as competitors. I found that the communication board solution needs to be simpler than a typical project manager software. This analysis gave me a good starting point. Kanban board with very clean layout and simple tasks. Open PDF
Empathy Mapping and Personas
To help me understand how volunteers are thinking and feeling, I developed three personas with the three different levels of volunteer commitment:
1. High level – Executive Director 2. Medium level – VP or Manager 3. Lower level – Coordinator.
Empathy Map
These empathy maps were developed based on the interview data, with a summary of each volunteer level. Open the 3 Empathy Maps PDF
Personas
In order to help me to answer the question: “Who am I designing for?” to understand volunteers needs, frustrations and motivations and to align the goals for the communications board, I created three personas based in the three Empathy Maps Open 3 Personas PDF
User Stories & Requirements
In order to validate my hypothesis of a “Chic Geek Board” as the solution for the organization’s communication problems, I developed an MVP with user stories. As features, I created four pages based on the current assumptions. For each feature, I created user stories to have a better understating of the content of these cards. This helped me to start thinking about requirements for each card and the whole communication board overall. Open MVP and User Stories PDF
Card Sort and Site Map
Card Sort Testing
In order to start testing my assumptions from the MVP, the next step was to run a card sort with the volunteers. I was able to recruit 3 volunteers from Chic Geek with very different roles in different pillars (teams).
I was impressed with the result of this test. Chic Geek has very defined organization chart, which I was basing the site map (menus). The results showed most of the volunteers label the groups by logic names rather than the stablished organization chart. The labeling of the groups were similar but the tasks inside the groups were different.
As next step, I will run a reverse card sort test to find the middle point between the volunteers’ logic and the organization chart. Open Card Sort PDF
Site Map
A site map was created following the results of the cart sorting. I discovered “General Inquiries” would be a useful page to have. It was one of the first groups with more tasks that the volunteers created.
User Flow
Once the site map was solved, I created a task list for each user to be able to create a user flow having clear tasks for each person. This tool avoid getting lost in the development of the user flow.
The following user flow is my tool to communicate with the developers when the product is in the development process. Therefore, I updated this user flow every time a testing and change happened during the project.
Sketches and Wireframes
Sketches
It has been interesting to discover how through every stage of the process, the final solution keeps changing. When I started sketching, I was confident that the first solution would be for desktop. After the first sketch I realized that volunteers at Chic Geek need a fast tool, so mobile would be faster than making time to sit down in front of the computer.
Wireframes
As well the user flow keeps growing, during sketching process some links were added. By the time I was wire-framing, I needed to be side by side to the user flow.
After I finished my sketching I felt confident my user flow was solved. During the process of wireframe seeing every screen/step made me evaluate my decisions again.
Visual Design
At the same time, I was working on the prototype, I started designing the Chic Geek Board Logo, defining colours, typography and call of action buttons. Creating a “Style Guide” to promote consistency and establish best practices inside the organization.
Usability Test
Once the first Prototype was ready, I ran a usability test with 4 volunteers. The sessions were online using Slack and recording them with a camera. This was one of the most useful tests that I have ran.
Study Goals:
-
Find out whether the “Chic Geek Board” is the tool Chic Geek needs to improve communication between teams and volunteers.
-
Find out whether the “Chic Geek Board” will save searching time to the volunteers when completing their tasks.
-
See whether volunteers can upload and download information in an easy way.
-
Find out if the current user flow is accurate.
Findings:
My findings were very helpful and were eye-opening. The experience was totally different for the users that structure chic geek to the users that are volunteering for couple of hours per week or month. For Chic Geeks with experience the menus under “Events” should be under “Programs” and for the onces with less experience was the opposite. The organization’s culture needs to be established. This app will help with this culture. Another surprise result was that the very clean layout confused them, that the burger menus weren’t identified as having more menus/information.
In the last test exercise, the volunteers started to become familiar with the app and it became easy for them to use.
Next Steps:
-
Have all menus visible and more clear which page users are.
-
The side menus were the first ones that participants looked to for information, and so all the menus and submenus will be added there.
-
Place events under the programs tab.
-
Add a section for partner development and move general inquiries to the general side menu.
-
Add to the cards layout:
– Add hierarchy to the card fonts to be easier to read.
– Button icons need text beneath, explaining what they do.
– Add checklist, open link in Google Drive instead of downloading files, including dates for last update and last access.
Final Prototype
Click Log In to play the prototype
(gentle click or tap to highlight the active clickable functions)