EWOT

Overview

EWOT is an app designed to help users quickly decide on food truck food options. Brisbane is home to many food trucks and a food truck culture is on the rise. However, users often struggle to decide what to eat when faced with so many options.

Our app does this by simplifying the decision-making process by providing a swipe-based interface where users can easily express their preferences, store favourite food truck options and reduce decision fatigue with a random selection feature. The core concept is to make food decisions simple and enjoyable.

Part A - Team Agreement

In this section I joined our team and presented my project to the team members, my project was a bike navigation, but the final vote was not for my project. We had a rigorous discussion and eventually voted for a food truck project, which we named 'EWOT' because it sounds like 'eat what'!

Part B - Design Proposal

Idea Generation and Development

We noticed that there are many markets and food trucks in Brisbane, but users are often confused when choosing what to eat. Through research, we found that:

• There are over 5,000 food trucks in Australia and food truck culture is becoming increasingly popular.
• Users are prone to selection difficulties when faced with a multitude of options.
• Existing food truck websites lack user-friendliness and do not help users make quick decisions.

With this in mind, we decided to develop an application that would help users quickly choose a food truck. We utilised two food truck datasets provided by Brisbane City Hall as data support.

In our first team meeting, we completed the division of labour. Each person would lead a part of the work that they specialised in, but the whole team would be involved in all parts of the task. Together we conducted research on relevant literature and analysed existing food truck websites and apps.

My Contribution

During this phase, I was primarily responsible for interaction plan specifics and UI design, and led the team's concept development.

My specific contributions included:

1. Designed the detailed Interaction Plan:

Our application uses the interaction of selecting a food truck card via left and right buttons. The user can click the 'like' or 'dislike' button based on the name of the food truck and preliminary information. The favourite carts are stored in the favourites list. Users can access the favourites list at any time and trigger a random selection function, enjoying an interesting visual effect similar to 'pairing'. Once a cart is selected, the app displays detailed information, including location, hours of operation and menu, to help the user make a final decision.

In the interaction plan, I elaborated on the following points:

• Structure:
  • The interface is designed to be simple and intuitive, ensuring that users can smoothly browse, favourite and randomly select food trucks.
  • Functional modules are organised in a logical order, with a hierarchical progression, allowing for a smooth user interaction experience.
• Mapping:
  • Gestures and actions (e.g., clicks and swipes) are intuitive and matched to functionality to avoid user confusion.
• Orientation:
  • Provide UI feedback on interactions, such as menu bar colour changes, to clearly indicate the user's operational status and location, whether browsing or bookmarking.
• Visibility:
  • The favourites button and random selection function should be highlighted so that users can easily find them.
• Feedback:
  • The application provides instant feedback to enhance the user interaction experience.
  • Animated feedback on clicks (refer to Tinder).
  • Visual feedback on random selection.
• Error Prevention:
  • Reduces user errors by confirming prompts and limiting actions, e.g. alerts when deleting options on favourites page.
• Language:
  • Use clear and concise language to describe functions and operations to avoid user confusion or misunderstanding.
  • Use words like 'like', 'don't like', 'help me decide', etc. to ensure that users understand each step of the operation.
• Consistency:
  • Design and interaction patterns are consistent throughout the application, such as all interactions (e.g., taps, swipes, etc.) to ensure a consistent and easy-to-use user experience.

2. Drawing high-fidelity UI prototypes:

I used Figma to design a high-fidelity prototype of the application, including the main interface, the favourites list, the random selection page and the details page. I also created interactive effects for the prototype to make it more vivid for user testing and presentation.

3. Moderated the second team meeting:

I chaired the second team meeting to discuss and revise some concepts, such as changing the slide action to a button and adding a 'like' button to optimise the user experience. We also completed the slides for the first presentation, and I was responsible for the front-end and UI design components, including interaction plans, user flows, etc.

Reflection

Through this phase, I learnt the importance of user research, and that a deep understanding of user needs is necessary to design a product that meets user expectations. A diverse team brings a wealth of perspectives, and through effective communication and collaboration, we were able to better refine the project concept. When designing interactions and interfaces, always considering users' habits and mental models can improve product usability and satisfaction. As a team leader, I also improved my leadership skills in organising meetings, assigning tasks and coordinating team members.

Part C - MVP Development

Prototyping and Implementation

In this phase, we started to create the MVP. First, we fine-tuned the UI based on the feedback from the tutors and students during the demo. Then, we started the development of the MVP.

Team collaboration using Git:

In order to increase the efficiency of teamwork, we decided to use Git for the development process. Each person is responsible for his/her own part, which is synchronised to the master branch by pull request. Team member Mingzhi Liu, who has a lot of development experience, introduced everyone to Git and made sure team members were familiar with the process. This approach not only improves development efficiency, but also ensures the quality of the code and the effectiveness of version control.

Front-end Development:

As the main front-end developer, I was responsible for the framework logic of the entire page, as well as the development of the <header> and <footer>, mainly the top and bottom navigation bars. Our group members completed the <main> part of each page separately. With the high fidelity prototype diagrams I designed, we were able to produce them more efficiently.

User Testing and Feedback

After completing the MVP, I designed and organised user testing.

Testing Methodology:

We used Cognitive Walkthrough and Think Aloud to set up two main tasks:

• Task 1: Users select and bookmark the cart by clicking the 'like' or 'dislike' button.
• Task 2: The user uses the random selection function to view the details of the food truck.

Test Objective:

• Task 1: 80% of users can complete the operation within 3 seconds and more than 90% of users can successfully bookmark the food truck.
• Task 2: 80% of users can complete the operation within 5 seconds, with a satisfaction rate of 80% or more.
• Throughout the process, it is hoped that at least 80% of users will find the operation intuitive and the process smooth, with an error rate of less than 10%.

