Project Overview

Jumpstart Mart is a vending machine by Jumpstart Indonesia that provides snacks and beverages in a quick and convenient way. However, as usage increases, several UI challenges have been identified that may affect user comfort, such as less intuitive navigation, an inefficient transaction process, and limited product information.

Here's a brief overview of the aspects that will be improved in the Jumpstart Mart :

Research

After receiving and studying the project brief for Jumpstart Mart, my first step was conducting research to gain a deeper understanding of the existing challenges and gather inspiration from other vending machines.

I began with field research, visiting several competitor vending machines to observe firsthand how users interact with them. I analyzed aspects such as the user interface, navigation ease, transaction process, and how product information is presented. I took notes on the strengths and weaknesses of these vending machines to compare them with Jumpstart Mart.

In addition, I conducted online research to explore vending machines from other countries, especially those in markets with more advanced technology. I looked for UI design references, innovative features, and UX trends that could be implemented to enhance the user experience in Jumpstart Mart.

By combining both field and online research, I gained a clearer understanding of the best practices that could be adapted for improving Jumpstart Mart’s UI. With these insights, I proceeded to outline the key areas for enhancement based on my findings.

Ideation

After completing the research phase, I moved on to the ideation stage, where I started designing the user flow. At this stage, I collaborated closely with Jumpstart’s product owner through brainstorming sessions to gain deeper insights into user needs and business objectives.

During these discussions, we explored key pain points and opportunities for improvement based on my research findings. We analyzed the typical user journey, from product selection to payment, and identified areas where we could enhance efficiency, clarity, and overall user experience.

By aligning our ideas, I was able to create a more structured and intuitive user flow, ensuring that the redesigned UI would cater to both user convenience and business goals. This phase laid a strong foundation for the next steps in the design process.

Wireframing

After finalizing the user flow, I moved on to the wireframing stage. At this point, I translated the structured flow into low-fidelity wireframes, focusing on layout, information hierarchy, and key interactions.

The goal of this phase was to establish a clear visual structure without getting distracted by colors or detailed UI elements. I ensured that essential components—such as product selection, transaction steps, and feedback messages—were placed intuitively to create a seamless user experience.

Throughout this process, I continuously iterated on the wireframes based on feedback from the product owner, refining the design to better align with user needs before moving forward to high-fidelity designs.

Hi-Fi Design

After finalizing the wireframes, I proceeded to the high-fidelity design stage, where I transformed the low-fidelity wireframes into a polished, visually appealing UI.

At this stage, I focused on refining the aesthetics while ensuring usability remained a priority. I carefully selected color schemes, typography, icons, and spacing to create a modern and intuitive interface that enhances user comfort. Additionally, I incorporated visual hierarchy to guide users effortlessly through the vending machine’s purchasing process.

Throughout this phase, I worked iteratively, gathering feedback from stakeholders and refining the design to ensure it met both business goals and user expectations before moving on to the implementation stage.

Here is the user interface I created:

Prototyping

After creating the high-fidelity designs, I developed a prototype for the project. This involved transforming the detailed designs into an interactive model, allowing for a more realistic user experience. The prototype enables testing of user flows, interactions, and overall functionality, ensuring that the design works as intended before development begins.

Iteration and Testing

After completing the high-fidelity design, I moved on to the testing phase. To ensure the new interface would effectively improve the user experience, I created several scenarios that mimicked real-world interactions with the Jumpstart Mart vending machine. These scenarios were designed to test various aspects of the user flow, such as product selection, payment process, and feedback interactions.

I then conducted a survey in the form of a questionnaire, asking users about their experience with the new interface. The survey focused on aspects like ease of navigation, clarity of product information, visual appeal, and overall satisfaction with the transaction process.

By gathering responses from a diverse group of users, I was able to identify areas where the interface worked well and areas that needed further refinement. The feedback helped me make final adjustments to the design to ensure it met user expectations and provided a smooth, enjoyable experience.