My second project in Google UX design specialization course that building a website that can access on different devices.

Overview

Qooky is a site that provides a cooking tutorial for people who want to find, view, and try to cook the food they want. Besides that, Qooky also offers a lot of information such as food background, ingredients, nutrition facts, and others.

I found that I never browsed cooking tutorials through the website. All I did before is always search it on Youtube. So, It made me so excited to accept this challenge and make a website for cooking tutorials using the design process from the beginning.

Challenges

1. Create a clear visual
2. Allow users to find and view the tutorial easily
3. Provide features for users to explore more detail of the foods

Research

The first step for me in designing the website is to observe and review everything about cooking literature. Learning new things about cooking can allow me to understand things that I don’t know before and it also improves interview sessions more successful. Because its literature can provide a lot of insights and ideas that might be set to the question and it also can avoid to “lack-of-knowledge” thing.

After I read several articles about cooking to find out new thoughts and perspectives, I set the interview to gather information about users’ problems and what they are needed.

I conducted user interviews, then synthesized them to be empathy maps to better understand the users and their needs. As I thought before, I got information that I don’t know before I conducted the interviews. I discovered that people who love cooking have a busy time. They only have little time to view and try the food that they want to cook. Even more, they don’t have certainly website to browse so they search the tutorial through the internet from their browser (or Youtube) and always end up on a random website.

Sometimes, they found out the website is poor, both visually and functionally. They hope the site adds several features which are needed to help them have a good experience to find and view a cooking tutorial. So the Pain Points are:

User Persona

From four different user backgrounds, I found that people have different ways and thoughts in finding and viewing the cooking tutorial. However, there’s something similar between them. So, I separated them into two personas — Primary and secondary

Competitive Analysis

In order to build an extraordinary website for Qooky. I had looked out the other website of a cooking tutorial that existed to this day. I found that available cooking tutorial websites don’t meet accessibility standards. They’re cluttered, provide unneeded content, and confusing to navigate.

The thing I could take advantage of this opportunity to build a website differently from other competitors. Click this to look Competitive audit report.

Starting The Design

To start the design, I made some questions to myself how I deal with the user’s problem and gather solutions in different way by How Might We:

Amp up the good

We know there are a lot of ways to find and view cooking tutorials, so we thought about how the cooking tutorial website can be its best. Based on that, we came up with the question:

How might we design a cooking tutorial site that is easy to use?

How might we make the viewing tutorial cooking experience fun?

How might we create a visual that is engaging?

Change a status quo.

Thinking about the research finding that Sasha views cooking tutorials, but it’s hard to use, we came up with a couple of questions.

How might we make Sasha able to view tutorials during her busy time?

How might we make Sasha not confused and overwhelmed to viewing the tutorial?

Break the point-of-view into pieces.

Based on the pain point that the UI of cooking tutorial websites is too crowded, we came up with the following questions:

How might we make a clear UI and create better navigation that is easy to recognize?

Information Architecture

Paper wireframes

I’m freely drawing sketches through these papers. Because it is very easy and less effort to do. What I need is only a marker and paper. I made three versions of the screen size: Website, tablet, and mobile (but later I just create website & mobile version).

Consideration about screen size variations. People not only access the website. They might be accessing from multiple device they have. So that, I created wireframes for tablet and mobile users as well. It’s more challenging because the mobile version has small and limited space to include all of elements from website version. So that, I had to thinking hard to find a way to still include the main elements and not too much add details. Because in mobile version, less is more.

…to Digital Wireframe

Moving the wireframes from sketch to digital to give a realistic version of the product and make it easier address user problems and gather new ideas. Of course, there were many details and elements are change during this process. That’s because my mind and perspective are different when I sketched and made the wireframes. It seems like the ideas always come up with different things in a particular condition.

Low-Fidelity Prototype

To create a low-fidelity prototype, I connected all of the screens involved in the primary user flow of find and view cooking tutorial and secondary flow to look more about other features (ingredients and professionals).

Here link to look Low-Fidelity website prototype.

Design System

