Case Study: An Online Portal to Local Cuisine Delights
Brief Description
RasaIndonesia is an experiential travel guide that showcases traditional Indonesian cuisines through a website platform. The project was carried out in partnership with RISTEK, an organization within the Faculty of Computer Science at the University of Indonesia, as well as the Faculty of Economics & Business. Our project team was composed of a UI/UX designer, a project manager, a front-end developer, and two back-end developers, and the development process took three months to complete.
It is worth noting that our team did not rely on a pre-established UX framework, such as design thinking. Instead, we prioritized the client’s objectives and worked diligently to not only meet but also surpass their expectations.
Objectives & Goals
Naturally, our primary aim was to ensure client satisfaction by adhering to their objectives. Some of these objectives included:
- To create a comprehensive, crowdsourced database of authentic and traditional foods, drinks, and ingredients from Indonesia.
- To celebrate and preserve the cultural and culinary heritage of different regions by highlighting dishes that make them special.
- To provide a platform for foodies, travelers, and culinary enthusiasts to discover new tastes and cuisines.
- To educate and inform people about different cuisines and ingredients, including their history, preparation, and cultural significance.
- To support local businesses that sell traditional cuisines by providing a platform to promote said businesses.
It is also worth noting that our client requested a website that was similar to https://www.tasteatlas.com/.
To achieve this, we established sprint goals that were aligned with our client’s objectives.
Our Process
Given our decision to forego the traditional approach of User Research, our team proceeded directly to the Wireframe and Prototype (Design) phase. As we recognized the absence of User input in the initial stages of the project, we prioritized Testing to ensure we were meeting their needs and preferences. To provide a comprehensive overview of our process, our team followed a methodology that encompassed the following steps:
Firstly, we established a clear understanding of the client’s objectives and expectations. Then, we proceeded to the Design phase, creating designs that reflected our client’s vision. With the Prototype in place, we conducted thorough Testing to assess its functionality, user-friendliness, and ability to meet our client’s goals. Following this, we refined our designs and made necessary modifications before proceeding to the Development phase. Throughout the project, we maintained open communication with our client to ensure their needs were met at every step of the process.
Product Users
It is important to thoroughly describe the roles and user groups that will be interacting with a website. Our website, RasaIndonesia, is no exception. In this case, there are two distinct user roles that we need to consider: guests and admins.
- Guest
Everyone (quite literally everyone), who has access to this website can use all the features on RasaIndonesia. Meaning, there will be no authenticated user that can access some features. Everyone that are curious about Indonesia’s local cuisines will be our potential users.
2. Admin
Admin can input the data manually for each region. In this case, the admin will be our client. Since the admin interface will utilized the framework we will going to use, I did not partake in this design.
Features & Functionalities
It is also essential to provide a detailed overview of the features and functionalities that will be incorporated into a website. In the case of RasaIndonesia, there are four distinct features that we have identified as key components of the user experience:
- Landing page consists of a search bar that enables users to easily search for local cuisines. This feature is critical for ensuring that users can quickly and easily find the information they are looking for, without having to navigate through multiple pages.
- A page consisting of Indonesia’s map with each region is clickable that shows its local cuisines. This feature is designed to provide users with a visual and interactive representation of Indonesia’s culinary landscape, allowing them to explore and discover local cuisines in a fun and engaging way.
- A detailed cuisine page for each dish, featuring brief information about the dish’s ingredients, history, fun facts, and local businesses that sell the dish. This feature is designed to provide users with a deeper understanding of each cuisine, and to facilitate engagement and connection with local businesses.
- Language switch button that enables users to toggle between Indonesian and English. This feature is critical for ensuring that our website is accessible to a broad audience, regardless of their language proficiency or background.
Web Structure
Another important thing in this whole process is to ensure that all website features and functionalities are organized and presented in a clear, user-friendly manner. To achieve this goal for RasaIndonesia, we have developed a comprehensive Information Architecture that visually and structurally represents all the key features of the website.
The Information Architecture for RasaIndonesia is designed to provide users with an intuitive and seamless navigation experience, enabling them to easily access all the features of the website. The architecture consists of a hierarchy of pages, with the landing page at the top level, followed by region pages (explore map) and cuisine pages (food information).
Low-fidelity
After defining the Information Architecture for RasaIndonesia, the next step in the design process is to create a low-fidelity prototype or wireframe.
The low-fidelity prototype or wireframe is an essential step in the design process as it provides a visual representation of the website’s layout, structure, and functionality. This stage allows us to identify any potential issues with the website’s design and layout, including navigation problems, usability issues, or inconsistencies in the overall user experience.
During the creation of the low-fidelity prototype or wireframe, we will focus on developing a simple and functional layout that provides users with a clear and intuitive navigation experience. We will also ensure that all the necessary elements of the website, such as the search bar, interactive map, and cuisine pages, are included and working as intended.
By creating a low-fidelity prototype or wireframe, we can gain valuable feedback from stakeholders, users, and other members of the developing team, enabling us to refine the design and ensure that the final product is user-friendly and meets the needs and goals of our target audience.
Design System
Now that we have our wireframe, the next step is to develop a design system as a set of guidelines and standards that define the visual language and aesthetic of the website, including elements such as typography, color scheme, and components. The design system serves as a reference guide for the high-fidelity prototype, ensuring that all elements of the website are consistent and aligned with the overall design vision.
The color palette was checked with a contrast checker beforehand to ensure that the content on the website is readable and accessible to a wider audience.
High-fidelity Prototype
Proceeding with the design process, I moved on to create the mockup screens utilizing the design system as a guide. The design system provided a set of guidelines and standards for designing the user interface, ensuring consistency and coherence throughout the screens.
p.s: These are the final designs after going through Usability Testing.
Desktop Version:
Mobile version:
Tablet version:
The mockup screens serve as a crucial point of reference for both the client and the development team, as they provide a clear visual representation of the design direction and functionality of the website. This helps to avoid miscommunication and confusion throughout the design and development process, ensuring that the final product meets the client’s expectations and objectives.
In addition, it is also important to create a responsive website that can adapt to different screen sizes and devices. To achieve this, I created three different versions of the screens, each optimized for a specific screen size and resolution.
By creating multiple versions of the screens, it is ensured that the website remains user-friendly and accessible across a range of devices, from desktop computers to mobile phones and tablets. This enhances the user experience by providing a consistent and optimized layout, regardless of the device being used.
Moreover, by collaborating with the front-end developer, we were able to ensure that the design was translated accurately into the final product. The developer requested the three versions of the website to ensure that the responsive design was implemented correctly and that the website would look and function as intended on all devices.
Usability Testing
Finally, the final step is evaluating the effectiveness of a website’s design is conducting usability testing (UT) with actual users. In this case, we randomly selected five users to participate in the UT, given the tight schedule of the project. Adhering to Nielsen Norman’s testing methodology, which recommends testing no more than five users and conducting as many small tests as possible, we proceeded with remote UT to evaluate the website’s overall flows.
The participants we chose had no involvement in the development process and were not familiar with the design process, ensuring that their opinions would not be biased. Thus, we could gather the most authentic feedback from them and identify any pain points that needed to be addressed. In order to test the website’s entire flow, we avoided giving specific tasks to the users.
The prototype presented to users for UT was the initial version, which still used the old design instead of the updated design seen in the high-fidelity prototype section. It is essential to note that the design in the prototype was not yet final.
Here, you can try it by yourself.
Our findings indicate that all participants were able to navigate through the website without encountering any difficulties. Nonetheless, we did receive feedback that highlighted a specific pain point. When shown the region map, one participant struggled to understand what action it would bring or what their next step should be. This feedback will help us enhance the design and make it more user-friendly.
Design Improvement
To address the issue in the Usability Testing, we developed a solution to enhance the user experience. We suggested the implementation of a tooltip feature that would appear when users hovered over the region area, providing information on what actions are available to them. This tooltip would be concise and clear, ensuring that users do not feel overwhelmed by excessive information.
Another improvement in our design came from our clients and not from users. We received input from our clients requesting that the illustrations used on the website reflect Indonesia’s rich culinary culture.
We took this feedback into consideration and made significant improvements to the illustrations used on the website. We researched and carefully selected illustrations that accurately represented Indonesia’s diverse cuisines, ensuring that they would resonate with the target audience.
Final Product
After all of the improvements were made, the design was finally ready to be developed. The functionality was coded and after bug hunting, the final product was staged. If you are curious, here is the link to the final product :)
Please note that the website might not be fully working.
My Take in this Project
This was my first opportunity to work on a collaborative project with another faculty for the first time. In this instance, we were under strict timelines and the client’s objectives took precedence over conducting thorough user research.
While this approach may not align with the classic process of UI/UX, I found it to be a valuable learning experience in terms of real-world project management and client collaboration. Working alongside talented and supportive team members, I was able to enhance my skills in UI/UX and gain practical experience in the field. Moreover, this project allowed me to gain insight into the importance of clear communication during the development process, and how it can facilitate a more efficient and effective workflow.
In the end, although I may have skipped some aspects of the traditional UI/UX process, I was able to deliver a successful project that met the client’s objectives while also improving my skills as a UX researcher.
— — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — —
😊 If you read until the end, you rock! Leave me some feedback if you have and please do not hesitate to hit me up through Instagram or LinkedIn.
Ciao!👋
