Product:

Let It Flow End-to-End App

Industry:

Arts & Crafts

Challenge:

To develop a MVP End-to-End app specifically for epoxy resin enthusiasts. Key Features to include Social Feed, Resin Calculator, Classes, Notifications, and Profile.

My Role:

UX Researcher, UX/UI Designer, Content Creator, Logo & Brand Identity Creator

Project Time:

80 Hours

Let it Flow case study cover

Overview

Epoxy resin has seen a huge surge in popularity among makers and artists in recent years, with the market estimated to reach $10.3 billion by 2027. It can be used for a variety of projects from jewelry to wind power and aerospace, and for makers and artists, it can be used to create wall art, jewelry, home goods, and furniture. This surge in popularity has seen the rise of resin art groups, Instagram posts, hashtags, and how-to videos, with many beginners just starting out and many pros who have mastered the craft. Usability tests have highlighted the need for more online resources and tools to help makers and artists learn the craft, leading to the development of a new app.

There is a deep desire from many to learn how to use epoxy resin and others who work to master their skill. The Epoxy Resin market was valued at $5.9 billion in 2019, and its projected to reach $10.3 billion by 2027.
Venue responsive design case study cover

Project Goals

Since tools and resources are so scattered, an app for epoxy resin artists and makers could help solve the problem by bringing it all together in one place where members feel comfortable sharing and learning.

Project Goals:

  • To design a MVP End-to-End app within 80 hours
  • To create an experience for this group to socialize, learn, and easy access to tools
  • To design the branding for this app
  • To bring a community of epoxy resin enthusiasts together

Key Features:

  • Social Feed, Messaging, Resin Calculator, Classes (videos and live online sessions), User Profile
Since tools and resources are so scattered, an app for epoxy resin artists and makers could help solve the problem by bringing it all together in one place where members feel comfortable sharing and learning.
EMPATHIZE

User Research

In my user research, I validated that there is a desire for an app for epoxy resin artists/makers. Most research participants were categorized as beginners but I had a handful of more experienced makers participate as well. The desire is strong to include a social media feature as well as classes and an epoxy resin calculator.

Beginner or Experienced?

  • 94.1% of participants had experience
  • 52.9% of participants were “beginners”
  • 17.5% were “very experienced”
  • 11.8% were “somewhat experienced”
  • 11.8% were “a professional”
Graph showing how level of experience users are

User Research

In my user research, I validated that there is a desire for an app for epoxy resin artists/makers. Most research participants were categorized as beginners but I had a handful of more experienced makers participate as well. The desire is strong to include a social media feature as well as classes and an epoxy resin calculator.

Platform beginners used for learning about epoxy resin

  • 75% use YouTube
  • 18.8% use Instagram
  • 6.3% use Facebook with links to YouTube

Graph showing how many users would enjoy learning tips

User Research

In my user research, I validated that there is a desire for an app for epoxy resin artists/makers. Most research participants were categorized as beginners but I had a handful of more experienced makers participate as well. The desire is strong to include a social media feature as well as classes and an epoxy resin calculator.

Willing to post epoxy resin creations on social media

  • 71% would post their creations to social media
  • 19% “might” post to social media
  • 10% would “not” want to post to social media

User Research

In my user research, I validated that there is a desire for an app for epoxy resin artists/makers. Most research participants were categorized as beginners but I had a handful of more experienced makers participate as well. The desire is strong to include a social media feature as well as classes and an epoxy resin calculator.

Would you enjoy learning tips and techniques from other makers?

  • All participants leaned toward wanting to learn from other makers
  • 81.3% would like to learn from other makers
  • 18.8% “might” want to learn from other makers
In my user research, I validated that there is a desire for an app for expoxy resin artists/makers. The desire is strong to include a social media feature as well as classes and an epoxy resin calculator.
Venue responsive design case study cover

Competitive Research

Through my competitive research, I discovered a handful of apps that provide instruction in a variety of art and design related topics.

