Web Design Bootcamp Day-to-Day – UX Design

Hi my name is Markus and I want to tell you the story about my time on the Web Design Bootcamp here at WCB during Covid times. 

Diary entries:

• Diary 1: Bootcamp – UX Design
• Diary 2: Bootcamp – UI Design
• Diary 3: Bootcamp – Development
• Diary 4: Bootcamp – WordPress, Hosting and Domain name
• Diary 5: Bootcamp – Digital Marketing
• Diary 6: Bootcamp – Freelancing

When you start looking at the Convid-19 pandemic from another perspective, during the lockdown period, many people choose to use their time, staying at home, spend time with their loved ones, started to work out and educated themselves with the wide offer of online learning courses. Many business owners shifted their interest and learned new skills, which they can use to start as a freelancer or find a fitting position for the future.

This is my story about the Web Courses Web Design Bootcamp 2020.

What kind of students take this Bootcamp?

In my class at Web Courses Bangkok (WCB), there was a mother, which want to start working from home, to spend time with her kids, and also express herself in her work as a web design freelancer.

Apart from a global health pandemic, there are various reasons, why people start to educate themselves.

Another student have been there to be able to design the website of their family business and start a career as a web designer from there.

The motivation for myself, to be a part of the Web Design Bootcamp, have been work related, but let me introduce myself first. 

I am originally from Germany, I graduated from an International University in Bangkok as a Marketing major, and work at a Software company. 

As a fresh graduate, you should be ready and prepared for professional life, but I felt that some important skills are missing, especially when it comes to work together with developers and web design experts.

The Web Design Bootcamp was the perfect fit to gain knowledge in a 3-moth semester, with classes from Monday to Thursday, 10am to 3pm. We had about 1-2 hours homework per day and it was tough going at first.

The covered topics have been started with User experience planning (UX), User interface design (UI), Web development with HTML, CSS and JavaScript, WordPress, Digital Marketing and rounded by how to become a Professional Freelancer, and what does Professional Freelancing mean.

WCB does offer online classes for everyone around the globe and offline classes for professionals in Bangkok. Because I stay in Thailand, the offline Web design Bootcamp class been the right option for me.

The school is located in Sathorn, Bangkok and is super easy to reach by public transport, with the Lumphini MRT station in walking distance.

The class is very International, with students from Myanmar, Germany, Thailand, Brazil, South Africa and Japan. The class was the perfect size with seven students, because the teacher have time for us individually, and we can help each other as well if someone need help.

Everyone has a provided iMac’s with the software installed that we will use in our web design classes.

Unfortunately, I missed the first of six modules, where we learned about UX design planning, but I will give you a short overview.

Module 1, the User experience planning, started of with the question and explanation from Carl, “What is a Web Professional?”.

Senior Instructor Carl Heaton gave the class an overview about web professional job titles. What core skills and experience a web designer or web developer should have to be a successful freelancer or employee in a web design company. 

The other students told me that they enjoyed the lecture because it was a fun and relaxed atmosphere inside the classroom, but also a very informative, with a huge boost of their knowledge, supported by real-life examples and case studies.

To get the certification we needed to find a web design project with a real client for ourselves.

We can ask family and friends with small and medium size businesses if they would like to have a website designed or re-design for free. This is a win-win situation, because we can apply what we will learn during the course, gain experience for our portfolio and the business get a free website.

For the explained project we learn and create macro and micro briefs. 

The macro brief will look at the main pages in the navigation. What main pages are required to be in our sitemap or what current page are not necessary. We take a look at the purpose of the page, is it to inform about a company, to sell a product or a service page which inform and sell different tools and packages.

To design a website with a great user experience, you need to know who your target user is, because it is impossible to design one website for everyone.

It also helps in the thinking process of different features. Additionally, the macro brief looks at the budget, if it is possible for the expected price and which functions can fit into the client’s payment plan.

After the macro brief will result in a good and possible project, it will be changed into a micro brief.

The micro brief will be a more detailed proposal for the client. The web design freelancer will present the requirements and main functions of the page.

For example, the page will be in English, responsive design for mobile devices, on demand order form, contact form, Google Maps and more. In the micro brief we include a rough sitemap and design inspiration for a better imagination of the targeted website design. If we have the skill and the client need some additional services like branding, copywriting, online marketing or maintenance, we can offer these services in the micro brief as well.

In this decision stage of our acquisition, the potential client can choose if he/she want to work with us, but we also get taught that we have to learn to say no to bad projects, because it will take time we waste for good projects, and we will lose more money.

If the project is a good fit for everyone involved, we need to move on to the brainstorming process. 

For the brainstorming process, we get many ideas, articles and websites to find a design direction for our personal project.

After the classes, we get some homework assignments to prove our knowledge or to be prepared for the upcoming classes. The brainstorming homework was the creation of a mood board where we find different websites for coffee shops.

During the entire Boot camp, we do many projects, to gain knowledge in different Industries and increase our portfolio.

This class was taught by Dimitri, a German web designer and web programmer.

He introduced the students to the class project, which was Happy Café Bangkok.

On the basis of the coffee shop website, we created a sitemap, which shows the different pages and sub-pages, for example Home, Menu, Gallery, Blog and Contact. For the creation of the sitemap we get helpful tools to make it visually look good.

Apart from the HappyCafe website, we practice with a tour company and e-commerce as well, which was helpful, because they most likely follow a different and more complex structure.

The class with Dimitri was very interactive and challenging, because he will always question our decision and what the thought process was behind it.

This helped our critical thinking skills, because every project is different and there are more than the one perfect solution for building a website, we needed to find our own style.

Due to the fact that every business is different, even in the same category, the target users can be completely different.

For example, in the category Toys, there will be toys for kids from 0-6 month, 3-6 years, 9-12 years and so on, or the even the same brand focus on different users within their product line.

Lego is mostly considered for kids and teenagers, but projects like the $800 Star Wars Millennium Falcon with more than 7500 pieces is focused on passionate adults.

We get explained that we need to know who we are designing for to build a website with a high usability and user experience. In the web design course we have been guided throughout different techniques, how we can research users and build the right conclusion with the data we acquired during the process.

When we are following all the previous lectures and the process of designing a website by yourself, we should have already a broad idea of the outline of the website.

Now is the time for a lo-fi wireframe to see the page elements and the structure of the page.

This can be done in many ways. We can just sketch it on a piece of paper to give ourselves an overview, or we can use the free design software Figma to do our first steps as a web designer.

Lo-fi wireframes will be closely discussed with the client, because we may not know the type of content he/she has available or which picture size, hero text and buttons will be necessary.

Including the client in the process is also important to receive the needed information and content for the next step, a Hi-fi wireframe.

The Hi-fi wireframe is used to show the fine detail of the site.

Here we can include interactive elements and actual content. The client get a much more clear picture of the expected product and changes in colour, fonts, content and other elements can be done quickly in Figma or other programs.

(lo-fi in figma)

This wireframe can be shared with colleagues and friend to get some other perspectives, which are very important in web design. We learned at WCB how important a short review from several people are, because every person have different preferences and may see things we overlook, especially as a web design beginner. 

All the presentations, cheat- and worksheets, have been accessible on a Trello board and Dropbox folders. This allowed me to catch up, and build basic knowledge of the user experience planning module, even I missed it in-class. 

The next module is about User interface Design, we will have d deep dive inside this module, because I have been able to experience it in person.

If you are already interested in the Web Design Bootcamp at We Courses Bangkok, you can visit https://www.webcoursesbangkok.com to learn more.