RHYTHM OF COLORS
(RESPONSIVE WEB DESIGN)

hero image of RC

Site overview

Rhythm of colors is a famous responsive website for finding and viewing the various art tutorials online with various supportive document and video saving facility for revise the tutorial video whenever required. Rhythm of colors provide subtitles for each video tutorial with more than 10 languages.Various downloadable document in PDF format is the main attraction for user while viewing any kind of tutorials. Rhythm of colors provide tutorial for acrylic, watercolor, oil, charcoal and digital painting. It also provide the online art context for joining the online art community and sharing the art idea among the members.

Project Goals

  1. To understand and determine the challenges, user facing while finding and viewing art tutorials.
  2. To give user access to download or save the tutorial documents into their online account for future use.
  3. To identify the overall experience of finding and searching a tutorial video online.

The Challenges

  1. Trying to solve the user problem while sorting the search option for any kind of the art tutorial.
  2. Adding subtitles for each of the video tutorials with an option to save the notes.
  3. Providing three mode of tutorial such as beginner, intermediate and expert.
  4. Allowing user to download the supportive tutorial documents.

Kick Off

I asked my self few questions before starting of the project,

  1. Who are the users and what are their backgrounds?
  2. Why I am going to design this responsive website and how could an user get engage with this?
  3. What are the benefit user will get from my responsive website?
  4. What are my scope during this entire project?
  5. How could I improve the entire design?
  6. What are the challenges I am going to face?
  7. How user can react to my final design?

My Responsibilities

As a UX designer i have more responsibilities but some are listed below,

  1. conducting the user research.
  2. Interviewing the participants.
  3. Creating paper and digital wireframe.
  4. sketching of sitemap.
  5. Creating low and high fidelity prototype.
  6. Creating Mockups.
  7. Conducting usability study and launching.
  8. Further modification based on user view.

Sitemap of Rhythm of colors

As a UX designer, it was a  main task for me to create a sitemap for Rhythm of colors. I was visited and observed the detail site structure of more than 18 art website for determine the basic, common and missing section related to art tutorial and i analyzed them and having my own creative skills to add most important section into my website design.

Thus i was added various tutorials and classified them as many section as per user needs. I arranged them from users point of view so that user can visit and view the required tutorial easily.

The completed sitemap design is as follow,

User Research Summary

I was conducted both face to face and online mode of interview to determine user needs for an art tutorial website. About 24 participants participated in this interview, and i divided them base on similarity which can represent a large group of user such as “persona”. I have created two persona i.e “Dev” and “Prachi” after that journey map was created and then statement of concern (problem statement and goal statement).

Primary Research Questions

  1. Can you please tell something about your background?
  2. How often do you like to draw art or any painting?
  3. How do you feel when you find your favorite art tutorial video and how do you feel when you did not find it?
  4. How long does it take you to sorting and viewing of tutorial video?
  5. How often do you used any online video for learning of art or painting?
  6. Can you elaborate the feelings when there is an option to download the supporting document and the feelings if there is no download option?

 

User Journey Map

A map show how an user moving through the entire process of operation in a website is known as user journey map. Here i was given series of task to Persona 1 and observe how she react to every steps and how did she feel during the entire process till completion.  I was noted down all the activity, feelings, body language of user into a sheet, which is attach below.

Statement of Concern

Statement of concern including the problem statement and goal statement. After creating user journey map, now comes the define phase to determine the problem user facing and determine the overall goal for user. Below are the problem statement and goal statement for persona 1 from my user research section.

Competitive Audit

Competitive audit is the way in which various competitor of Rhythm of colors were compare with each other through various parameters to determine the strengths and weakness of individual competitors. Here i come up with some week point from my competitors and i added them as a positive point for my website design.

Crazy 8 Principle of Brainstorming

Crazy 8 is the first principle of generate design idea where i was plotted 8 screen of my website, each one consisting of different actionable insight, in order to complete the user flow and their needs. Screen 1 represent home screen where user can find their required category of art tutorial video. Screen 2 represent category of all types of art tutorial such as, acrylic, watercolor, pencil, charcoal, 2d painting, 3d painting, pixel art and photo painting. Screen 3 represent sub category of the art tutorial video. Screen 4 represent viewing of selected tutorial video. Screen 5 represent the downloading of the tutorial video. Screen 6 represent the basic information about the website and all of its features. Screen 7 represent the series of downloadable video and documents. Screen 8 represent the login or signup option.