Of the 4 apps, 1 app offered 4 classes in epoxy resin, 1 offered 2 classes, and the last offered 1 class. The classes offered were mostly for making jewelry and interesting inlays. None of them covered the vast array of epoxy resin applications.

Only 1 app offered a social feed along with classes but only after a member subscribes. That same one also offered online events but did not seem to be updated any time recently.

My research concluded that there is a strong market for epoxy resin classes and a need for a new platform to host them.

My research concluded that there is a strong market for epoxy resin classes and a need for a new platform to host them.
DEFINE

Persona:
Meet Angela Moore

Angela is a 32 year old married woman who is a Pacific Northwest Native. She lost her job due to the pandemic and is now taking advantage of the time she has to follow her dreams. She has always followed artists she loved on YouTube, Instagram, and TikTok and has had a desire to learn more about working with epoxy resin. She has dabbled in using it some and considers herself a beginner. She tends to get overwhelmed with the amount of information that is online and has found there is no real one-stop-shop to learn all things about epoxy resin. She would like to eventually sell her work on Etsy and at craft shows once she improves her skill and learns a few things about running her own business.

Persona:
Meet Angela Moore

Angela is a 32 year old married woman who is a Pacific Northwest Native. She lost her job due to the pandemic and is now taking advantage of the time she has to follow her dreams. She has always followed artists she loved on YouTube, Instagram, and TikTok and has had a desire to learn more about working with epoxy resin. She has dabbled in using it some and considers herself a beginner. She tends to get overwhelmed with the amount of information that is online and has found there is no real one-stop-shop to learn all things about epoxy resin. She would like to eventually sell her work on Etsy and at craft shows once she improves her skill and learns a few things about running her own business.

Persona:
Meet Angela Moore

Angela is a 32 year old married woman who is a Pacific Northwest Native. She lost her job due to the pandemic and is now taking advantage of the time she has to follow her dreams. She has always followed artists she loved on YouTube, Instagram, and TikTok and has had a desire to learn more about working with epoxy resin. She has dabbled in using it some and considers herself a beginner. She tends to get overwhelmed with the amount of information that is online and has found there is no real one-stop-shop to learn all things about epoxy resin. She would like to eventually sell her work on Etsy and at craft shows once she improves her skill and learns a few things about running her own business.

She feels there is so much information in so many places online and wished there was something just for epoxy resin artists. She has downloaded several creative apps only to find they fall short on the classes and lessons she would really want to take focusing on epoxy resin techniques.
Venue responsive design case study cover

Sitemap

Once all research concluded, I moved on to create the sitemap for the “Let it Flow” app.

One big focus was to keep it as simple as possible while providing enough information for the user to post to the social feed, use the tools, take a class, check notifications, and update their profile.

I split the sitemap up into 2 categories:

  • Main Navigation to include the most used components
  • Utility Navigation for all other information that is still important but may not be needed immediately
One big focus was to keep it as simple as possible while providing enough information for the user to post to the social feed, use the tools, take a class, check notifications, and update their profile.

Task Flow

Once the Sitemap was complete, I needed to ensure the flow of posting to the social feed as well as finding and taking a class were easy to navigate. Since there are other apps that provide classes, it was important to provide a good experience and safe space so users feel they can trust the app.

I put 2 flows together:

  • One to post to the social feed
  • One to find and take a class
Let it Flow case study cover
Since there are other apps that provide classes, it was important to provide a good experience and safe space so users feel they can trust the app.
IDEATE

Logo Design

Since this app was a new design, I had to create the name, the logo, and the branding. For the logo, I started with a variety of sketches, then refined my ideas, and finally came to a logo that fit the needs of the app.

I knew I wanted an icon I could incorporate into the app as the “classes” navigation icon so I had to make sure it was simple enough and that it could be reduced in size and still be recognizable.

Logo Design

Since this app was a new design, I had to create the name, the logo, and the branding. For the logo, I started with a variety of sketches, then refined my ideas, and finally came to a logo that fit the needs of the app.

