Created for the avid art buyer, MUSE is a mobile (iOS) application designed to feel like you’re strolling through an art exhibition. After two months of research, design preparation, and prototyping, MUSE came to life as a means to purchase art and connect with artists.
User Personas
There are three key steps in my design process: Empathize, Ideate, Design. The first step is crucial for identifying user pain points that may occur while someone is using a product. My starting point for MUSE was to create a user persona of a person who may realistically use the application. I tried to remain mindful of edge cases by trying to incorporate accessibility throughout every step of my design.
For my user persona, I created Willa Clemens, a 36-year-old Senior Software Engineer who doesn’t have the time to make it to in-person galleries. For this particular user persona, I gave her a problem statement which read:
“Willa Clemens is a busy Senior Software Engineer who needs an art shopping application because she does not have time to see exhibitions in person.”
Creating Willa was a good way to consistently remind myself that I am designing for humans.
From here, it was on to user journey mapping.
User Journey Mapping
With Willa Clemens brought to life, I wanted to create a user journey map to walk through her experience on an application similar to the one I was planning.
By going through every point in her user experience, I was able to identify how someone may feel as they used an application like MUSE. I ended up finding a few features that would be necessary implementations as well as areas for improvement.
When all was said and done, it was time to continue to paper wireframing…
Paper Wireframes
Paper wireframing was a fantastic way for me to rapidly create different versions of the application without worrying too much about the aesthetics. .
Doing so helped me see which features were reoccurring in my designs and worth looking into bringing into my final design. This exercise was a great way for me to get my footing with an early design that I didn’t have to feel to committed to.
Once I’d finished with my paper wireframes, I was able to move on to creating the lo-fi digital wireframes in Figma.
Low-fidelity Digital Prototype and Usability Testing
With an artillery of paper wireframes, it was time to take things digital. I started off by creating low-fidelity wireframes of my designs in Figma.
These were then mapped to create a prototype for early usability testing to see what might be confusing for users. Doing so helped me identify user pain points throughout the checkout process.
With these findings, I was able to adjust my low-fidelity designs before moving on. With these steps in good shape, I was able to move on to high-fidelity digital wireframing and prototyping.
High-fidelity Digital Wireframes and Accessibility Considerations
With all of my research and early designs under my belt, it was time to begin the high-fidelity designs. by this time, I knew I wanted MUSE to have a very sophisticated and moody design. My three main colors were gold, dark gray, and white.
While aesthetics are important, so is accessibility. I consulted the WCAG and made sure to test the contrast of my colors for vision-impaired users. When adding transition animations to my high-fidelity prototype, I made sure to keep them under 500ms to avoid triggering photo-sensitive users. I am a firm believer that designs can always be beautiful and accessible without needing to compromise either.
Ultimately, MUSE came to life as a beautiful mobile application that I am proud to call my first official UX research and design project.