Data collection and analysis:

I developed a detailed test plan and objectives and wrote a test script. All team members sought out testers individually, followed a uniform process, and collected data on users' operating time, success rate, and satisfaction. The data was analysed and directions for improvement were drawn.

Feedback and Improvements:

Based on user feedback, I modified the prototype by adding a delete button and optimising the icon design. Added a user guide at app startup to help new users get started quickly. Adjusted the size and layout of interface elements to improve readability and usability. We also improved the recognition of the back button by adding a visible back to home button.

My Contributions

User Test Design and Implementation:

I wrote detailed user test plans, including test methods, tasks, objectives, and data collection methods. Instructed team members on user testing, with each person responsible for finding testers and following a consistent process. Collected and organised test data, analysed the data and summarised the direction of improvement.

Prototype modification and optimisation:

Based on user feedback, the High Fidelity prototype was modified to optimise the interaction and interface design. Updated the Figma prototype and created new interaction effects for team members' reference and development.

Reflection

Through this phase of work, I deeply appreciate the value of user testing. Feedback from actual users can reveal many problems that we have not noticed, providing an important basis for product improvement. Unified development specification and tools (such as Git and Slack) can improve the team's collaborative efficiency and reduce communication costs and errors. Faced with an MVP that did not match expectations, I recognised the need to be flexible and adapt workflows and strategies to improve efficiency and product quality.

Part D - Final Product

Refinement and Enhancement

In this phase, we continue to refine the product, address previous issues, and prepare for the final presentation.

Workflow improvements:

Recognising the differences in development habits of our team members, we decided to first create a sample template together for the group to refer to and use. In this way, everyone can familiarise themselves with the page creation process and unify their development habits, thus standardising the process and improving efficiency.

Code Optimisation and Functionality Improvement:

We optimised the front-end code to ensure that the page structure and style are consistent with the UI design drawings. Enhanced the adaptation of different devices and improved the user experience. Implemented data interaction and caching to improve application performance. In order to implement more complex functions, we increased the use of PHP, further improving the quality of the project.

User testing and feedback:

We conducted a new round of user testing to validate the improvements in the final product.

Showcase Preparation and Demo

Display Preparation:

We designed and created display content such as presentations and display boards. A demo video of the application was created to show the main interaction flow and functional features.

Team Coordination:

I organised a team rehearsal of the presentation, making sure everyone was clear about their role and content, and controlling the timing.

My Contribution Plan

Workflow Improvement and Team Training:

I created a unified development template to standardise code and design style. Organised team training to improve the skill level and collaboration of team members.

Code refactoring and feature development:

I refactored front-end code to improve performance and maintainability. Developed new features and applied the skills I learnt in creating the portfolio to the final product.

Reflections

The project is nearing its end, the final test of our achievements throughout the semester. With a tight deadline, it is especially important that we keep track of our task list to ensure that the project is completed, but also that we have enough time. This was a great challenge to our individual abilities and teamwork.

Course Reflection

Personal Learning and Growth

UI/UX

Throughout the course of the project, I greatly improved my UI/UX design skills. I was responsible for the major UI design work in the team, ensuring the quality and consistency of the product. I learned a lot during the UI design process, including advanced use of Figma, animation creation, acquisition of materials (icons, fonts, colours), which made me more proficient in the use of Figma.

Front-end

In terms of front-end development skills, based on the DECO7140 course, I became more proficient in using front-end development techniques, learned many new skills, optimised the code structure and improved development efficiency. In the team, I am also responsible for the quality control of the front-end part. We found that team members have different development habits, such as font settings, spacing settings, some are used to using rem, some are used to using px, which will lead to inconsistent UI presentation of the whole website. For this reason, I organised a team meeting and demonstrated a unified coding approach on the spot to solve the problem in time. Team members can use this as a template to ensure uniformity in front-end presentation.

Backend

Back-end content has always been a challenge for me, but in this teamwork, I took the time to learn JavaScript and PHP content. Many thanks to team member Mingzhi Liu for supporting our team's back-end work, he patiently guided us to learn the content and helped us to grasp and understand it quickly.

Leadership and Coordination

As the team leader, I organised and coordinated the team's work to ensure that the project progressed as planned. In the process, I realised that it was more complicated than expected. With team members coming from different backgrounds and specialising in different skills, disagreements and conflicts are inevitable. Democratic voting is often a good way to solve problems, which I think is the strength of a five-person team. But the good thing is that everyone is trying to solve the problem without getting emotional. The heated discussions are all for the success of the project, which is very valuable. I think we are an excellent team.

Critical Reflection on the Course

After completing the DECO7140 course, I was interested in front-end development and wanted to learn more in-depth content such as React, Vue.js, etc. However, I don't think the content of this course is too different from DECO7140, the only difference is teamwork and the introduction of PHP. While this helped me a lot and I learnt a lot from my team members, I would have liked to have learnt more close to the real work if possible.

There was a lot of non-code content in the course, such as too many presentations. It took a lot of time to organise and condense the content for each presentation, and a lot of time to rehearse it. I understand that this is so that we can get feedback at different stages to ensure that the project is moving in the right direction. But the truth is, we didn't get effective feedback on Blackboard. In fact, by presenting the prototype to each other with other groups, we got more and more effective feedback.

Recommendations

1. Appropriately add teaching content of front-end frameworks such as React, Vue.js, etc. to be close to practical applications.
2. Replace part of the demonstration content with user tests, or have the tutor give regular guidance to one group by one to improve the effectiveness of the feedback.