Closeup Story-board Ideation Principle

The story mode which represent the exact match to users needs from a website is known as closeup story mode. Here the complete mode of user flow is represent via a diagram to understand the main priority of an user while using a website or mobile application. Here there are six screen all represent different set of action that an user can perform while moving through the website process. Screen 1 to 4 represent the user action as per their needs while screen 5 and 6 represent the call to action for user.

Paper Wireframe

This is the first step towards creating a real looking website screen for rhythm of colors. Paper wireframe consisting of all the navigational screen and possibility of user action. Further this paper wireframe turned into digital wireframe and low fidelity prototype to send the wireframe for testing for any modification required.

Digital Wireframe

Conversion of paper wireframe into real looking website screen with realistic text view and layout planning for further designing the screen. Hence then, i added prototype and real content to convert the digital wireframe into high fidelity prototype mode.

High Fidelity Mocks

Process and Screen flow

Responsive Design

Prototypes

Challenges and Solution

Challenge 1

Providing the user all the art tutorial by sorting and grouping of tutorial video.

  1. In home page tutorial for manual art and digital art are grouped separately.
  2. Tutorial videos are also sorted on the basis of beginner, intermediate and expert.
  3. All high rated and current trending videos are sorted together.
  4. There are four sub category tutorial videos are sorted for both manual and digital art tutorial.

Challenge 2

Providing sub titles and downloadable sticky note option to be added for enhance user experience.

  1. Subtitles display more than 8 languages.
  2. Video quality also modified with modified position of subtitles.
  3. There is also an option to save the subtitles to online account and adding of a sticky notes when user watching the tutorial video.

Challenge 3

Providing three mode of tutorial such are, beginner, intermediate and expert.

  1. Beginner mode of tutorial added for each of the sub category of tutorial video.
  2. Intermediate mode of tutorial added for each of the sub category in order to provide knowledge and skills regarding intermediate class of art.
  3. Expert mode of tutorial added to each category to provide advance mode of art video.

Challenge 4

Providing the option to save the tutorial video.

  1. A clear video download option available in every tutorial video display page.
  2. All the downloaded video automatically saved to online rhythm of colors account.

Usability Study

Location - Remote

Date- 16 & 17th February

Each season of 1 hour

Total 6 participants

2 male & 4 female

Incentives- Gift vouchers and Shopping offer

Usability study research questions

  1. Do you have any passion in art and painting?
  2. Do you usually browse over internet for any art tutorial video?
  3. How many times do you visit any art tutorial website for searching for your desire  art video?
  4. How often do you choose  any category of art tutorial?
  5. how long is the overall tutorial running period?
  6. Do you feel anything while downloading the video or any documents?
  7. How easily do you ever find your saved or downloaded items?

Usability study research prompts

  1. Open up the Rhythm of colors website on your desktop or mobile and find the tutorial video you need? Do your best to talk to me through your thought process.
  2. After finding the tutorial video, trying to keep the note and read the subtitles.
  3. Try to download the supportive documents of corresponding art tutorial video?
  4. Finally go to your online account and open up the process of downloading the art tutorial video to your online account?
  5. How did you feel about the Rhythm of colors website on your mobile phone or in desktop? What did you like and dislike about it?

Usability study research findings

Based on the high fidelity prototype testing by various users, I found various thing that need to be iterate and update on current website. such findings are,
  1. User want a notification icon at top of website so that they can easily find their saved video and documents and they can easily access to them.
  2. User want a menu of searching and finding the similar art tutorial video directly from the video preview page.
  3. User want simplification to the searching process of art tutorial.
  4. User need downloadable documents to preview in their online account for further use.

Iteration

After completing the iteration process the final design also send to the top of the design process as it is iteration in nature, Being facing the iteration in design process must be normal behavior for every UX designer. 

What I have Learned during this Project & Necessary Takeaways

A few days ago, I finished working on my second Google portfolio project.

It was my first ever responsive design project. It came with its learning and challenges. I was lucky enough to find a team member who helped me throughout the project. The task was to design a responsive website to viewing the various art tutorials. The website that can be used by both, people who are looking for art classes and who are already expertise in this field. It seemed simple at first but it got complex as I started working on it.

