CraftCircles phone mockups.

CraftCircles

UX/UI Design Case Study
Project Overview
Many people are learning new skills through online spaces with increased accessibility to the Internet. Starting is easy but refining and building upon those skills is harder. I would like to explore ways to help remote learners to receive feedback on their projects and learning progress because it’s hard for them to tell if something is right or wrong for skills that are subjective in nature.
How might we help remote learners feel confident that their projects and learning progress are going in the right direction?
Image of Jake the dog from Adventure Time.

"Dude, sucking at somethin' is the first step to being sorta good at somethin'"

- Jake the dog from Adventure Time
Introducing
CraftCircles
CraftCircles is the solution I created that serves as an online platform that fosters a vibrant community for craft enthusiasts. It provides opportunities to share projects, learn new skills, and connect with like-minded individuals through clubs, meetups, workshops, and creative challenges, all within a joyful and welcoming environment.

My role

End-to-end UX/UI designer

Tools used

  • Figma
  • FigJam
  • Vowel
  • Miro
  • Optimal Workshop
  • Maze
  • Clip Studio Paint
  • G Suite

Duration

February 2023 - June 2023

Research

Competitive analysis
What was lacking?
  • An active support community
  • Constructive feedback on work
  • Content for hobbyist skills

User interviews

5 participants interviewed remotely are people who:
  • Have experience learning a new skill via online services
  • Would like to learn a new skill via online services
  • Have started to learn a new skill but didn’t finish or gave up in the middle
Interview goals & objectives
  • Understand the users’ motivations and goals in learning a new skill
  • Explore users’ learning process and discover challenges they face along the way
Affinity mapping - Key insights
  • All participants preferred some sort of interactive, hands-on, project-based learning.
  • All interviewees feel that success in learning a new skill is defined by self satisfaction rather than becoming an expert or gaining mastery over the skill, which tells us that mastery is not the primary goal.

Define

User persona - Audrey

Storyboard

I drew up a storyboard to visualize how a user may use CraftCircles to achieve their goals and to identify key preliminary screens and features.

Sitemap

I conducted an open card sort with 8 participants. I chose to go with an open card sort because I wanted to give my participants a high degree of freedom. The card sort helped construct the final sitemap by identifying the main categories for the site navigation. However, in hindsight, an open card sort might not have been the best idea because giving participants free reign to create their own categories resulted in many that were similar in definition (ex. community & feed; activities & events). If I had another chance, I would conduct a hybrid card sort instead because it may provide clearer and more standardized results since coming up with categories is not always easy.

User flows & Task flows

I made user flows and task flows in FigJam to visualize full user journeys and potential alternate paths. These were especially important in identifying key screens for wireframing and interaction design. The key screens are represented by the blue rectangles that identify pages the user will have to interact with.
The user flows illustrated two scenarios: 
  1. Audrey decides to join an online meetup for papercrafts so she can share her current project, see what others are working on, or seek collaboration opportunities.
  2. Audrey decides to go to a club about papercrafts so she can upload her work and get some feedback on her project.
From the user flows, I made three main task flows shown above which were attending a meetup, joining a club, and uploading content.

Design

Branding

Creativity, enjoyment, inspiration, passion

Logo

Font: Bloo Da 2, bold, -2.5%
The inspiration for the logo stemmed from the brand values. I wanted a logo that represents bright, happy, sunny, and friendly vibes. And so, I chose to have three polygon shapes surround the letter C like sun rays. It can also be viewed as representative of confetti or sparkles.

Color palette

The color palette consists of warm tones for a welcoming and friendly feeling. Purple is used as an accent color for contrast.

Icons

I created six custom icons in addition to the ones chosen from Font Awesome’s free icon library. The “my projects” and “post CTA” icons both include three polygon shapes that are consistent with the logo for brand identity.

Wireframes

Low-fidelity digital sketch ideas done in Clip Studio Paint
Mid-fidelity wireframes built in Figma
High-fidelity wireframes built in Figma

Usability testing

Prototyping

I built a prototype in Figma to illustrate two full task flows for usability testing.

Usability test

Tasks tested
  • Find a meetup for papercrafts and reserve a spot to attend
  • Find a club and join
  • After joining, make a post in the club
Research goals
  • Find out if the platform functions are easy to use
  • Understand the steps taken to complete each task
  • Identify any usability issues in completing each task
  • Identify how users feel about the overall platform in terms of look and functionality
Metrics
  • Time on task - time taken will tell us whether the task was straightforward or not
  • User error and success rates - will give insight about the overall usability
  • User’s overall feelings about using the platform
Methodology
  • The test was conducted using maze
  • Unmoderated
  • 8 participants
  • Tasks and open ended questions

Results at glance

Task 1: Find a meetup for papercrafts and reserve a spot to attend
This task can be considered as a success as all users completed. Feedback from the open ended questions revealed that participants found this task to be “easy” and “straightforward."

Task 2a: Find a club and join
This task yielded an unsuccessful result because only 2 out of 8 users were able to complete it. The issue identified was that alternate paths were not considered in the prototype. In other words, buttons that were expected to be clickable were not. 

Task 2b: After joining a club, make a post in the club
This task was successful since 6 out of 7 users (1 user dropped off on the test) were able to complete it. The users completed the task via the direct path identified. This task also had the fewest screens.
Using comments and answers from open ended questions, I organized all the feedback into a grid on Miro. I identified what worked, needs changing, participants’ ideas, and participants’ questions.
From there, I organized the information in the change, ideas, and questions sections into different categories through affinity mapping. It helped me identify patterns, issues, and determine how many participants experienced the issues.
Using the issues identified, I further sorted them into a MoSCoW prioritization matrix to identify urgent fixes based on value and effort. From the matrix, I planned my next steps which would be to implement quick fixes and other fixes if there was time. The high value, low effort issues are mostly UI design related and can be done quickly. The high value, high effort issues could benefit from further testing such as A/B testing for the presence or absence of a component.

Revisions

I changed the shade of the pills to a lighter purple because this color issue is related to readability and therefore accessibility. It was important for me to fix this right away. The other changes included spacing, shadows, and other UI related aesthetics that I believe will not require further testing since they are not huge changes.
The presence or absence of the search bar on the club details page may benefit from A/B testing to see which one users would prefer and why.

Final Takeaways

This was a very cohesive project that went through the steps of end-to-end design thinking in UX design. I learned a lot throughout each stage especially through the prototyping and usability testing steps and will carry on my insights to future projects so I can improve on those skills.

Challenges

Working with constraints
  • Time - there was no time to do additional rounds of usability testing or other testing
  • Resources - this was a solo project
  • Strict schedule - adhering to a strict schedule meant that I had to make decisive design decisions so that I could move on to the next steps
Usability test via maze
  • This was my first time using maze and the test definitely could have been done better
  • I realized that some instructions may have been unclear, especially for task 1 which was to “find a meetup for papercrafts and reserve a spot to attend.” This task had the most screens and might have been better broken up into two parts.
From this first project, I learned that every stage of design thinking builds up and feeds into the next. If I had more time, I would do a second round of iterations on my high-fidelity screens and prototypes then conduct a round of A/B testing for some of the changes. Overall, I’m pretty happy with the final result especially since this was my first run at designing a product end-to-end.
Back to home