I chose the colorful color to made the visual more attractive. Orange is right decision by me because it associated with meanings of joy, warmth, enthusiasm, creativity, and encouragement. The rest of color is fulfilled by white and black color family.

For good readability, I chose sans serif font named ‘Berlins Sans FB’ as they give a modern, friendly, and clean look.

Mockup

Usability Test

I conducted Usability Study to find out that the website is easy to use and address the user’s problem. The Usability Study used a high-fidelity prototype and revealed what feedbacks from the users need to be improved.

Three themes that I got are:

Iteration

Test Qooky Prototype in Adobe XD.

Takeaways

Impact

Our users share their thoughts that the design is visually appealing, clean, and uncrowded.

Since it’s a project on Google UX. I collected some quotes from peer feedback:

“You have done a huge amount of work on this project. The homepage looks really nice and clean”

“Great work on the prototypes. I really like the colors used in the designs!”

What I learned

• Because it was my first time designing a responsive website, I had to learn a lot of new things about website design. I was very excited and confused on the same side. The website screen provides many spaces to do, very different from the mobile version that I created before, and sometimes I ended up stuck on progress. But there’s no reason to back because It was fun to do and keep forward instead.
• I think the best way and plays crucial to running the design process is by collaborating. However, in this project, I performed all tasks by myself. Sometimes I’m stuck, I need a way out to deal with the problems from a different perspective. But I don’t have teams to collaborate and communicate with. Ultimately, I needed to take a long time to solve the problems throughout the design process. I think I wish that collaboration too much.

You can also look more other processes here. Case Study Slide Deck

This case study is about a clothes shopping app for people who want to design their own clothes. This is a personal project I worked on during a online course on UX Design Google Certificate.

Overview

The Product:
PRO-FIT is an application designed for tailor to design clothes so that customers could comfortably and confidently buy clothes of the right size with online measurements and no need to come to the store.

My Role:
As a UX Designer for Pro-Fit app, I performed all of design process from beginning to end on my own.

Responsibilities:
Conducting interviews, performing empathy maps, defining the problems, generating ideas, paper and digital wireframing, low and high-fidelity prototyping, conducting usability studies, gathering insights, iterating on designs

Project Duration:
September 2021 to January 2022.

In the early course, I actually have not idea what product that I would create throughout the course. So, I started to find out the things that I would design for further process by using emulator that in course have provided. The emulator provide many options of design inspiration to created and it will change randomly if I click the single button there. By the time I clicked countless times. I found the sentence that I am interested in designing there. It is “design a simple app for a tailor”. On my first thought, in my deep mind, I am actually curious to how a tailors has their own app? and what the tailors could do for their customers through the app?.

Tailors related with the clothes, that’s their job. They make clothes that customers want by measuring their body size. Then, they begin to designing the clothes, take time to craft and sewing until it becomes the perfect clothes that customer expect. So, I’m starting to get an idea of this process to created an app that customers could order and purchasing the clothes through online. I determine the Main User of this problem that I want to solve is the people who have purchasing clothes through online.

Based on my experience buying clothes online, I had some bad experiences with it. Such as, the clothes that not fit with my body and there’s also the item of the clothes that out of my expectation. So, I started to my initial assumption that The Problem of users is sometimes the clothes users had purchased online weren’t fit with their body or out of their expectation. This makes them frustrated so they prefer to shop elsewhere or even at offline stores. The goal that I have to achieved is to create an application where users confident and satisfied to buy clothes online.

Challenge

1. Convince people to buy clothes online

2. Learn more about the process of designing a clothes

3. Create clear UI while designing as the focus

4. Provide simple and linear experience throughout the process

Understanding the user

I conducted interviews and created empathy maps to understand the user I’m designing for and their needs. A primary user group identified through research was working adults who have some issues buying clothes through online shopping.

The user group confirmed initial assumptions about user experience in shopping online, but research also revealed that users follow fashion sellers/influencer on social media/e-commerce and were increasingly interested in buying because of them.

Pain Point

User Persona

From five different user backgrounds, I founded that people have different ways and thoughts in buying clothes. However, there’s something similar between them. So, I separated them into two personas — Primary and secondary

