Introduction
The Güdeeds app was conceived, designed, and built during a three-day Hackathon sponsored by General Assembly. The theme was tools for caretakers.
Tools
Figma, Material-UI, Clock, Hackathon-caliber Stamina
Takeaways
Design Systems may pave the road to collaboration and success, but scenic overlooks bring the team together.
Responsibilities
Prototype, Design Studio Lead, Feature Creep Foiler
The hackathon team was comprised of 5 designers and 5 developers.
I have four years of experience on a product team where I worked daily with developers. In addition to my designer role, I helped translate priorities between our two groups. Honestly, it could not have gone better. Our communication was honest and consistent, with room for a joke or two along the way!
What UX People do
At the start of our second meeting I gave a 5 minute introduction to the Double Diamond process. Having worked with developers in the past, I knew it would be enlightening for the devs on our team to understand how the design process worked, and see how our methods worked in concert. When I concluded, a developer on the team said, “Thank you for that. Because honestly, I didn’t have a clue what UX people do.” We all laughed. "That's ok," a designer offered, "my mom doesn't either, and she gave birth to one." We couldn't have asked for a better start to our project.
Why is this relevant? While this is a case study of a Hackathon and a pretty cool application we named Güdeeds, it's also a case study that demonstrates and celebrates the benefits of open communication and committing to a common design system, in this case, Material-UI. We taught the developers to navigate Figma, and stayed disciplined with our designs, keeping all of us in sync.
Spoiler Alert: The Güdeeds app won Crowd Favorite, a recognition bestowed on us by our peers. We were the first to acknowledge there were other apps in the competition with creative ideas, but ours stood out for the smilarity between the Figma design (left) and the fully deployed app (right). It spoke to a whole different level of collaboration, and a profound learning experience for our team.
The similarity between the Figma design (left) and the deployed app (right) was striking, and likely the reason our peers awarded us the title "Crowd Favorite"
User Research
Just two weeks after covid restrictions had been lifted our UX research team hit the ground for some guerrilla research collection. They interviewed parents, caretakers, and busy individuals. There was a clear consensus: It's hard to ask for help. On the flip side? People feel really good when they help someone else.
Persona
A Persona is a useful tool in design, and the ultimate weapon when you are a natural born Feature Creep Foiler like me. A crisp, clear persona can be leveraged in any conversation where a decision about next steps is being made. The persona for Güdeeds was Sabrina. My drumbeat, "how will this benefit Sabrina," "where would this fall in Sabrina's priorities," and so on kept us on our path. That's not to say we didn't take time out here and there to dream of what could be, only that we captured it and then moved on together, united in our purpose of doing what was best by Sabrina.
How might we equip users like Sabrina so they can feel confident about asking for help without feeling like a burden, and make it easier to give help when there is time and space to do so?
Enter Güdeeds, a space where users can:
• Post a task they need help with to a space where their community (as defined and invited by the user) can view and adopt tasks
• Track task details and progress
• Support others by adopting tasks that need to be done, at a time and manner that is convenient for the user doing the task
Information Architecture
User Flow
The challenges of offering two major features at once, asking for help and offering, surfaced while designing the User Flow.
Since the user may have an open request and adopted a task, we needed a way to bring these items to a common ground. The challenge was to create a prioritization among the actions.
We addressed this issue in the Visual Design, where we used a different color for the “Add Task” button, and included an add task “+” in the bottom navigation.
Site Map
As we put together the site map we saw an opportunity to reduce the number of clicks to get to the categories for helping others. We removed a “View Category” step and instead listed the categories right on the home page, under the section label “Offer Help.” We further distinguished the role of the section by using a different color from the CTA “Add a task” button.
Design System
As discussed above, the Material-UI Design System was used by the design and developer teams. For expediency our visual designer adopted the default colors of the UI kit. Except for a couple minor items, the dev team was able to implement the assets as designed.
Wireframes (or, Wireframes?)
Here’s a funny thing about design systems and wireframes (and why the design system section came before this one): When you’re using a design system, wireframes are completed with great efficiency. And the components are easily adopted for the final prototype. As a result, the wireframes are a good preview of the final version. The similarity was helpful too for the developers who were continuing to build the live app, even as we were just entering our final design phase.
Prototype
As clean as the wireframes were, some important changes were incorporated as we moved into the final prototype.
1. Add a Task and the Add a Task nav button receive their own color to address the prioritization issue.
2. The Add a Task button on the bottom nav was made far more prominent.
3. The forms for entering a task became dialog boxes, more consistent with conventions for adding information of this matter.
Our usability testing yielded some very important insights for iterations to follow the Hackathon. Overall, however, users found the app easy to navigate, aesthetically pleasing, and declared they would be more likely to ask for help using this app than asking someone directly!
To get a sense of the app, tour the Figma prototype (no account needed).
Güd Next steps
Responding to User Feedback
Although we did not have time to incorporate the user feedback collected, we strategized the following next steps:
Users were confused what “My Schedule” was and clicked on it, even before they added a task
1. Demote its position
2. Rename to a synonym for “On Deck” (not as easy as it seems!)
Users asked what would happen if they wanted to ask for help outside of the given drop-downs
1. Consider adding “Other” category as a short-term solution
2. Consider allowing users to create categories (fully acknowledge there are many challenges with this idea
Users indicated they would not have expected to see their requests under the profile page
1. Repurpose profile page for details about address (optionally).
Other Güd Ideas
The group didn’t have a chance to consider what happens when a deed is completed. Does it disappear? Can you look at a record of your requests and offers? Can you "repost" an old task, so you don't have to rewrite it? Can more than one person offer to take on a task?
Gamification was an early concept that was put on hold because of time. The idea was that users would be earning “karma points” for adopting tasks. During our initial research, users expressed that they did not feel they could ask for a favor in return, but when you see you have a whole pot of good deeds adding up, you might feel more open to asking for help! And then helping others even more!