I knew I wanted an icon I could incorporate into the app as the “classes” navigation icon so I had to make sure it was simple enough and that it could be reduced in size and still be recognizable.

Logo Design

Since this app was a new design, I had to create the name, the logo, and the branding. For the logo, I started with a variety of sketches, then refined my ideas, and finally came to a logo that fit the needs of the app.

I knew I wanted an icon I could incorporate into the app as the “classes” navigation icon so I had to make sure it was simple enough and that it could be reduced in size and still be recognizable.

I knew I wanted an icon I could incorporate into the app as the “classes” navigation icon so I had to make sure it was simple enough and that it could be reduced in size and still be recognizable.

UI Design Kit

The UI Design kit was created with all the necessary fonts, color palettes, type settings, buttons, icons, navigation, and cards.

  • The logo was kept simple with the icon as the highlight. The icon here was used as the icon for "Classes" in the app.

UI Design Kit

The UI Design kit was created with all the necessary fonts, color palettes, type settings, buttons, icons, navigation, and cards.

  • I chose a color palette that leaned toward the blues in reference to water or epoxy resin in a liquid state.

UI Design Kit

The UI Design kit was created with all the necessary fonts, color palettes, type settings, buttons, icons, navigation, and cards.

  • The font, Inter, was chosen for it’s tall x-height, several OpenType features, being a san-serif and modern font, and, lastly, since it was designed specifically for computer screens.

UI Design Kit

The UI Design kit was created with all the necessary fonts, color palettes, type settings, buttons, icons, navigation, and cards.

  • The navigation and buttons were designed for simplicity.


UI Design Kit

The UI Design kit was created with all the necessary fonts, color palettes, type settings, buttons, icons, navigation, and cards.

  • The navigation and buttons were designed for simplicity.


UI Design Kit

The UI Design kit was created with all the necessary fonts, color palettes, type settings, buttons, icons, navigation, and cards.

  • The icons were chosen to help the user identify various aspects of the app. They were also kept simplistic for ease of use.


UI Design Kit

The UI Design kit was created with all the necessary fonts, color palettes, type settings, buttons, icons, navigation, and cards.

  • Finally, the cards were designed to ensure users could quickly and easily find courses they were interested in without having too much information displayed at once.
The UI Design kit was created with all the necessary fonts, color palettes, type settings, buttons, icons, navigation, and cards.
PROTOTYPE

Wireframes

I started sketching out my ideas first then began to refine them on the computer. My goal was to keep the screens simple and user friendly.

  • For the HOME screen, I knew I wanted to incorporate a social feed with stories and posts with allowable comments. Likes would only be seen by the user. As for the navigation, I wanted a very simple menu with icons and a hamburger icon for information that was not readily needed. I also included the kabab menu for additional options per post (i.e. share the post, report post, block user, etc).

Wireframes

I started sketching out my ideas first then began to refine them on the computer. My goal was to keep the screens simple and user friendly.

  • The RESIN CALCULATOR was designed as simplistically as possible as one form with only a few fields to fill in to get the results.






Wireframes

I started sketching out my ideas first then began to refine them on the computer. My goal was to keep the screens simple and user friendly.

  • The CLASSES screen was designed with a simple solution in mind. The user would scroll horizontally within the topic of their choice.





Wireframes

I started sketching out my ideas first then began to refine them on the computer. My goal was to keep the screens simple and user friendly.

  • The NOTIFICATIONS screen was designed as a scrolling chronological list.







Wireframes

I started sketching out my ideas first then began to refine them on the computer. My goal was to keep the screens simple and user friendly.

  • The PROFILE screen would allow users to add to their story, change their profile pic, view their posts, view their followers and who they are following, as well as edit their profile.



I started sketching out my ideas first then began to refine them on the computer. My goal was to keep the screens simple and user friendly.

High Fidelity UI Design

Once my wireframes were complete, I started filling in my design and elevating it to a professional state. The wireframes were detailed enough that only minor changes were needed as I was building the app.