User Journey Maps

Goal: Satisfied with getting clothes she loved in online shopping.

After performed User Research, I get some new insight from user through their perspective. This allowed me to design more creatively to address issues that users face.

Competitive audit

I Conducted audit/analysis to compare selling clothes of each competitor. The competitor have similar business and concept that I want to created in this app. But, reveal also a minus that they don’t have. Because this, I managed to get more insight that I can implement to my design next.
Several things to considered:
1. Simplify Interface
2. Specialization of Products
3. Accessible

Starting the design

Paper wireframes

Started designing the initial concept by doing wireframe on paper. This allows me to pour all my ideas through sketches easily before creating the digital-wireframe. I started to designing Homescreen for the main screen where users start to creating their own clothes, make it easy and simple for users to navigate.

Wireflow

After sketching the wireframes on paper, I made an improved version of the wireframe as a digital sketch and thinking out loud about the page view of each screen.

Test early concept and conduct usability study
Round 1 Usability Study
The first Usability Study was conducted by low-fidelity prototype to test the early concept of the design and help me gain insights for the mockup design. The outcome must be a feedback.
Three themes that I got from conduct first usability study are:

In this first usability study. I found that a little difficult to do. Because this is a low-fidelity prototype/version and lack of visualization, users found it difficult to perform the task as many of them didn’t understand what each component means. But, once I gave them clear instructions (of course I still remember not to bias them), the user finally know what they are going to do and turn it into a feedback.

Refining the design

Design System

Combining semi-black and white makes the design seem luxurious, powerful, and clean. It creates trust and confidence for users experiencing within app and also shows the high quality of the clothes.

Mockup

Round 2 Usability Study

The second Usability Study used a high-fidelity prototype and revealed what feedbacks from the users need to be improved.

Create more instructions how to start designing. So, users are not confused.

Test Prototype in Figma. PRO-FIT App

Takeaways

Impact

Some users said the app is really useful if it would actually be developed in the real world. Since it’s only a course, I shared and get quote from peer feedback:

“Great idea of your app design.”
“I like the colors you use in your app. The workflow is very clear.”

What I learned

While designing PRO-FIT app. I learned that every single process of designs always refer to user-centered. If I creating a design only based on my perspective, the design will not address the pain point of user’s problem. To deal with that problem, I always keep in mind to review again my research that I have done before.

You can also look more another processes here. Case Study Slide Deck

Digital Era

Melansir hasil survei Tren Minat dan Perilaku Pencari Kerja di Era New Normal yang dirilis Deka Insight bersama Job2Go dalam alinea.id, saat ini, startup merupakan perusahaan yang paling diminati nomor dua setelah BUMN. Bahkan, dikatakan Indonesia merupakan peringkat kelima negara dengan jumlah startup tertinggi setelah Amerika Serikat (AS), India, Inggris, dan Kanada.

Contoh perusahaan startup yang ada di Indonesia mencangkup berbagai bidang, mulai dari bidang pendidikan (zenius, ruang guru), fintech (gopay, ovo, dana), e-commerce (shopee, tokopedia, lazada), dan lain sebagainya.

Alasan tingginya minat terhadap dunia startup ini bermacam-macam, salah satunya adalah budaya startup yang lebih fleksibel. Yang menjadi poin penting adalah dengan tingginya minat akan dunia startup, minat terhadap pekerjaan yang berhubungan dengan dunia startup pun meningkat. Bagi sebagian orang, startup mungkin dicirikan dengan bidang IT. Namun, dalam dunia startup, terdapat berbagai macam bidang yang diperlukan, mulai dari Product Manager, Developer, UI/UX designer, dan lain-lain.

Hadirnya Binar Academy

Dengan adanya hal-hal di atas, munculah berbagai bootcamp digital yang menawarkan kursus digital. Salah satunya adalah Binar Academy.

Binar merupakan startup edukasi yang didirikan untuk memperdalam peranan dalam penyediaan talenta digital yang berkualitas untuk dapat terjun ke dalam industri. Binar Academy menyediakan berbagai program pendidikan terkait bidang digital untuk siapapapun yang berminat.

