In the wake of COVID19, there was an abundance of professionals wanting to use their skills to help those in need. All the same, there was an abundance of professionals desperately looking for work. Noticing this trend, The Give Line was developed to easily connect individuals both looking to help and looking for work - creating a virtual community of collaborative support.
The Give Line was a joint project with the Phx Dev’s Humanity Driven Development Initiative, Finace-Ability, and myself. The Give Line was made with Figma. View the live site here.
Find my process for designing the user interface for The Give Line below.
Disclaimer: I did not come up with the concept or name for The Give Line, nor do I own any of the rights. The website is currently being developed and the design and/or function may have been altered in the process. The images below are intended to display my design process only.
THE PROCESS
1. Mood board & wireframes
When Phoenix Devs came to me with the idea behind The Give Line, they described a networking event where business cards hung on a clothes line. I decided to run with this idea - creating visuals to reflect a clothes line with info cards hanging from it.
My first step in designing the user experience for The Give Line was creating a mood board. Here, I compiled all inspiration for the look and feel of the app. The next step was laying out app functionality with wireframes.
2. Version 1
To start, I developed a soft color palette and a very simple UX. The website design is meant to be bright, friendly, and cheerful. For version 1, the main functions I designed were the onboarding process and the process of a user shifting through cards.
3. Version 2
As we continued to meet and discuss necessary features for The Give Line, I iterated on the existing UI. This included changing the colors to be less pastel, changing the form inputs, and adding new user features (and changing the name and logo).
4. New Features
The new added features include the ability for a user to take a card off of the line and place it a pile, an area where users can shift through these piles, and feedback that ensures the user is actually contacting people, rather than just stockpiling cards.
5. Version 3
The third and final version of The Give Line involved enabling LinkedIn configuration, adding a conversations feature, having users test and give feedback on the UX, and much more. The Give Line was then fully developed and launched Phx Devs, enabling communities to ask and give help through an easy, fun interface.