The Story
In 2020, amidst a series of life-altering events such as moving across the country, graduating from college virtually, and navigating a pandemic-induced job market, I channeled my energy into creating an e-commerce business, Paint. Despite facing unimaginable loss and adversity, I persevered and turned my pain into a mission to combat mental health through art and mindfulness.
Design Direction
Art has always been the inspiration behind Paint's products, with a focus on creating illustrations that are unique, unconventional, and enjoyable.
To bring Paint's mission to life, I utilized UX design skills to create a visual identity that captured the essence of the brand. Through hours of research on Dribbble and Pinterest, I constructed a mood board that incorporated photos and colors that resonated with me. The concept of fun and quirky illustrations aligned well with the mission of using art to promote mindfulness and battle mental health. I then had the idea to transform a photo of a real object, a strawberry, into an illustration, inspired by a similar idea I found online. This concept led to the creation of Tanner the Strawberry, one of Paint's beloved characters.
Low Fidelity
During the initial web design phases of Paint, I focused on creating a simple skeleton that would serve as a foundation for the brand's online presence. Through research, I learned about the importance of white space and effective color communication in web design. This prototype provided me with a clear direction and a roadmap for developing high-fidelity designs later on. Throughout this process, I utilized Figma as my primary design tool.
Let’s use the “About” page for an example.
In the early stages of designing Paint's website, I focused on maintaining a consistent layout for each page, including the 'About' page. I utilized a headline to capture the visitor's attention and a subheadline to provide a brief overview of the page's content. By creating low-fidelity wireframes, I was able to determine where the user's focus would be directed and what they might be looking for through navigation.
Medium Fidelity
After finalizing the low fidelity designs, I progressed to medium fidelity to create a more detailed representation of the final product. I added text and imagery to fill in the blank space and bring the design to life. To create unique and engaging characters and animations, I incorporated Adobe Illustrator. This stage allowed me to experiment with the layout and content while ensuring the overall user experience remained intuitive and consistent.
During the medium fidelity stage, I focused on refining the design and adding more details to the 'About' page. Color became a key element in communicating the brand's emotions and values to visitors. Based on research, I chose pastel colors to create a welcoming and lighthearted atmosphere, which aligned with the hand-drawn characters and playful text. The use of lighter colors also served as a calming mechanism. As a result, the 'About' page became much more engaging and visually appealing, drawing visitors in with its inviting and fun aesthetic.
High Fidelity
Once the Figma designs were finalized, I moved on to the high-fidelity stage where I recreated them in WebFlow. In this stage, I focused on adding functionality to make the user journey more engaging and intuitive. For example, I incorporated hover effects on buttons and animations to make the website more interactive. The end result was a fully-functional website that not only looked great but also provided an enjoyable user experience. To showcase the website's features, I also created a video that highlights the user journey.
Make it stand out.
Every venture starts with an idea, be it launching a business, turning a hobby into a career, or sharing a creative project with the world. However, the way you present your story online can make a significant impact on your success.