Namun, dengan banyaknya bidang yang ada, para pemula yang mungkin masih minim pengetahuannya tentang bidang yang ada mungkin akan merasa kewalahan ketika harus mencari tahu terkait hal tersebut satu per satu. Hal ini bisa jadi membuat mereka yang awalnya tertarik menjadi tidak melanjutkan ketertarikan tersebut.

Dari permasalahan di atas, muncullah ide !

“Bagaimana jika kita tambahkan fitur di mana user yang tertarik dapat dengan mudah mendapatkan saran terkait bidang yang paling cocok untuknya, sehingga ia tidak akan merasa kewalahan dan akhirnya dapat mengikuti kursus tersebut?”

Timeline dan Boardtasking

Untuk menyelesaikan permasalahan ini. Saya bekerja sama dengan teman-teman UI/UX lainnya dan untuk pertama kalinya juga kami berkolaborasi dengan tim PM (Product Manager). Sebagai Tim, sebelum memulai proses Design Sprint, kami melakukan tahap persiapan terlebih dahulu. Hal pertama yang kami lakukan adalah mendata apa saja yang harus dikerjakan. Mulai dari User Persona, prototyping, hingga penyusunan report yang mencakup semuanya. Tiap pekerjaan yang harus dilakukan kami buat sebagai satu card di Trello. Setelah semua hal yang harus dikerjakan terdata, barulah kami menentukan deadline untuk tiap pekerjaan tersebut, sekaligus melakukan pembagian tugas.

Business Model Canvas & User Persona

Selanjutnya, kami mencoba menganalisis model bisnis dari Binar Academy dengan membuat Business Model Canvas. Umumnya, tahap BMC ini memang dilakukan pada konteks jika designer akan membuat produk/konsep/aplikasi yang benar-benar baru. Akan tetapi, kami memutuskan untuk tetap melakukan tahap ini sebagai latihan, sekaligus menyamakan persepsi tentang model bisnis Binar Academy.

Tahap 1 : Understand

Umumnya riset awal dilakukan di tahap ini, tapi karena kami memutuskan untuk mengambil topik dan permasalahan yang sudah ditemukan oleh tim Product Manager kami, jadi kami tinggal fokus untuk memahami saja.

Point Of View (POV)

Melalui User persona yang telah kami buat sebelumnya. Kami mengetahui lebih dalam siapa User tersebut, apa yang dia butuhkan, dan apa hasil yang didapatkan setelah kami mengamati User tersebut.

User :

Karyawan yang sedang bekerja full-time saat ini tetapi ingin pindah karir yang baru ke perusahaan startup.

Need :

Bantuan yang mudah dan instant untuk memilih course yang tepat dan cocok

Insight :

Keinginan dari user untuk belajar di bidang tech dan pindah karir ke dunia startup cukup tinggi, namun bingung saat memilih preferensi course di Mobile Apps Binar

User Journey Map

Terdapat 3 tahapan dalam menggunakan aplikasi binar. Yang pertama adalah saat user menemukan aplikasi binar, kemudian yang kedua adalah saat User membuka aplikasi dan menjelajah di dalam aplikasi Binar, kemudian yang terakhir, tahap ketiga, tahapan yang User lakukan setelah menentukan pilihan Course-nya.

How Might We (HMW)

Berdasarkan CJM tersebut. Kami mendapati kesempatan-kesempatan yang bagus untuk Meng-Improve aplikasi Binar. Di antaranya adalah:

• Bagaimana kita meningkatkan eksposur Binar agar lebih mudah ditemukan user?
• Bagaimana kita dapat membantu user dalam memilih course yang tepat dengan mudah?
• Bagaimana kita dapat memudahkan user melakukan pembayaran?

Dan pilihan yang kami tentukan untuk pengerjaan selanjutnya adalah pada poin ke-dua HMW yaitu:

Bagaimana kita dapat membantu user dalam memilih course yang tepat dengan mudah?

Tahap 2 : Define

Setelah mendiskusikan bersama tim. Solusi utama yang kami putuskan untuk menjawab HMW tersebut adalah:

