Food Ordering App For A Health Food Cafe
Role
UI/UX Designer
THE PRODUCT
Campus Information System (CIS) is a web application used by the Del Institute of Technology (IT Del) community as a medium to support the educational process. One of the important functions of the CIS application is the search for lecture topics.
THE PROBLEM
Searching for lecture topics at CIS is done by filling in the curriculum year and level / study program of the subject in question, after that the application will display a list of courses starting from semester 1 to semester 6 for Diploma and up to semester 8 for Bachelor, to search for specific lecture topics , students, lecturers, or teaching assistants must go through each course one by one. This search process feels difficult and takes a long time
THE GOAL
Design an searching module to to find specific lecture topics easily
Research
USER INTERVIEW
The interviews were conducted with 16 participants (participant selection based on the intensity of use of the CIS application).
USER PAIN POINTS
User takes a long time looking for topics because they have to browse through the menu one by one
Users must know the curriculum and study program and the level of the course material they are looking for
They can't find course material that they are looking for
IDEATION
We provide a solution to add a search feature to the module and 100% of participants agree with this solution. The search features that participants expect are as follows:
There is only a search box without additional menus as a requirement to search for lecture materials
Search based on the topic of the lecture material (as a search keyword), when typing the topic it will display all the relevant lecture material.
When the searched material does not found, there is a message that the search was not found.
For the location of the search feature, participants have the following answers:
- 40% of participants answered that it is better if the search box is located on the home page
- 60% of participants answered that it would be better if the search box is located on the lecture menu.
DESIGN
SKETCH
Next, I sketched out paper wireframes for each screen and keeping the user pain points.
PROTOYPE
I made high-fidelity prototype used for further testing
FIRST USABILITY TESTING
THE PROBLEM
From the testing stage, it was found that the problems experienced by the participants were as follows:
Display that is too stiff with menus on the sidebar
There are too many search words on the material search page so that it confuses the user which is the real search button.
SOLUTION
The solutions given to overcome these problems are:
Change the position of the sidebar to a menu bar, so that the menu bar downwards when it is not moving, making it easier for users when they are at the very bottom of the page, users do not need to scroll up the page to switch menus.
Simplify the view of searching for lecture materials by using only 1 search word.
REFINE THE DESIGN
SECOND USABILITY TESTING
THE PROBLEM
Next, we conduct the second usability testing, which aims to find out whether the prototype we have made is in accordance with what they want for a better CIS change. From the second testing stage, it was found that the problems experienced by the participants were as follows:
The search box is too narrow, so when you want to enter a long topic, it doesn't fit
The color is too bright, so the user is not comfortable using it.
The search results are in the form of tables, making the display too rigid, and adding pages to download files reduces efficiency because they still have to switch one more web page to download only.
SOLUTION
The solutions given to overcome these problems are:
Widen the search box, so that long material topics can fit
Change the color to be more harmonious and not too bright.
Change the search results into a list form, and when the title/topic of the lecture is clicked, it immediately downloads the file, so it does not display additional pages to download the file
REFINE THE DESIGN
THIRD USABILITY TESTING
THE PROBLEM
After implementing the changes, we conducted the last usability testing t to know whether the prototype we had built was in accordance with the user's need.
From the third testing stage, it was found that the problems experienced by the participants were as follows:
The weekly schedule that is displayed on the material search menu makes the user not too focused on the search
The user still has to search for the material he wants one by one because the user wants to find material based on the lecturer, study program, academic year, semester of the school year
The search results only display course materials that match the input in the search box
There are no suggestions when typing a topic
SOLUTION
The solutions given to overcome these problems are:
The weekly schedule is not displayed after entering the material search menu
Make a drop-down sort by based on the lecturer, course, academic year, semester of the school year, to make it easier for users to find the material they want
Displays all search results related to user input in the search box.
REFINE THE DESIGN
END RESULT
After implementing the changes, we re-tested with the user, in this test it was found that the prototype we built was in accordance with the user's need.