Z e l d a ' s C a u l d r o n
e-commerce website
*Created in Sketch
Overview
Zelda's Cauldron is the portal between realms: a mobile responsive e-commerce site made for those who wish to enrich their everyday lives with a little more magic and fantasy.
We wanted to bring our love of fantasy and magic to reality, for it to not only exist in books and games but also in real life. Zelda provides users the ability to purchase novelty and functional items for their next Dungeons & Dragons session or full moon ritual.
TEAM: 3 members
TIME: 3 week sprint
ROLE: UXUI Designer
*Created in Sketch
*Created in Sketch & Adobe XD
Practitioners of witchcraft, and players of fantasy games like Dungeon & Dragons have grown considerably over the years, but few options exist to bring this magic to everyday life.
Zelda’s Cauldron provides users an easy and intuitive way to indulge in their magical side.
The Process
Immerse yourself in information. Collect data and inspiration. Learn what the user needs.
Data Analysis & Social Listening
Inspired by our own frustrations and validating these with social listening, we discovered an untapped market amongst gamers and witches. As the populations for each grouping grew, the team realized the need for a marketplace which provided users the options to purchase authentic, high-quality, food, drinks, and wares in one simple and understanding location.
*Collage made in Sketch & Keynote
Competitive & Navigational Audit
With the knowledge that an e-commerce site such as ours didn’t exist, the competitive audit became focused on e-commerce sites with a similar aesthetic. From here we were able to see how products were displayed, the brand’s primary desire, and how they directed users through their site.
Checkout Audit
We were inspired by the example checkout flow, but chose to shorten it to a two page form, so as to simplify the user’s process and eliminate fatigue.
*Collage made in Sketch
Hone in on how to best serve the user. Reflect on their journey.
Sitemap
We didn’t want to overwhelm our users with an excessive, messy menu. So we chose to keep it simple. We broke down our main goal of the site: to allow the user to easily find a product, and make a purchase. This encouraged us to provide clearly labeled category pages, as well as a search bar outside of the hamburger menu, so the user can find exactly what they need.
Flowchart
Our product selection flow chart represents the original flow for both the mobile and desktop views of the site. The importance of this provides not only a map for the designer to follow, but also for the developer team. Without a clear flow chart, it’s easy to get lost when building a site.
Bring concepts to life. Work with others to mark a clear path. Let creativity flow.
Screen Sketches
Messy and rough, the screen sketches are the first steps to creating the visual mapping. Doing so lays the groundwork and allows for team involvement & collaboration.
Anyone can sketch, let them.
Moodboard
Set the tone. We wanted to convey a sense of mystery and unknown for the user, but also invoke curiosity. This was achieved with a dark palette and pops of magical color. The preliminary steps of choosing iconography also started here, but there were many iterations based on future user feedback.
Wireframes
Keeping in mind the primary function of the site, we kept the layout minimalist to not distract from the products provided. While only represented in very early iterations, we chose to remove the blog as our hero and primary CTA. Instead we opted for a quiz-of-sorts where the user has the opportunity to meet and chat with the site’s namesake and merchant: Zelda. Her function is to bring the user to our different category pages.
Mockups
The simplicity of the wireframe, combined with the focus of the moodboard allowed the mockup to to come together with ease. Keeping in mind that the product is the star of the show helped determine the few places color should be, but still maintain harmony throughout the site.
Test with the target audience. Receive feedback. Iterate. Rinse & Repeat.
Prototype & IXD
Through prototyping we are able to experience the flow the user goes through. We get to test our own product to resolve potential issues before spending lots of time and money on a final product. Interaction Design is focused on the user’s experience. These interactions help provide visual cues to the user as well as help push a brand’s personality and tone.
User Testing
Feedback is invaluable, and helps keep the designer focused on the most important part of a project: The User. Zelda’s Cauldron went through several iterations, from altering iconography for the cart/ cauldron feature, to the “favorite,” button, and even the name of the site itself.
NEXT STEPS
From here the goal of Zelda's Cauldron is to create a community section to the site. We would love for users who found us to be able to connect and foster relationships with others like them, and ourselves.
There is also some discussion of working with a developer to build out the site... but that will remain in that shadows... for now. 🔮
Have questions, feedback, or want to reach out? Feel free to get a hold of me at my contact page!
If you'd like to know more about me, check out my resume.