“Mengadakan Tes Preferensi”

Crazy 8s

Hal pertama yang kami lakukan untuk membuat Tes Preferensi adalah mengadakan Crazy 8s. Crazy 8s merupakan tahapan dimana tim membuat masing-masing ide yang ada dipikirannya untuk dituangkan ke sebuah halaman kertas yang dibagi menjadi 8 Frame dan semua itu dilakukan hanya dalam 8 menit saja. Tidak heran kenapa dinamakan “Crazy”.

Gambaran untuk rancangan yang akan kami buat nantinya dalam crazy 8s adalah sebagi berikut :

- Membuat layanan Tes Preferensi untuk mempermudah seseorang yang bingung memilih course

- Fitur Icon Fun Fact berisi iklan yang membuat kita semakin termotivasi untuk belajar

- Memberikan penjelasan disetiap course nya yang ingin diambil serta fasilitas apa saja yang didapatkan

- Membantu sampai proses pembayaran course daftar bootcamp

Tetapi, pada praktisinya kami tidak melakukan aturan tersebut dengan benar karena kurangnya pengetahuan dan pengalaman kami yang baru pertama kali melakukannya. Ada yang tidak sampai membuat 8 frame dalam waktu 8 menit dan ada juga yang menyelesaikan 8 Frame walaupun lebih dari 8 menit. Sudah jelas bagi kami untuk lebih belajar lagi tentang Crazy 8s ini.

Setelah itu kami mempresentasikan hasil dari Crazy 8s yang telah kami buat dan masing-masing dari kami mendapatkan 2 suara untuk mem-voting ide dari Frame mana yang menurut kami layak untuk dibuat dan dikembangkan.

Tahap 3 : Decide

Story Board

Berdasarkan materi yang kami pelajari. Tahapan yang akan kami buat selanjutnya adalah Story Board. Storyboard dibuat sebagai gambaran ide pada produk yang akan kami kembangkan kedepannya. Penggambarannya seperti komik dimana elemen yang terkandung dalam Storyboard mencakup User, masalah, dan produk yang kita tawarkan untuk membantu user tersebut.

Flow Chart

Ada juga kami membuat Flow Chart. Dalam membangun sebuah program. Flowchart merupakan sebuah diagram yang menjelaskan alur proses dari sebuah program agar lebih mudah untuk dipahami.

Tahap 4 : Prototype

Digital Wireframe

Kami bersama-sama mengerjakan Wireframe ini dan saling berdiskusi untuk menentukan mana yang terbaik.

Mockup

Setelah tahapan Wireframe, di tahapan Mockup ini kami memberikan warna dan detail yang lebih jelas sehingga desain yang kita buat mendekati tampilan akhirnya (atau yang kita sebut juga Hi-Fi)

Tahap 5 : Validate

Usability Testing

Setelah mendesain tampilan. Kami mengadakan in-depth interview kepada 5 orang. Masing-masing dari kami melakukan interview 1 orang. Ini dilakukan untuk mendapatkan feedback dari user guna proses iterasi selanjutnya.

Setelah melaksanan testing kepada user. Kami mengumpulkan feedback yang diberikan user terhadap produk yang kami buat. Beberapa pernyataan yang memiliki kemiripan kami kelompokkan menjadi satu, sehingga memudahkan kami mengumpulkan data.

Feedback Grid Capture

Feedback yang kami simpulkan dari User:

• Menambahkan video promosi course (semacam company profile) → Gambar di halaman detail course diganti jd thumbnail
• Memberikan akses untuk kembali ke pertanyaan tes sebelumnya, opsi: (1) kasih navbar fixed, (2) bikin tombol “Sebelumnya”
• Tombol centang pada tes diganti jadi bulat
• Funfact diberi pilihan untuk “sembunyikan funfact selanjutnya”
• Revisi text: warna text dibuat hitam pudar agar lebih enak dibaca, jarak ditambah
• Alumni Stories nya diberikan detail lengkap, seperti sekarang kerja dimana
• Halaman detail course 2 dan pembayaran (opsional, sc dari apps Binar)

Setelah Revisi

