An all-natural and sustainable 

soap and scrub company.

Role: UX researcher, end-to-end UX designer

Timeline: five weeks

Process: goal determination, user research through surveys and interviews, secondary research, affinity mapping, POVs & HMWs, persona creation, storyboarding, site map, task flows, style guide, wireframing, UI kit creation, prototyping, desirability testing, result mapping

Target Demographic: Women ages 25-35 who are mothers of at least one child and who are looking for clean soap products within their home

Tools: Figma

• A strong website with a prominent CTA so that users are immediately drawn in by the SEO

• Draw users to Earthly Emanates over competitors, specifically small business competitors

• Provide stakeholders with regular updates and communications regarding the project

• Limited by platform, payment provider, etc.

• Delivering a file that matches the stakeholder’s needs while they are still trying to determine their needs

• seven women

• ages 25-35

To aid in my research, I interviewed seven mothers who either use natural, non-toxic, sustainable products in their homes or who are looking to switch to those types of products. I first wanted to determine what frustrations they have with their current online shopping experience so I could know what design choices to avoid. Their feedback was substantial - users like looking at simple product pages. They enjoy shopping on e-commerce sites that don't have infinitely long menus. They like it when products are easy to find, almost like an in-store shopping experience.  

Based on the data collected during interviews, I determined that:

• Users want to take ownership of their online shopping experience. 

• Focusing on a clean, simple, and modern design will be something users look for.

• Users want to see testimonials and hear from others why a product is valuable, why it works, and how they like it 

• Users need something easy to navigate and simple ways to accomplish their shopping goals.

• Bend Soap

• Lark

• Good Earth Beauty

• Rooted Earth Farm

• Proactively use product photography

• Ensure that copy regarding non-toxic and safe products is immediately noticeable and prominent on the site.

• Create a sitemap that users can easily access without confusion

To spark ideas and get my imagination flowing as to how to make the best possible website for Earthly Emanants, I completed the activities below - Playing with Opposites and Analogous Inspiration. When Playing with Opposites, I wanted to come up with a few bad ideas but many more good ideas. You'll notice that many of the good ideas are fantastic, but not all are feasible for initial iterations on wireframes. Because of this, I took the ideas that were the most realistic to implement and provided Earthly Emanants stakeholders with other ideas for future iterations and improvements.

For Analogous Inspiration, I chose to look at the four companies mentioned in the secondary research above. Because Bend Soap is a company Earthly Emanants is most similar to, I wanted to dive a bit more into what they do well and what could be improved upon. I was able to come up with new ideas that would improve their site and would be beneficial to include for Earthly Emanants. 

Nicole, Elaine, and Melanie are all women who have varying careers, goals, and frustrations. Each is a mother who values the products they bring into their homes. Though all three personas have varying goals that they hope to accomplish, the outcome they are looking to achieve is the same - they need safe, non-toxic, and sustainable products that will benefit the health of themselves and their children in a clean and safe way.

• Because Nicole is looking for products that can be safely used in her home, she would like to see testimonials/reviews and highlight experiences of mothers who have switched to natural products, sharing the benefits they are seeing in their homes.

• Nicole would like to make sure she is purchasing high-quality products that will provide her family with safe skincare products by seeing educational content regarding natural skincare targeted to mothers looking to incorporate natural products into their homes.

• Nicole values natural products but doesn’t know the best or safest options. I’d like to explore ways to share with mothers why their families will benefit from switching their current products to more natural products.

• How might we showcase natural products in a design that educates Nicole about how natural products are healthier and safer than toxic products often found in homes?

• How might we empower Nicole to make informed decisions about which Earthly Emanants products are right for her family’s health and well-being?

• How might we prominently leverage the opinions of other Earthly Emanants customers to show Nicole that other people value Earthly Emanants products?

It is critical to include the benefits of Earthly Emanants products on the site so that customers like Nicole can clearly understand why purchasing from Earthly Emanants will benefit their families. 

Additionally, it's important for potential users to see reviews and testimonials from other customers in determining if Earthly Emanants products are right for them. If a user were able to see reviews from other customers, they would be more likely to understand the benefits of Earthly Emanants products and purchase them.

Because Earthly Emanants is a new, small business, the sitemap for their website fits the needs of a new, small business. Though basic, the sitemap fits the company's business requirements and specifically user needs.