As part of the update, I added new icons to the navigation. The one I used for “classes” was an important change since I moved from a lightbulb to the icon from the logo.  

The app really took shape as I tightened everything up. Once all was finalized, I created the prototype and got it ready the usability testing phase.

High Fidelity UI Design

Once my wireframes were complete, I started filling in my design and elevating it to a professional state. The wireframes were detailed enough that only minor changes were needed as I was building the app.

As part of the update, I added new icons to the navigation. The one I used for “classes” was an important change since I moved from a lightbulb to the icon from the logo.  

The app really took shape as I tightened everything up. Once all was finalized, I created the prototype and got it ready the usability testing phase.

High Fidelity UI Design

Once my wireframes were complete, I started filling in my design and elevating it to a professional state. The wireframes were detailed enough that only minor changes were needed as I was building the app.

As part of the update, I added new icons to the navigation. The one I used for “classes” was an important change since I moved from a lightbulb to the icon from the logo.  

The app really took shape as I tightened everything up. Once all was finalized, I created the prototype and got it ready the usability testing phase.

High Fidelity UI Design

Once my wireframes were complete, I started filling in my design and elevating it to a professional state. The wireframes were detailed enough that only minor changes were needed as I was building the app.

As part of the update, I added new icons to the navigation. The one I used for “classes” was an important change since I moved from a lightbulb to the icon from the logo.  

The app really took shape as I tightened everything up. Once all was finalized, I created the prototype and got it ready the usability testing phase.

High Fidelity UI Design

Once my wireframes were complete, I started filling in my design and elevating it to a professional state. The wireframes were detailed enough that only minor changes were needed as I was building the app.

As part of the update, I added new icons to the navigation. The one I used for “classes” was an important change since I moved from a lightbulb to the icon from the logo.  

The app really took shape as I tightened everything up. Once all was finalized, I created the prototype and got it ready the usability testing phase.

Once my wireframes were complete, I started filling in my design and elevating it to a professional state. The wireframes were detailed enough that only minor changes were needed as I was building the app.

Usability Testing

After creating my prototype in Figma, I built the usability test using Maze. To my delight, the results leaned positively, but I still had some work to do. There were 34 participants with a total of 73 comments. The comments helped steer the changes to this project.

There were 2 major fixes I implemented. Those were adding labels were added to the bottom navigation icons and I moved the "Post" button down where users thought they would find it.

Of the 73 comments there were...

SUCCESSES

47 (or 64% of total) positive statements:

  • Easy to follow”, “easy to navigate”, “I love it”, and “smooth experience were many of the comments made

OPPORTUNITIES

19 (or 26% of total) opportunity statements:

  • “Recommend the social feed can be cross-posted to other sites”, “could not find the calculator”, and “had a hard time tagging” were a few comments made

PAIN POINTS

7 (or 10% of total) pain point statements:

  • “I wouldn't know what the icons at the bottom meant without clicking through them a few times”.
  • “Couldn’t find the Post button”.
Let it Flow case study cover
After creating my prototype in Figma, I built the usability test using Maze. To my delight, the results leaned positively but I still had some work to do. There were 34 participants with a total of 73 comments.
Let it Flow case study cover

Conclusion

I was both excited and nervous about this project - excited because I was doing something I love for something I love. I created this project out of a secondary passion of mine; I am one of the many epoxy resin enthusiasts that could benefit and enjoy an app like this. I was nervous to start this project since it is so personal and solely my creation. I wasn’t sure what other epoxy resin artists and makers would think of this design. The positive comments that came from the usability testing were reassuring and felt great that many of them would like to see an app like this in the real world.

I learned a great deal working on this project. For one, I have always known that labels in the navigation are important, however, I did not take that too seriously until my users told me to. My original design did not have labels, only icons with the assumption that everyone would figure it out and get used to it. While true, adding the labels makes it that much easier and takes the guesswork out for the user.

It goes to show how very important user research and usability tests are. The users have the answers to all of the problems. We, as designers, just need to listen.