Google UX Design Certificate Project 2

Explore design tutorials with Design Learning website 

Designing a dedicated website for specialized design courses and tutorials.

Empathize
Define
Ideate
Prototype
Test

Overview


Designers who want advance their professional skills, and people who want to change their career path are facing problems with expensive formal education, limited time, busy schedule, lack of free quality learning materials, lack of specialized places with broad variety of learning design resources. 


Project goal 

Design a prototype of the dedicated website for learning design tutorials for people who want to improve their design skills or people who are just starting to learn design, including those who are changing their career path. 


Role

UX/UI designer, UX researcher

Project Duration

Jan 2022- Feb 2022

Responsibilities 

User research, ideating, , prototyping,wire framing usability testing 



Understanding the User:

  • User research
  • Personas
  • Problem statements
  • User journey maps

User research summary

The foundational research which included secondary research and primary unmoderated qualitative research revealed information about number of users pain points and needs.

Competitive market analysis uncovered very useful information about available products, on the market, their features and pain points that their users experiencing with those products. 

Primary unmoderated qualitative user research in form of unmoderated interview confirmed assumptions from the competitive audit findings. 

Research findings confirmed the need of a dedicated design tutorials website development that will take into account the most important users needs and solve existing users problems. 


User Pain Points

disorganized broad tutorial’s selection

It is easy to get lost with a broad selection of tutorials that are disorganized


Lack of specific courses

It is hard to find advanced skills tutorials, and specialized courses. Most of all tutorials are general and beginner- intermediate level.


Interactivity

There is no way to ask a question or advice while watching tutorials.

Lack of structure and preview option

People struggling to find the desired course because they need to watch full long videos to understand what is covered in the tutorial. This process is very time-consuming.


Personas

David

Problem statement

David is a junior graphic designer,

who needs to advance his skills, because he wants to quickly progress with his career and to get higher role in the company.



Josh

Problem statement

Josh is a supermarket manager,

who needs to change his career to a web designer 

because he wants to get higher paid job and work remotely.



User journey map

User journey map helped to get better understanding of users needs, and how design learning website could make people’s learning experience easier.

Starting the design

  • Paper wireframes
  • Digital wireframes
  • Low-fidelity prototype
  • Usability studies

Paper wireframes

Paper wireframes was a quick way to experiment with ideas for the website pages.

The goals for the home page are:

  • Simple layout
  • Easy navigation
  • Straightforward flow
  • Logical structure
  • Useful functionality



Paper wireframe screen size variations


Paper wireframes helped me to experiment with different ideas, and quickly determine what I like the most. My goal for the mobile version was to create a design that will be easy to view on the smartphone.


Digital wireframes

While designing wireframes for the design learning website I kept in mind user pain points that need to be solved. In order to create timeless and painless experience in searching proper material, I’ve organized tutorials in different groups depending on the different types of users and their needs. 





Viewing tutorials screen design was created with principles of inclusive design in mind, and was adopted for people with disabilities or temporal disabilities, and for international students to whom english is a second language.   


Digital wireframe screen size variations

My goal was to develop a website prototype that could be easily viewed from different devices and for diverse group of people with different abilities.

Low-Fidelity Prototype

Prototype can be viewed at

Usability study findings

  • Mobile version of the website was difficult to use for older people, because of the small text, small buttons.
  • Level of difficulty was available on the search function only. Information on the home page did not include level option for courses and tutorials.

  • It was hard to find how to register

Refining the design

I refined my designs based on the usability study findings: tutorials, and courses can be filtered by the level of difficulty, bigger search button recreated to maintain proportions and hierarchy.  

Based on the usability testing findings mobile version of the website was refined to make a website easier to view and use for older people.

Mockups: Original screen size

Mockups: Screen size variations

High-fidelity Prototype

Prototype can be viewed at different screen sizes

My takeaways



After completing this project I understood that for creating a successful website is extremely important to know your audience and to do user testing with a diverse groups of people, as all people have different levels of abilities, and a website needs to be suitable for users we are designing for.