SertifikAps: Certification Booking Platform — Make an Order

Alfiatin Nur Khasanah
Quick Design
Published in
7 min readOct 9, 2020

Disclaimer: I created this case study to answer the challenges of UI Designer Position (at teknosejahtera.co.id) 2 years ago (December 2018). The requirement is to create at least 3 pages that represent the process of ordering certification via mobile apps.

Background Image Source: Pexels.com

Background

My challenge is to design an app that can bridge the user (certificate hunter) and the organizer. For further, I will use the word “organizer” that refers to the certification service provider institution, and “user” that refers to certification seekers. Yeah, there is some organizer that just use web / social media as their platform to meet the user. But, Is Certification important? let see it…

I have some certificates like Java Certification (from Oracle), TOEFL, etc. But, so far, I’m not using it anyway even when I’m applying for a job to a company. If they ask for it, I just attached the TOEFL. I just think, designers only need “portfolio” to show up their skills, hehe.

During the research, I find a nice article about “why we need a certificate” here. Andi said that certification is needed for people who want to improve their competence, he called it continuous improvement. Andi said that the most important process in certification is the learning process

I also interviewed my friends who take certification. They use it to fulfill the administrative document when registering with the company.

So, I conclude, a certificate is important, as a physical symbol (proof) of our skill/competencies.

Case Study

interaction-design.org

I used design thinking methodology (as always) to understand how it works and try to give better experience. The dotted line is indicating an iteration process.

Check this out…

  1. Empathize: Observe Bussiness Goal and User Goal

In this part, I’m trying to find out some kind of certification and how to get it. My research is based on secondary data (looking for some valuable things on the internet) and primary data that I get from interviewing my friends (I’ve said about it before). Then, I got some problems there.

As a user, looking for the best organizer takes time. Usually, they just ask their friend, or fortunately, find some ads in social media/others. Or if they wanna google it, they’ll find a lot of organizers.

As an organizer, finding and collecting the user who wants to get the certification is quite hard. Usually, they offer it to agencies/instance/ company or just placing some ads on social media or others. (In this article, I just focused on product searching and order process for customer experience, so I don’t create for the organizers).

This Apps is used to bridge users and organizers to fulfill their objectives.

2. Define: Pain Points

a. Users don’t have information about the organizers (certification providers).
b. Users don’t have a trust yet with organizers that they do not recognize

The validation for pain point (a and b). This validation process is to make sure / to ensure the difficulties that experienced by users in the certification retrieval process

3. Ideate

In this process, I define the workflow and create a paper sketch about the prototype. I just create the order process.

Flow-Diagram: the interaction between users and organizers
Sketches: the order process

Honestly, I want to analyze and create the whole process, but it really complex. And I’m sorry, my sketches are really messy :D.

4. Prototyping

The prototyping phase is divided into three steps: Wireframing, User Interface Design, and Interaction Design. During the prototyping process, I’m doing some iteration based on me and my friends’ experience (I’ll explain it at the validation step). I create the User Interface design until I’m satisfied

Itetare until you satisfied or the time’s up,
- Trinug, Founder of DuniaDalamDesain

Wireframing: I made the wireframe in Fluid UI, but the flow is not recognizable, so I export it and made the flow at Powerpoint.

When I create the UI, I realized that I was missing out on some details that confusing to users. But, I just designed it until the end in Illustrator (so, I didn’t change the wireframe).

I created the whole UI design in Illustrator

Then I use Invision to create the interaction. You can see the link at the end of this article.

5. Result and Validation

Result #1: Searching for a Product

The director told me, “Home is a page that gives access to all main features in the apps”. So, in the Home Page, I added the category menu to make it easier to search. I put some popular certification products. I also added the wishlist and notification button. I hope it makes the process of product searching easier.

Searching Product Scenario

There’s 3 searching product scenario

1. The user looking for a Category -> Choose a Product -> Go to Detail Product Page
2. The user attracted with organizer advertising, Go to Organizer Page -> Find a Product -> Go to Detail Product Page
3. The user find a Popular Product -> Go to Detail Product Page

Result #2: Make an Order

The certification is usually held for a group member at a specific date. But, how if we have some agenda on that date? How if there are some people wanna join us? I made a possible feature to solve that.

Order Scenario: 1. Fill the booking form 2. Finishing the booking process 3. Transaction Status

Here, I added a form that you can choose whether You wanna order for yourself (as an individual), or are you wanna order for your community?. I also added a Scheduled feature, so you can request the specific date, of course, it will be possible if the organizer accepted the re-schedule process (i hope i'm not too lazy to make it at the next case study). At the end of the order process, I let the users check out the order process.

Validation

To validate the design, I conducted some usability tests with 5 participants who came from different backgrounds (students, researchers, employers). There are some tasks that they need to do.

  1. Search for a product
  2. Make an order

Actually, i did the usability tests twice, First test is when I finished created the wireframe (low fidelity prototype), and Second test is when i finished all the UI component (high fidelity prototype).

Scenario: First Test (Iteration 1).
- 1 out of 5 people surrendered to place an order, she finally confused why she couldn’t return after opening the chat page.
- 1 out of 5 people make an order, and just click the main feature. Not trying to click another button (like chat or account page)
- 3 out of them completed the task, but during the process they trapped on several pages, then return to the main page and repeat until they can complete the order process. It’s because I forgot to create a “Back button” icon. So I improve it when designing the UI.

Scenario: Second Test (Iteration 2).
- 1 out of 5 people giving up to make an order, she just end up on Login Page. Crap, I forgot to added the field text and they just imagined “I can’t do anything here, and I give up”. This is bad, I’ll note it bold at my mind.

- 4 out of 5 people success to make an order. But some of them confusing about “why the image swiping left and right (due to the Invision demo review)”

~i don’t tell them how to use it, i want to know how the user learn to use my prototype naturally.

Conclusion

The certification is a symbol or physical proof of our skill. I made this prototype to bridge between the organizer and users to hold a certification. This prototype is only for “booking”, the entire certification process such as administration, selection, and testing will be held offline (maybe in at the office or other places).

There are many things that I can learn by creating this prototype. It’s quite simple but then I just realized I hadn’t really thought about some unexpected scenarios for such as:

  • If the user book for a collective people so, would is the account page be? How about their friend’s achievement?
  • How about relocating at the certification process, maybe we can do the selection process out of the organizer office?
  • How the system makes sure that the process of certification (especially, selection process) is done alright?

I think I need to iterate and analyze the prototype. To make sure what’s really need to do, what feature should I avoid, etc.

Prototype Link here.

Notes: Maybe this is not a good sample of the UI and UX process. But, since I know that it wasn’t good enough, I keep publishing it so someday I’ll know how far I go…. I’ll very thankful if you want to give me feedback to level me up

Thanks for reading :) and Thanks to the people who participate in this mini-research.

--

--