Descriptions
Apilogy is introduced as a solution for an on-premise Big Data Platform and universal data analysis for enterprises. Apilogy generates profound insights tailored to the operational and business needs of the company, supporting decision-making, governance, strategy, and overall progress for our client companies. Additionally, Apilogy also presents a marketplace that offers various APIs with diverse capabilities, aiding developers and startups in creating new business opportunities with a focus on time to market. In general, Apilogy helps developers in shaping ideas and bringing them to life in a tangible concept.
Objectives
When I joined this project Apilogy already had a website that was running, from the existing website the Apilogy team had already carried out a heuristic evaluation. I was given the task of implementing the heuristic evaluation findings while using a new design system, typography, and color system. Before creating the design, I was also assigned to carry out a usability test of the existing website.
Tasks & Responsibilities
Collaborate with product managers and product owners to create user scenarios for material usability testing.
Perform usability testing on the current web interface based on user scenarios.
Record the results of usability testing answers and then collaborate with the product owner to validate user difficulties and expectations from the usalbility testing results.
Create low-fidelity designs and high-fidelity designs based on usability testing and heuristic evaluations that have been carried out.
Presenting design results to developers, product owner, and product manager to see implementation design feedback.
Apply the apilogy system color and style to the design system that will be used.
Tools
Figma
Design Foundation and Component
For the color system, I took it from the company logo which was discussed with the apilogy team after which it was generated for its derivatives. For typography, the font type is chosen according to the Legion design system. For the design system, I use the Legion design system according to the direction of the product manager.
Design System: Legion
Typhography
Nunito
Nunito
Nunito
Color System
Primary
Secondary
Case Study
When usability testing is carried out, it covers all the features in apilogy (as a whole).
Phase 1: Usability Testing Scenarios
Before carrying out usability testing, Apoligy product owner and I created a flow of user scenarios that would be used in the test. At the conclusion of the discussion, there were six scenarios that would be used.
Phase 2: User Interview
At this stage I conducted user interviews with three users, which should have been a total of five users, but two other users were unable to attend. For users, it is provided by the product owner within the Telkom Group with a basic programmer. In the test section, I give questions according to the usability testing scenario that was created previously.
Phase 3: Define
At this stage I recorded all the user insights then made them into affinity mapping and made them part of a category.
Phase 4: Ideate
At this stage, the product owner, product manager, and I collaborate to filter which insights will be implemented according to the priority scale of the Apilogy team. From the results of the list of insights that will be implemented, I then create a solution in the form of a design.
Phase 5: High Fidelity
Register
On this page, users can register by entering their identity data, which they must verify via the registered email.
Register-Current Page View
Register-Finding Usability Testing & Heuristic Evaluation
IMPLEMENTATION USABILITY TESTING
Bisa diitambahkan jadi 2 inputan password untuk meminimalisir lupa password
Tambahkan code negara pada phone number
Severity Rating / Finding :
EXPECTATION
IMPLEMENTATION HEURISCTIC EVALUATION
Terdapat wording yang menumpuk dan tidak rapi pada halaman register ketika terjadi error
Pada popup yang menampilkan terms and condition halaman tidak bisa tertutup jika diklik di luar popup. Hal ini kurang sesuai dengan mental model user yang menutup halaman pada bagian yang dekat
Menggunakan bahasa indonesia pada footer dimana bahasa pada keseluruhan halaman menggunakan bahasa inggris. (Terjadi juga pada halaman documentation)
Severity Rating / Finding :
MINOR (2)
Pada halaman register kolom phone number dapat diinput dengan alphabet dan symbols.
Pada halaman register, kolom password tidak bisa men-generate symbol underscore (_)
Logo ketika diklik memunculkan halaman developer portal
Pada footer menggunakan page developer portal dimana memiliki tema gelap yang berbeda dengan publisher. (Terjadi juga pada halaman documentation)
Severity Rating / Finding :
MAJOR (3)
Terdapat typo pada penulisan “Didn’t”
Severity Rating / Finding :
COSMETICS (1)
Register-Proposed Design
Login
On this page, users can log in using the account that was verified during registration.
Login-Current Page View
Login-Finding Usability Testing & Heuristic Evaluation
IMPLEMENTATION USABILITY TESTING
Tambah login dengan akun google
Saat login ada checkbox remember
Severity Rating / Finding :
EXPECTATION
IMPLEMENTATION HEURISCTIC EVALUATION
Terdapat captcha yang kurang memiliki urgensi ditempatkan di halaman bawah
Pada halaman login terdapat label username namun credential yang diminta adalah email.
Severity Rating / Finding :
MAJOR (3)
Form login terlalu besar sehingga keseluruhan fungsi/komponen pada area tersebut tidak terlihat
Severity Rating / Finding :
MINOR (2)
Terdapat label saved password yang overlap dengan placeholder form isian.
Severity Rating / Finding :
MAJOR (3)
Login-Proposed Design
Landing Page
On this page there is a header navigation that contains explore to view the API catalog, contact us, blog to view technology information, login, and register. In the footer navigation there is a documentation page to see the procedures (tutorial) for using the Apilogy website, about us, contact us, FAQ, terms and conditions, privacy policy, and becoming a publisher for users who are interested in registering as an API publisher.
Landing Page-Current Page View
Landing Page-Finding Usability Testing & Heuristic Evaluation
IMPLEMENTATION USABILITY TESTING
Tambahkan tulisan login/registrasi di home
Severity Rating / Finding :
EXPECTATION
IMPLEMENTATION HEURISCTIC EVALUATION
Terdapat user stories yang duplikat.
Terdapat clickable area pada button next/panah kanan yang kurang efektif
Severity Rating / Finding :
MINOR (2)
Terdapat warna desain background clients yang terkesan kurang rapi karena selang seling dengan aksen website yang Sebagian besar hitam
Severity Rating / Finding :
COSMETICS (1)
Pada halaman home developer portal Apilogy terdapat beberapa button dengan desain dan warna yang sama dengan wording lainnya. Hal ini kurang memberikan kesan bahwa button dapat diklik.
Severity Rating / Finding :
MAJOR (3)
Landing Page-Proposed Design
Explore
This page contains the API catalog. Users can search using the search field or using filters.
Explore-Current Page View
Explore-Finding Usability Testing & Heuristic Evaluation
IMPLEMENTATION USABILITY TESTING
Ada riwayat pencarian
Filter langsung dimunculkan tanpa harus klik button dulu
Setiap API ada deskripsinya
Severity Rating / Finding :
EXPECTATION
Karena tidak ada gambar dan icon nya sama semua untuk melihat sekilas agak susah untuk membedakan
Ada penggunaan warna untuk membedakan API dan publisher
Severity Rating / Finding :
MINOR (2)
User bingung salah satu API tidak ada deskripsinya, sehingga user tidak tau fungsi dari API tersebut
Severity Rating / Finding :
MAJOR (3)
IMPLEMENTATION HEURISCTIC EVALUATION
Pada bagian filter, terdapat input search API name sehingga redundan. Dan jika dilihat keseluruhan halaman, terdapat 3 search bar dengan fungsi yang sama
Penggunaan filter yang berupa isian.
Tidak ada keterangan kategori pada card API. Sehingga terkesan kurang terlihat apabila filter kategori diganti ke “All”
Severity Rating / Finding :
MINOR (2)
Website ini bertujuan untuk menjual API, namun pada katalog API tidak diberikan harga didepan.
Breadcumb kurang jelas yang clickable dan yang tidak.
Button "clear" pada bagian filter tidak mencolok/terlihat tidak dapat diklik, sehalipun telah mengisi kolom tersedia. Secondary button tidak konsisten.
Severity Rating / Finding :
MAJOR (3)
"Apilogy", "HOME" (pada bagian atas), dan "HOME" (pada sebelah bawah) mengacu pada halaman yang sama. Pengulangan informasi membuat user akan menerima terlalu banyak informasi.
Severity Rating / Finding :
COSMETICS (1)
Explore-Proposed Design
Manage Profile
On this page, users can manage the identity data filled in during registration, including their profile, address, and password.
Manage Profile-Current Page View
Manage Profile-Finding Usability Testing & Heuristic Evaluation
IMPLEMENTATION HEURISCTIC EVALUATION
Pada saat klik “manage profile” halaman landing ke page dengan warna dominan putih, hal ini seperti mode yang berbeda
Severity Rating / Finding :
MINOR (2)
Terdapat halaman konfirmasi untuk permission ketika user akses menu manage profile
Desain form disabled terlihat sama dengan desain form enabled sehingga kurang memandu user, karena user beranggapan bahwa langsung bisa edit profil tanpa harus menekan tombol edit terlebih dahulu
Terdapat error prevention yang kurang efektif karena user harus menekan tombol save dahulu untuk menampilkan error
Severity Rating / Finding :
MAJOR (3)
Manage Profile-Proposed Design
View more design files?
Visit Figma File
CONTACT ME
