.jpg)
This project was focused on visual outcomes and finding a voice/brand for our client. My first step was creating a mood board for the brand, to establish a tone for the site.
From this mood board I pulled some key elements into the design: a color palette, integration of illustration, and expressive photographs of the product.
This was my primary way of working through the client requirements, and imagining how they might all interact on a page. After critique and feedback from classmates, I settled on a few sketches I thought were the strongest, and pulled design elements that I liked from each.
Sketching things out proved immensely helpful during this phase - I got to explore several concepts with little to no risk or time sink.
In the next stage I created a kind of Frankenstein's monster wireframe for the product page from all the best received parts of my initial sketches.
I really wanted to emphasize the visuals on the product page. Visual assets are a huge factor to user conversion - when buying online this is how users really get a feel for a product. A big CTA add to cart button was also something I knew I wanted to complement the big impact of the images. I explored a couple of cart options at this stage too.
From here I worked on my mobile wireframes, working off some quick pencil + paper sketches I made.
Re-using the same or similar components across desktop and mobile was super helpful in translating the design across devices.
Now it was time to get another pair of eyes on it. I made prototypes from my wireframes and let some users have at it.
The main feedback I got was on some unfriendly sizing for mobile - not enough spacing between elements for tapping on, font sizes a bit too small, etc. It was a simple mistake, but an important one - users need room to move around on mobile! I resized and reworked some elements to be friendlier for a touch-based interface. Now it was time to move on to some visual design.
.png)
Here's where I got into the design nitty gritty. I picked my color palette from my mood board - fun and youthful colors, giving a feeling of lightness and playfulness to the site. I applied these colors and some styling to the elements I had in my wireframes. For the typeface I chose a super friendly geometric sans-serif. I created some simple icons and illustrations to give the site a little more of that hand drawn, spirited style.
.jpg)
One of my learning experiences on this project was re-thinking and adjusting my color palette when it didn't initially meet accessibility standards: my initial color palette didn't include many highly contrasting colors, and my first go-round of the final visual design included too many light, non-contrasting colors. It taught me that it pays to be flexible - the colors we imagine might not always work in practice.
Check out the mobile prototype!
