UX DESIGN

VibeDesign

VibeDesign is a cutting-edge design tutorial website that fosters learning and collaboration for artists at every skill level. Our goal for this project was to create a responsive web design that strikes a balance between familiarity and empowerment, providing users with an engaging and delightful experience. The platform offers an array of features including both desktop and mobile accessibility, an interactive digital artboard, a vibrant art community, opportunities for learning, and challenges to help artists grow.

CATEGORY

VibeDesign

CLIENT

Various

COMPLETED

October 31, 2023

Kickoff

Our goal in this project was to establish a responsive design tutorial website that seamlessly blends familiarity with cutting-edge features. We aimed to provide users with algorithm-recommended tutorial suggestions, AI-generated design prompts and inspiration, weekly design challenges, and a vibrant design community catering to artists of all levels. To accomplish this, we employed qualitative research methods, such as conducting a kickoff meeting, performing a competitive analysis, engaging in stakeholder interviews, and developing essential persona hypotheses. It all started with us delving into some fundamental questions:

Who is are our main userbase?
What is the most crucial need for our primary users?
What challenges could we face moving forward?
Who do we see as our biggest competitors?

We took a look at our usability studies and found that they yielded the most valuable insights. Using this information, we created and dissected tasks into high-level goals, concentrating on streamlining efficiency, enhancing processes, and enriching the overall user experience. By understanding the preferences and challenges faced by our diverse user groups, we were able to identify specific user goals and recognize how aligning them could drive our business objectives forward.

Meet the Users

Our 1st user, Christina.
Our first user, Christina.

Name: Christina

Age: 27

Occupation: Freelance Designer and Illustrator

Christina is a 27 year old freelance graphic designer from Miami, FL. She specializes in creating vibrant and culturally rich visual content. Her portfolio showcases a diverse range of projects, from branding for local businesses to commissioned artwork for private collectors. She is interested in a place to write tutorials for some of her techniques to share with others in the art community.

Our 2nd user, Ian.
Our second user, Ian.

Name: Ian

Age: 32

Occupation: CompSci professional

Ian is a 32 year old computer science professional who lives with his partner in San Francisco. He wants to make the switch to UX design full-time, as design is a passion of his since childhood. He has been taking online courses and building a portfolio in his spare time to build his skillset. He is interested in a website where he can not only learn, but work with others and share his work with peers to advance his career change.

Competitive Analysis

We checked out a bunch of other design tutorial sites and did a deep dive into what they're good at and where they could use some work. VibeDesign has a cool opportunity here to take all that info and offer a one-stop shop that combines the usual design tutorials with a thriving art community, learning and teaching experiences, and plenty of sharing. The goal is to make sure our users have a blast while they're learning.

While most of the features among our competitors were quite similar, the primary differences we found were:

  • Sensible Tutorial Categories vs No Categories
  • Familiar Tutorial Website Layout vs Unfamiliar
  • Design Community vs No Community
  • Algorithm-Based Tutorial Recommendations vs None
No items found.

Preparing the Journey

We developed a comprehensive user journey that encompasses the process of selecting and viewing design tutorials, from initial engagement to completion. This strategic approach provides us with valuable insights into user interactions with our product and offers a clear understanding of the pathways users follow to achieve their objectives.

Next, we translated our concepts into paper wireframe sketches. This initial step helped us visualize the early stages of app design.

Next, we moved from our initial paper wireframes to digital ones using Adobe XD. This transition allowed us to convert our concepts into low-fidelity digital wireframes, marking the beginning of our process to outline the initial user flows.

Iteration

Once we had our prototype made using basic wireframes, we got together with 5 different people and had them try out various scenarios in the prototype. The goal was to collect valuable feedback that we can use for the next round of design improvements.

1. Clutter.

Having too much clutter on a website can be distracting and off-putting for users. Keeping the website design clean and uncluttered is crucial to ensure a comfortable and enjoyable user experience.

2. Outdated Look & Feel.

Some users commented that the initial prototypes had an outdated appearance and the excessive use of buttons felt overwhelming. They expressed a preference for a cleaner, more modern, and streamlined look.

Challenge 1

Clutter.

Excessive clutter can be visually overwhelming and distracting. We made a deliberate effort to minimize clutter throughout the website, especially on the mobile platform, aiming for a cleaner and more user-friendly viewing experience. This largely involved removing unnecessary icons and simplifying the color scheme.

Challenge 2

Outdated Look and Feel.

Maintaining a modern look and feel is crucial for the design community, which is why it was important for both the desktop and mobile websites to embody that aesthetic. We made adjustments to certain design elements to create a more refreshed appearance, all while further simplifying the overall look.

Style Guide

We opted for a darker color scheme for VibeDesign to communicate a contemporary and user-friendly atmosphere to our users. Our aim was to create a relaxed learning environment, ensuring that users feel at ease and comfortable while engaging with the platform.

No items found.

Prototype

Takeaways

Art holds a special place in the lives of many, and facilitating a new avenue for learning, teaching, and community-building among artists is paramount. The VibeDesign project embodies my commitment to delivering a user-friendly yet innovative experience for artists at every skill level. This entire journey has served as a valuable lesson in UX design, and I look forward to applying the insights gained here to future projects. The process of creating user personas, addressing challenges, and integrating solutions into the design has proven to be a highly rewarding approach, benefiting not only the end-users but also the business.