top of page

CraftWEB Website Design

CraftWEB is a fictional free online platform for users to access and view art tutorials. They both publish official videos by their highly-trained staff and also allow for users to upload their own videos. Reliability is their number-one priority, so they have clear user guidelines and rating systems in place. Their target audience is inexperienced artists looking for reliable art tutorials.

Project duration:

December 2021 to January 2022

website mockups.jpg

<a href='https://www.freepik.com/psd/mockup'>Mockup psd created by freepik - www.freepik.com</a>

Project Overview

The Problem:

Popular video-sharing sites are populated with many scam videos that can waste people’s time and, in some cases, put users in danger if these tutorials are followed.

The Goal:

Create a website that prioritizes creating real, helpful art tutorials that can be accessed without a subscription or fee.

My role was the UX designer designing a website for CraftWEB from conception to delivery. My responsibilities included conducting interviews, paper and digital wireframing, low and high-fidelity prototyping, conducting usability studies, accounting for accessibility, and iterating on designs.

User Research

My research consisted of conducting interviews and creating personas from those interviews to determine what the user groups for this website would look like. One main user group identified was younger artists who wanted to have free access to videos they could trust.

 

These interviews revealed that users thought the rating system and the like/dislike system were helpful, although they wanted to see even more distinction in the ratings so that they knew how reliable a user was in multiple categories.

User Pain Points
circle.png

1

Subscription Fees

Users did not want to pay for art schools or other platforms for more in-depth instruction. In response, the design was adapted to include ad spaces that will allow users to monetize videos while keeping the platform free.

circle.png

21

Content Farms

Users did not like that on other free platforms like YouTube, there are no regulations to stop content farms from creating fake videos that can be potentially harmful. The rating system was implemented to avoid this.

circle.png

3

Not enough info

Users wanted to know more about who would be making the art tutorials. An identifying mark was placed next to the names of users who work for the company so that they will be easily identifiable.

Persona and User Journey

Problem statement:

Stefani is a young aspiring artist who needs affordable and reliable access to art tutorials because they want to expand their skills without wasting money or being scammed by fake tutorials.

Google UX Design Certificate - Persona [Template].jpg
user journey 2.jpg

Mapping out Stefani’s journey showed the importance of ratings as well as lots of categories to search by.

Sitemap

The sitemap was designed in response to the user journey, including lots of search options as well as information about the creators to bolster reliability.

Sitemap.jpg

Paper and Digital Wireframes

I created paper wireframes to think of how to incorporate important functions in each screen of the website design. These wireframes became the basis for the mockups later.

CamScanner 01-01-2022 17_edited.jpg
CamScanner 01-01-2022 17_edited.jpg
CamScanner 01-01-2022 17_edited.jpg

To make the designs responsive, I created more paper wireframes for mobile screens.

lofi about us.png

Company’s mission statement to build reliability

Because reliability was such an important point for users, an About Us page that explains both the aims of the company and the people working there was included.

List of official creators for transparency about employees

On creator’s profiles, they have a rating that users can use to determine if they are trustworthy. Creators can also decide what content to show on their page, like their liked videos and creators they subscribe to.

A rating that allows users to see if a creator is well-liked

lofi profile.png

Users can see other content that creators post, allowing them to find more content they enjoy

craftweb lofi 1.png
craftweb lofi 2.png

To make the website responsive, designs were also made for mobile versions of the screens.

Low-Fidelity Prototype

The low-fidelity prototype mapped out the process of finding and watching a video with all of the necessary screens. This prototype was used in a usability study.


Website prototype: https://xd.adobe.com/view/29cc3a1b-f656-4330-8d1f-80e86d345b0c-7c9f/?fullscreen

craftweb lofi prototype.png

Usability Studies

I conducted a usability study on the low-fidelity prototype. The results of this study were used to inform the design of the high-fidelity prototype.

Parameters:
usability study.png
circle.png

1

Filter option
circle.png

21

Distinction between creators

Users wanted to see a difference between videos published by official creators and general users.

circle.png

3

Spacing

Users did not want to scroll to see the full welcome image on the homepage.

The filter option, which was originally only present in the browse tab, should be present everywhere there is a search bar.

Refining the Design

A star symbol was put next to the creator’s names when they were official members of the company in order to distinguish them.

Before usability study
lofi featured.png
After usability study
hifi featured.png

The home page was reordered and condensed so that the welcome image would be fully visible without scrolling.

Before usability study
After usability study
lofi home.png
Homepage – 4.jpg

Final Mockups for User Flow

Screen size variations

High-Fidelity Prototype

The high-fidelity prototype incorporates feedback from the first round of testing and has fully functional navigation.

Web prototype: https://xd.adobe.com/view/1542c3e6-0f0b-4dce-918f-1f0a2ee474cc-4011/?fullscreen

Mobile prototype: https://xd.adobe.com/view/570b2931-c304-48f3-afa7-3f0b4c0c07af-0258/?fullscreen

Accessibility Considerations

circle.png

1

Made text comply with accessibility standards

circle.png

21

Included lots of images and large text to make the site easier to read

circle.png

3

Used clear headers for screen reader accessibility

Takeaways

Impact

This website makes it easier for users to find art tutorials that are of good quality. It also gives them a platform to post their own videos and find an audience.

 

One quote from the usability study:

“Oh, a user rating! Good. I want to know if people are reliable before I trust their comments.”

What I learned

This project taught me the importance of responsiveness in websites. I learned that it’s important to do more than just resize elements to make them fit on a page in order to make them legible on several screen sizes.

Next Steps

1. Conduct a second usability study to see if the design of the website is appealing to users.

2. Perform more research to make sure the website fulfills user’s needs.

Thank you for reviewing my work on the CraftWEB website!

bottom of page