The task flows presented below were developed for Earthly Emanants' website, adhering to the basic sitemap structure. As the sitemap served as the foundation, the task flows were intentionally designed to align with it, ensuring a straightforward and user-centric experience. By meticulously crafting these task flows, I aimed to streamline the user journey and enhance the overall usability of Earthly Emanants' website.

After working with stakeholders at Earthly Emanants, we were able to bring together two primary colors, burnt orange and green, that fit their brand aesthetic. The primary colors are used throughout the Earthly Emanants site design while the secondary colors are used to complement the site.

Before working together, Earthly Emanants knew they wanted to use Poiret One as their primary font. Together we chose a sans-serif typography as the secondary font for this project as it matches the brand identity.

Before working together, Earthly Emanants provided me with various patterns that fit their brand and the style they are hoping to achieve. They asked that I consider using some of the patterns provided in a unique and creative way.

Earthly Emanants created their logo, provided their product and stock photography, and sent iconography they requested be used on the site.

• I used research and stakeholder criteria to create lo-fi wireframes in Figma 

• I presented my work, obtained feedback to produce mid-fi wireframes and hi-fi mockups

• The mid-fidelity wireframes I created I again presented for feedback and suggestions

A big portion of my work in iterating between wireframes came from secondary research. I observed several competitor brands as well as various e-commerce sites to determine best practices in developing the wireframes for Earthly Emanants. 

The wireframes acted as a crucial communication tool, enabling effective discussions with stakeholders, and fostering a shared understanding of the design direction and project vision. Between presenting to stakeholders, I gathered feedback and iterated multiple times before creating the final mockup. 

Some feedback included changing the hero section photo to be more lively rather than dark, changing the typography and weights, and drastically summarizing the website copy into smaller, more digestible sections. Additional feedback included small UI fixes.

Emphasizing user flow and information hierarchy, the wireframes facilitated an intuitive navigation experience, encouraging users to seamlessly explore Earthly Emanants' offerings. 

Throughout the design process, every decision was driven by a deep understanding of Earthly Emanants' target audience, ensuring that the design resonated with their preferences, needs, and behaviors. By incorporating user personas and feedback-driven refinements, the wireframes evolved into a user-centric design, seamlessly guiding visitors toward their goals and ensuring an enjoyable browsing experience.

In making design decisions, I employed consistent and familiar interface patterns, ensuring users could easily navigate and interact with the platform. Additionally, in striving for accessibility, I meticulously adhered to accessibility guidelines, ensuring that the design was inclusive.

Upon completing the prototype, I met with users to work through desirability testing. After, I completed a few additional minor iterations to complete the product. 

• I connected with various potential users who fit the persona to complete desirability testing  

• I interviewed eight people who selected six adjectives from a list of 17 adjectives to describe each page of the site. The results can be seen below.

• The adjectives most often selected by the participants across the entire site include clean, creative, desirable, engaging, exciting, familiar, and organized.

• Additional feedback included: 

      • adding a home button to the navigation bar

      • enlarging the logo in the menu

      • changing UI for accessibility 

      • including more distinct sections on the "Our Story" page

• Upon receiving the above feedback, I iterated again, changing what potential users noted as pain points, before presenting the product for approval  

This project had a unique set of challenges in that Earthly Emanants was a small, up-and-coming business with no current website. They had a few ideas they shared as to what they were looking for, but much of the creativity was left to me as the designer. How exciting!

Luckily, stakeholders at Earthly Emanants were quick to provide feedback and suggestions throughout the process in addition to the elements they wanted to see included. I was able to incorporate some of their inclusions and provide them with suggestions as to how we could improve my low-fidelity wireframes based on user needs.

I will bring the expertise I gained here during the testing phase to bring additional, pertinent desirability testing questions to the testing phase of my next project.

As I worked with Earthly Emanants, I gained experience communicating user needs with stakeholders. I was able to provide feedback and suggestions as to how to make their site accessible while meeting their expectations. They wanted a clean, modern site that would be enjoyable to visit. Because I was given significant creative liberty, I was able to provide them with multiple iterations and provide tangible user feedback suggesting to the stakeholders what my professional suggestions were as a researcher and designer. I will continue to use these skills as I proactively communicate with future clients.