GIVESHOP UX/UI Design

UX/UI DESIGN, RESPONSIVE WEBSITE reDESIGN
SUMMARYRole:
UX/UI Designer

Team:
2 UX researchers
4 UX/UI designers

Duration:
3 months

Tools:
Adobe XD, Figma
GiveShop is a startup simplifying how people can discover, learn, and contribute to social impact projects. I volunteered some time to this project as a UX/UI designer.

In collaboration with two UX researchers (who had already completed their initial round of research by the time I joined), and a few other UX/UI designers, I assisted the team in creating low-fidelity wireframes for the version 1 MVP (a responsive website). I also assisted in brainstorming various visual styles to explore different color schemes and typography that would best reflect the brand of GiveShop. Lastly, I assisted the team in setting up an initial version of a UI kit/design system within Figma to ease the workflow for future designers as they continue to work on getting the v1 MVP ready to launch.

Below is one high-fidelity UI mockup I created to explore a visual style that might come across as friendly and approachable. You can also find a few screens from a low fidelity wireframe I created based on information gathered in the research phase and input shared with me by the rest of the design team.
One concept for a high-fidelity UI design. This experiment was created to test the color scheme, typographic choices, visual hierarchy, and visual style.
After the UX researchers finished their tests, surveys, and interviews, I took their research findings, as well as input from the other designers, to create these low-fidelity wireframes.

The goal was to allow for users to quickly and easily find what they were looking for (or if they didn't know what they were looking for, to be able to easily explore the site to find projects they might want to contribute to). It was important that there were multiple points of entry into any given project, thus the various CTAs across the home page (some leading to a project via 'causes' categories, and other areas leading users to a project via a specific project card).

Last but not least, some of the research showed that some participants felt unsure about what GiveShop was all about. So, in order to try and establish more trust, I added some sections in the middle of the home page to try to clarify what GiveShop is and how it works.
Back to top