To begin with, I was given lots of requirement documents to study. It helped me have a good understanding of the project. There were 2 target users of the app: 1. primary learner of art and 2. Expert in this field.

At the initial phase, the idea was not fully developed. My role was to help team members refine their idea and help them figure out their minimum viable product (MVP). This required lots of discussions and design iterations as we moved towards building a prototype.

Here are my takeaways from the project:

1. Focus on the bigger picture.

As it was my first responsive design project, I wanted to pay attention to every minute detail and wanted to deliver my best. The documents that I had collected were detailed with lots of features and long term goals which left me unclear about the scope of the MVP.

In the initial phase of the project, I performed users research, creating users journey map and a competitor analysis, and as a new or call it a naive designer, I wanted the website to be like the already established ones which have “nice to have” features. The challenge for me was to get rid of the urge to incorporate those features and stick to just the “must-haves”. They can definitely improve the users experience but are not needed for the MVP.

2. Do not blindly chase perfection

I am one of those people who likes to make things “nearly” perfect, and I say so because I have realized that, perfection is an illusion and trying to make things perfect is a never-ending process.

Perfection has diminishing returns. As long as your work is presentable and serving the purpose, you do not have to make an extra effort for the changes that won’t even get noticed.

For this project, I had to convert the wireframes I was building into an interactive prototype. So I tried making wireframes look good to the point where I started experimenting with colors knowing the fact that these are just wireframes and it is not wise to waste time on this. But I have this inner voice that says “if I am going to share it with users, it better be presentable”. Yeah, that was the fear! Sometimes you do that for your own satisfaction even if it is not going to make much difference in the end. It is the mind-set that makes you push that extra pixel and it takes time to change that.

3. Communicate clearly with users

Get to know your users: Getting to know your users prior to the work meeting helps to understand their requirements better. It is said that people are trickier than tools, and knowing your users can help you a lot in explaining certain points in a way that they can easily understand and giving the right direction to the agenda.

Listen carefully: I believe that listening is the most important skill to have in a meeting. Listen patiently to what the users have to say, you might get answers to some of your questions before you even ask. And if needed, ask for the explanation again. Time spent listening carefully in the present saves rework in the future.

Do not put your users on the spot: Asking questions that put them on the spot should be avoided. Instead, it is better to send them the questions ahead of time, it gives them time to analyse your questions and get back to you with answers which are well thought of.

Suggesting changes: Users can be from different backgrounds so it is possible that they might not understand the design or technical constraints at first. You should suggest changes in a constructive manner. After all, you are there to help them.

Working remotely with users: Working remotely in different time zone can be challenging. As you and your users have different working hours, the meetings are time-bound making it difficult to brainstorm and discuss every issue or get answers to every question.

To overcome these issues, it is important to create a robust documentation and communication process. You must make the most of tools such as instant messaging, email and collaborative features on design software.

Document your questions: Write down your questions in a document and share it with your users. Encourage them to add answers and comments in the same document. This helps when you and your users are working in different time zones. Along with documenting questions, you should also document your ideas which did not work out. Keeping track of your questions and ideas can be of great help for future reference.

Tools: Encourage your users to use tools like Slack and Google Docs to make communication much easier and faster.

4. Set a deadline

It is difficult to get an estimation of the time you are going to spend on the piece of work. This is especially challenging when you are inexperienced. Therefore it is important to set a deadline when you start working. It is tempting to tweak your piece of work to the last minute but you must remember that your users are waiting for you to finish. I have learned it the hard way and still trying to improve upon this.

5. Ask for feedback

Working in isolation is challenging. I was the only UX/UI designer in my team and did not have fellow designers to discuss my project. Fortunately, one of my team members was a marketing executive to whom I could reach out to for feedback. Feedback from non-designers can be equally helpful to the product as feedback from a designer. It gives you a different perspective and tells the users side of the story.

6. Just dive in

There are situations when you find yourself getting tangled between all the documents and information you are provided. It becomes difficult to know where to start. The best way to clear the picture is to start working on it with whatever little you understood. Eventually, you start connecting all the pieces and the idea starts taking its shape.

7. Remember to detach

This is something I would remind myself, again and again. Do not get too attached to the project that you don’t have room for any other ideas or thoughts. Detaching yourself from a certain idea can help you explore other ideas. It is equally true for work as well. Taking a break from work increases productivity and helps you head back more energized.

 

Style Guide