RavenSkye Crystals

Crafting Unique Experiences: From Creative Concepts to Digital Mastery

Tools: XD, Figma, Pitch, Wix

Industry: Retail Trade - Gemstone & Crystal

Logo | Website | Android & iOS Mobile App UX | Business Cards

June 16, 2022 - Present

The challenge

As a dedicated crystal enthusiast with a collection of over 350 crystals, I recognized the need for a website that not only showcases my collection but also provides an engaging and intuitive experience for visitors. However, the existing website design fell short in delivering the necessary functionality for customers to easily conduct crystal research and make informed, high-quality purchases. This gap in user experience was not only hindering customer satisfaction but also limiting the brand's ability to fully showcase its potential as a reliable and knowledgeable source for crystals.

Outcome

To address this, I undertook the end-to-end UX design process, from in-depth research to the development of a user-friendly, elegant, and responsive e-commerce website. The redesigned platform now embodies the brand's lively essence while offering customers a seamless and trustworthy online shopping experience. The transformation was not just digital; it was an alignment of the brand's values with its online presence, ensuring that RavenSkye Crystals stands out in the competitive crystal market. As they say, we've got a crystal for that—and now, we've got a website to match.

Skills
Content strategy

Creative conceptualization
iOS & Android mobile app UX design

Logo design

Product management
UX & UI design

UX research
Website design

Webmaster

Process

Process work

Sketches

I prioritized the home page and navigation to keep the design uncluttered and ensure that information was easy to find. By offering multiple search options, I aimed to make it simple for visitors to find what they needed quickly and efficiently.

Color selection

The website bursts with the lively energy of olive green, yellow, white, and black. Olive green brings a touch of nature’s tranquility, perfectly framing the crystals in a fresh and inviting way. Yellow zips in with a vibrant splash of fun, making key elements pop and adding an extra sparkle to the design. Using white text on a black background creates a striking and sophisticated design with excellent readability. This classic palette adds a touch of elegance and makes both the text and crystal images stand out, grabbing visitors' attention. The combination delivers a sleek, modern aesthetic that remains stylish over time, while the high contrast ensures a memorable visual impact, showcasing the beauty of the collection effectively.

Typeface selection

Georgia, a classic serif font, adds a splash of elegance and sophistication that perfectly matches the sparkle of the crystals. Its easy-to-read design ensures that visitors can effortlessly dive into all the dazzling details of the collection, without any eye strain. Georgia’s graceful style brings a touch of old-school class while balancing beautifully with the crystal images. It is both professional and inviting, keeping everyone engaged and enchanted by the gem collection. Plus, with its consistent look across devices, the crystal showcase shines just as brightly no matter where it is viewed.

Empathize

To gain valuable insights into user experiences and challenges when using other websites and mobile apps related to crystals, I initiated interviews with crystal enthusiasts and lapidary hobbyists.

This user-centric methodology aimed to uncover any pain points, frustrations, or unmet needs within the target audience, serving as a foundational step to inform the project's direction.

Define

To really get inside users’ heads, I crafted a problem statement and persona that tell their story, build empathy, and put my designs to the ultimate test!

What does a typical day look like for the user?
What does the user value and care about?
What are the user's goals and frustrations?

This helped me grasp constraints, sharpen design goals, define deliverables, and make empathetic, user-centric decisions. Plus, it set clear success benchmarks and made my pitch to stakeholders more personal and impactful.

Mapping out the user journey let me see their experience, spot pain points, and find ways to make their path smoother, leading to a product that’s more intuitive and satisfying.

For Raven, finding a database that makes shopping effortless would achieve all their goals while easing their pain points. Aaron, on the other hand, is seeking a database to deepen their knowledge and source top-quality crystals and jewelry-making supplies, with the ultimate goal of starting their own online business.

Then I defined a clear goal statement outlining the purpose of our product and determined the top three goals.

I determined a value proposition to ensure that users have a reason to use the product that I am creating, as opposed to any other product currently available.

Ideate

I kicked off the most creative part of the design process by diving into a product feature and competitive audit of direct and indirect rivals (Crystal Council, Sage Crystals, The Citrine Circle, and Crystals and Jewelry). I put together a list of features and UX elements that would be super useful for consumers including:

User interface
Images
Filters/search
Sorting
Responsiveness

Crystal Council and Sage Crystals stood out as the top picks from the four options, offering a solid crystal knowledge base—but I did spot a few weaknesses. I summarized my findings in a competitive audit report.

I used what I learned from the user research and competitive analysis to begin generating ideas and applied ideation techniques such as How Might We and Crazy Eights to generate potential solutions:

