Responsive Design Bootcamp Website – Google UX Course Case study

Project background
This is a sharpen prompt project which is a part of the Google ‘s UX course. The assigment was to design a flow for a mentor selection in a responsive website for a design bootcamp. This website was designed for people who don’t want to learn on their own but they don’t want to go to university or take classes offline. What’s their background? What language do they speak? How could they use their mentors help on the page? These were all taken in consideration when I designed the final form of the website based on research and usability studies. In this way the design bootcamp website can give to their customers an experience which makes the time spent there better and the user experience of the whole learning process will become much more friendly and user focused.
My role
Beacuse this project was auto generated by Sharpen for the Google’s UX course, in the project my role was not only a designer, but in the same time I was a UX Researcher, a Visual Designer (best known as UI designer), Graphic Designer, Copywriter and Wireframe and Prototype designer.
The problem
So many people choose their path wrongly. Sometimes when they want a change their are no good circumstances. In the field of design people often can’t learn beacuse of their language barriers, lack of leadership or lack of a person who guides them. These people learn on the internet, but they often can’t understand a lot from Youtube or Skillshare videos, they need a platform where they can learn in their pace, language (at least translation) and help of a mentor, watching their videos, ideas and thoughts.
The goal
We design this website to help people who want a change in their carreer or want to learn graphic design in their own pace, own language and with a help of a dedicated professional just for them. We want the design bootcamps flow to be easy to understand and use, so people can level up in no time learning graphic design and how to use one of the Adobe’s best known softwares, Photoshop, Illustrator or Indesign.
Project duration
May 2021 to May 2021.
Meet Marius
The Research
I conducted an unmodaretad usability study with my family members, beacuse this was a fake project. They had to complete several tasks going through the low-fidelity prototype of the site. These studies helped me to have data to make the app better, which I understood by using an note taking spreadsheet, after that I defined themes and patterns which led me to actionable and usable insights. After the changes and the high-fidelity mockups and prototype I asked them the second time, what gave me a more deeper and better understanding of their needs as if they were the end users of the app.
The most important pain points
– After choosing a mentor was confusig what would be the next step
– It was hard for some users to reach the actual playlist of the design course
My problem statements
Marius (user) is a/an recent graduate student working as a cashier (user characteristics), who needs a well built online graphic design class including translation and word explanation (user need) because he wants to learn without feeling uncomfortable about his english language skills(insight).
Usability study
Study type: unmoderated usability study
Location: Remote (each participant will complete the study in their own home). In our case my family members.
Participants: Participants young people with hopes and dreams, who just recently graduated or haven’t graduated at all and want a change in their life by learning design. Three males, two females, between 18-25.
Duration: Each session will last 5 to 10 minutes, based on a list of prompts.
Results: Users had a difficult time choosing their mentor and starting to learn beacuse the end of the choosing process were no indication whch would be the next section of the process. This made them confused, some of them upset, and they just couldn’t complete the process. Another result was that reaching the acutal playlist of the learning material was hard for users, beacuse the mentor and course choosing process wasn’t enough straightforward, so reaching the playlist too, which was the last part of the process.
Low-fidelity design (wireframes)
High-fidelity design
Accessibility considerations
The website’s images and illustrations use alt text to allow a screen reader to read the content. Texts are large for the purposes of easier reading and black and white make a high contrast which comes down to a good readibility.
Conclusion
While designing the website, I had to realize that an application is in some ways much easier to design. Not only should a website be accessible on every screen, but each page can have multiple subpages, which can be a big hassle without having the sitemap set up properly. When designing the website, I also had to pay attention to what is properly accessible on the big screen, it may not be on smaller screens anymore, so I had to decide which items to keep and how to resize. Aesthetics were much harder to maintain for a responsive website than for an application.
Tools used