Kami melakukan iterasi dimana kami kembali lagi ke tahapan sebelumnya yaitu Prototype. Kami melakukan penambahan dan perbaikan pada tiap halaman yang kami tetapkan sebagai masalah-masalah yang dihadapi user saat menggunakan fitur ini di testing sebelumnya.

Protoype v.02 (Mockup)

Tes Prototype disini :

Usability Testing v.02

Setelah melakukan iterasi pada tahapan Prototype, kami melakukan pengujian kembali Prototype kami kepada Potential Users. User dalam UT ini berjumlah 6 orang yang sesuai dengan persona yang telah kami buat sebelumnya. Tujuan dilakukannya UT ini adalah untuk mendapat feedback dari user dan pain points yang mereka rasakan ketika menggunakan prototype yang baru ini. Pada UT ke-2 kali ini, kami menggunakan tool yang bernama Maze. Aplikasi maze merupakan salah satu tool yang digunakan untuk melakukan UT. Terdapat beberapa fitur yang dinamakan Block yang salah satu block tersebut bisa membuat sebuah skenario tertentu yang kita buat untuk diujikan kepada user. Dari pengalaman user menggunakan fitur Tes Preferensi tersebut melalui Maze, kita bisa melihat juga hasil yang telah dikerjakan berbagai user guna mendapatkan hasil data yang diinginkan untuk keperluan testing kali ini.

Berikut Skenario dan hasil keseluruhan dari user :

Maze

Skenario 1

Skenario 2

Skenario 3

Skenario 4

Skenario 5

Hasil Usabilty Testing Menunjukan Score 82 yang berati Desain ini sudah baik.

System Usability Scale (SUS)

Setalah user mengerjakan skenario melalui maze, kami memberikan form SUS kepada user untuk mengetahui nilai keseluruhan dan perasaaan user selama menggunakan Prototype tersebut (informasi detail SUS bisa klik disini)

Skor SUS yang kami dapatkan dari UT ini adalah sebagai berikut :

Rata-rata skor SUS yang kami dapatkan sudah lebih dari 68, yaitu 75.4, yang tergolong ke dalam kategori good dengan grade scale B. Artinya, design dari fitur yang kami berikan sudah dapat diterima dengan baik dan bermanfaat, namun tetap ada peningkatan yang dapat dilakukan berdasarkan feedback users.

Akhir Cerita…

Terima kasih sudah membaca sampai sejauh ini. Case study ini dibuat hanya untuk bahan pembelajaran dan masih banyak metode riset yang belum kami terapkan disini. Semoga dengan karya tulis kami ini, kami dapat membantu anda untuk mendapatkan ide/pengetahuan yang berhubungan dengan kegiatan anda.

Saya juga menyadari bahwa masih terdapat banyak kekurangan pada case study ini. Namun, banyak hal baru yang kami pelajari dari kerja sama yang dilakukan, seperti :

• Pentingnya melakukan Shared-Understanding agar supaya semua anggota yang terlibat dalam pengerjaan project ini dapat benar-benar memahami dan mengerti dengan detail tentang hal apa yang akan kita kerjakan.
• Menjaga komunikasi. Komunikasi merupakan kunci utama yang dibutuhkan saat sedang berkolaborasi di dalam tim. Komunikasi yang baik dapat mendukung tim dari berbagi aspek demi kerberhasilan sebuah tugas.
• Selalu berusaha yang terbaik. Walaupun kami masih kurang pengetahuan dan pengalaman, kami terus bekerja sama menjalani proses ini hingga akhir untuk menghasilkan sebuah produk/desain yang dapat membantu User menyelesaikan permasalahan yang sedang dia hadapi.

Sekian proses yang kami lakukan dalam improving feature aplikasi Binar ini. Terima kasih banyak kepada Fasilitator kami Nyai Putra Melasari yang tidak pernah berhenti-hentinya untuk terus membimbing kami hingga sampai sejauh ini, Kelompok 3 yang sudah bekerja sama sebagai tim, serta Binar Academy atas kerjasama dan kesempatan ini!

Best Regards,

Hari Tody