Amp up the good: How might keep users engaged while providing research and shopping functionality?
Change the status quo: How might we help people who struggle with accessibility issues when trying to accomplish their goals?
Break the point-of-view into pieces: How might we increase engagement and interaction with the crystal database on a regular basis?

Solutions

User flows — Engage in learning through 5 user flow options:
- Navigation — allows users to narrow down their search by crystal type (Agates, Jaspers, Moonstones, Quartz, or Zeolites)
- All Crystals — provides a Crystal Index where users can learn more about each crystal's chakra, property, planet, zodiac, and element associations in the entire crystal database
- Crystals by Chakra — allows users to narrow down their search by crystal chakra associations
- Crystals by Property — allows users to narrow down their search by crystal metaphysical property associations
- Crystals by Zodiac — allows users to narrow down their search by crystal zodiac associations
Quick view — Quickly view crystal pictures and price with the option to View More Details and Add to Cart
Sort — Engage with the crystal database by sorting and quickly finding desired items [Sort By: Newest, Price (low to high), Price (high to low), Name (A-Z), or Name (Z-A)]

Sketching for screen size variations

I quickly sketched out several paper wireframes for the home screen, keeping the users’ motivations and pain points in mind—especially around accessibility, navigation, and search.

Paper Wireframes

Paper Wireframes Variations

App Paper Wireframes

Paper Wireframes

1/4

Digital wireframing

I transitioned my sketches to digital to tackle user pain points, enhance the overall experience, and gather feedback on the layout. I started by designing screens for the main user flows, refined them for better accessibility, and revisited Gestalt Principles to ensure they were well-integrated:

Similarity
Proximity
Common region

To accommodate users on various devices, I also mapped out responsive layouts for seamless browsing and searching. Here are a few samples or view the set of digital wireframes.

Easy navigation was crucial, so I focused on prioritizing call-to-action buttons and strategic placement of visual elements on the home page to make the user experience smooth and intuitive.

Prototype

Developing low-fidelity designs

I turned the digital wireframes into a low-fidelity prototype, linking screens for the main user flow of adding a crystal to the cart and checking out.

Planning the usability studies

Before diving into usability studies, I set up a note-taking spreadsheet to keep my observations organized and crafted a UX research study plan.

Test

Gathering insights

After gathering data from the usability studies, I used affinity mapping to synthesize the identified pain points, grouping them under common themes and features. From these themes, I drew actionable insights, emphasizing a deep human-first approach in all product work. I then made revisions to close the gap between my initial understanding of users and their actual experiences and needs.

Based on the themes identified, I developed actionable insights and transitioned the low-fidelity prototype into polished mockups.

Design system

I then created a design system in Figma. To draw users in, I focused on the emotions I wanted them to feel while engaging with the website. Inspired by nature, I chose shades of green to symbolize renewal, growth, and peace. Gold (light yellow) adds a touch of luxury, success, and triumph, while black brings an element of elegance. These three colors became the cornerstone of the design.

Mockups

App Mockups

Mockups

1/9

Developing the high-fidelity designs

I then transformed the mockups into a high-fidelity prototype in Adobe XD, focusing on enhancing accessibility. I laid out the mockups, connected the screens, added interaction details, adjusted the animations, and repeated the process for all screens to ensure a seamless user experience.

Implementation and reflection

End result and what my work accomplished

I completed the mobile app design on November 1, 2022, and wrapped up the end-to-end redesign and implementation of the RavenSkye Crystals website on June 4, 2023. Check it out!

I also launched a brand-new RavenSkye Crystals Etsy shop and officially opened sales on June 4, 2023.

Impact on users

Lessons learned

From concept to completion

Prior to this project, I understood the importance of the UX design process, but this experience taught me how to put the users front and center at all times. Since I worked on the original website, I had already formed ideas about what the final design would be before I started. However, after the empathize and define phases, I realized that my initial ideas were only the beginning of the process.

I originally thought most crystal enthusiasts preferred doing their research on websites, but research showed they actually want a one-stop shop where they can research and buy on any device, anywhere. I also learned that accessibility is a must, so I boosted contrast to make the site easier for visually impaired users. Putting real user needs first is crucial, and their feedback shaped every step of the redesign.

I designed the new business cards on July 13, 2023.

Future plans

What's next?

From the second round of tests, I created a new features list to add after the website go-live date so I will be working on that:

A 360° View feature to know what they see is what they get and not some random selection
A Pronunciation feature
A Translation feature
Add new crystals

I plan to wrap up some vital updates. As such, the website is still live but under a free account for viewing only. Once the updates are completed, the website will transition back to it's own domain as seen on the business cards.

Dominique Daliogne

RavenSkye Crystals