Conscious Cups Project Overview - 4 weeks/ 40 hours

Conscious Cups is a media and e-commerce community focused on personal wellness. Users use dynamic NFTs in the form of cups to earn credits based on how much they invest in their personal wellbeing. Credits can be spent in the Conscious Cups marketplace. My team was recruited for this project to support Conscious Cups in researching and wireframing the onboarding content feed and product store for Conscious Cups' users to have a streamlined and engaging experience on the platform. 

To get started we met with the co-founders of Conscious Cups to get the scope of the project and what they expected of us in terms of deliverables and final product. They had already completed about half of the platform and therefore had a rough style guide in place. For the various features we would be working on for them, the co-founders had very clear ideas of what they wanted this to look like and directed us to several examples of existing sites they wanted Conscious Cups to look like. 

My Role

My team decided that we should break the assignment up into sections and tackle it that way; however, we all contributed to designing the onboarding flow. My role here was to design a feature that prompted users to enter their interests to enable Conscious Cups to personalize the platform for them. 

After working together to complete the onboarding, we broke the rest of the project up into two sections. My teammates tackled the store/rewards and I undertook the editorial section. My role here was to design a newsfeed that:

• Recommended article for the user

• Displayed trending articles

• Filtered for articled on Fitness, Mindfulness, Nutrition, Beauty, Finance, Sustainability, and Conscious Cups specific news

• Spotlighted of products on the store, services on the store, articles written by ambassadors, and articles written by community members

Getting Started

The co-founders had a clear vision for the look and vibe of the platform and its individual sections. They provided us with examples from existing sites that they wanted us to use for inspiration when designing for Conscious Cups. For the onboarding flow, they wanted to mimic the look and feel of a social media/dating app.

For my role designing the “add interests” section, I used the screenshot to the right from Bumble’s onboarding flow. The directions and feedback I was given was to replicate the look and elements on this screen within the parameters of Conscious Cups style guide. 

First Iteration

Because the co-founders had about half of the platform designed already, and since they had such a clear vision of what they wanted this to look like I was able to skip several steps such as research and sketching and move right into mockups. For the onboarding flow it was simple and straightforward.

I started with the first image that they requested my design be as similar as possible to while using their style.

Now onto the editorial section. After designing some rudimentary frames, I had a one-on-one with one of the co-founders to talk about the user flows and site map. We discussed the different sections that would be involved and how best to lay them out for the user to easily access info they needed.

After this meeting and putting together rough user flows and a site map, I fleshed out my designs to incorporate all of the aspects that we had discussed into the editorial flow. Below are examples from the first iteration. I created several different options for them to choose from based on a color theme, light theme, and dark theme. The first screens represent the home page where people would see a list of articles for three different sections; trending, for you, and conscious cups news. The second set of screens are the dropdown menu from which users can navigate to articles on a specific subject.

The co-founders decided they wanted the menu spruced up a bit and decided to mimic the menu from the store section of Conscious Cups. 

Testing and Iteration

This project was not budgeted for any user testing. We met as a group with the co-founders, discussed our designs, and then made changes as necessary. After completing my first set of designs, I was unhappy with the way they looked so, on my own time, I showed my designs to several friends to ask them what they thought of them and what they might do differently. The best feedback that I got was that they wanted to see larger pictures but liked being able to scroll from one article to another. As a group they also reported that they found the page to be a bit distracting; there was too much going on. I took this feedback and went back to the “drawing board”. The second iteration featured large full screen images with the title and description of the article lay out over the bottom of the image. I sent the co-founders a mock-up of my new design and they loved it. 

Below is a screenshot of the first mockups I sent them as alternatives to the color, light, and dark screens. 

Final Deliverables

Now that we had a look and feel that we all loved for the editorial section I continued designing the rest of the flow. The biggest challenge I faced was prototyping a full screen scroll that would go from one article to the next, back and forth. I had learned some basic prototyping from past projects, but for this one I had to delve deep into Figma tutorials. It took a long time to find what I needed but I ended up finding a similar example of what I needed on youtube and was able to complete the prototype for our final meeting and presentation.