I was given the chance to help Givr with their UI and UX design on their fully responsive site. Givr is a non-profit start-up out of Arlington, Virginia that creates a subscription box for people wanting to help those in their community that are experiencing homelessness. The goal was to create a simple subscription section on the desktop and mobile version of their site to allows users to subscribe from the Landing Page.
After being tasked with this project, I was able to break it down into three steps: research, wireframe, prototype. I started by researching examples of clean design examples for similar subscription pages. The first thing I go to when researching design for any project is Dribbble.
I knew that the biggest issue of designing this subscription section was going to be creating a design that is simple and clean in desktop and mobile versions. The website is built in Webflow which allows a fully responsive site, but I knew that just minimizing the design from desktop to mobile wouldn't be the best solution.
I created these wireframes in Figma as a basis for my design. The idea was to make the mobile version similar to the desktop version, but as a punch-style selectable option instead of having a button on every option. I took this wireframe back to Figma to start the process of creating a prototype.
These prototypes above are the first two that were designed in Figma. The mobile version would be a selection that would add a selector rectangle over your subscription. After selecting your subscription, you would push the button for "Checkout Now" that would bring you to the specific checkout page. The desktop version was a similar design to mobile, but drawn out with rectangles and floating boxes instead of buttons.
These two designs were submitted for user testing to the team at Givr and a problem arose on the mobile version. There was worry that the selection process allows for missteps if you had bigger fingers, or slipped. The mobile version was accessible visually, but fell short on the physical side.
After messing with a few different ideas, I came to the realization that the mobile version could be made with a long stacked button format that still used a punch-card style selection. This would allow for total accessibility while still staying true to the original design. This prototype was selected as the final, then sent to our UI Developer to be put onto the website. You can see this design live on the website today.