Caseverse - Inclusive and supportive phone cases

Research 🧑🏻‍💻

As a research method I chose user interviews.

I conducted an anonymous questionnaire about Pride Month, which was completed by 12 participants. The key findings from the research are visually represented below.

This feedback was instrumental in shaping our design to ensure it resonates with our target audience.

Below are presented results of my work.

Empathy map

User needs

Problem statement and its context

As soon as the necessary data has been collected I was able to think of a potential service user.

User persona

Brainstorm solutions 🧠

As I was a solo creator the main way of creating ideas was in my head or making down some relevant notes.

As soon as I had enough ideas to consider I chose to use Affinity diagram as it helps to structure the data and eliminate similar ideas (as well as to create a backlog with not MVP ideas).

Affinity diagram

Interface design process 💡

Final solution 🌸

Color palette

I chose to stick to 3 main colors - dark blue, bright pink and white to ensure accessibility. These colors provide high contrast, enhancing readability and user experience.

Typography

I chose Raleway font for the headings and Roboto font for the body text. This font combination helped me to achieve a modern, clean and accesible look.

Components

I used the LGBTQ+ colors as hover states in the CTA buttons.

Final page ✨ - 🟢Working prototype🟢

Conclusion

The Caseverse project aimed to design a landing page that effectively communicates the brand's commitment to diversity and inclusivity while promoting both regular and Pride-themed phone cases. By integrating user feedback, we created a visually appealing, accessible, and user-friendly design that emphasizes subtle, stylish expressions of support for the LGBTQ+ community.

I am grateful I was able to take part in this project event as it helped me personally to understand and explore the LGBTQ+ culture.

Thank you for your attention!

Attribution

> The image in the hero section is AI generated

> Other images taken from open sources:

freepik.com

vecteezy.com

icons-icons.com

undraw.co