The Overview
This case study discusses the process my team, CodeBrew and I went through as we re-designed and developed a fully functioning Web Application for a food truck in University City. As a team we researched and decided that we all wanted to focus on the Tyson Bees, which serves Mexican Korean Fusion street food. For this project each team member had two roles, my roles of the team were as Project Manager and Coder. During this time, I worked within the team to ensure our Designers and Coders’ progress were on track with our timeline, reviewed and quality checked all Figma designs and front-end/coded design functionality, created and implemented micro-interactions, and helped Designers with usability testing and the interview analysis. The Final version of Tyson Bee’s web app allows its users to view the menu and place orders, change the quantity on the order, and view their past orders and rewards.
The Context and Challenges
Background
My Team and I were tasked with selecting and creating a fully responsive web application for a food truck with a Time Budget of 10 weeks for our UX Design II class. I was the Project Manager and Coder in our team for this project. Overall, I have worked in various types of teams and as Project Manager and Coder I had a few goals that I kept in mind to help lead our team to successful design and develop a Web Application that allows for an easy and intuitive user experience.
Project Manager Responsibilities:
- Assign and Delegate weekly tasks to Coders and Designers based on skillset and task urgency.
- Create and maintain an safe environment in which team members feel confident to voice their opinions and ideas.
- Review all completed designs and code for anything that may be missing.
- Remind team members when something is close to its due it
- Participate and encourage team member’s participation during weekly team meetings.
- Ensure team members are all on the same level of understanding, especially when a member is absent from class or meeting.
- Review File structure in Teams to ensure all members are able to locate files with ease
- Schedule Usability Testing with our prospective users
- Ensure our team meets set deadlines
- Ensure Client (our professor) is updated on our progress
Coder Responsibilities:
- Work with UX/UI team to ensure that the design is something that can be achieved in the development phase within our time budget.
- Plan and Create Micro-interactions for the Web Application
- Assist the Lead Coder on our team with any dev issues.
- Work as the communicator between the Designers and Lead Coder to ensure they both are on the same level of understanding.
Other Responsibilities:
- Research and Collect quality images of the menu items for the Designers to use.
- Provide feedback on Design Sketches, Wireframes, and Prototypes.
- Assist Designers with creating layouts and making design choices.
- Attend Designer Weekly Meetings to make sure all tasks are being delegated and getting a rough estimate of when design will be ready for review.
Problem
This project was assigned to challenge me to build on my HTML, CSS, and Javascript skills to successfully create a complex microinteraction. This project required me to apply and create connections between the content I already knew and what I just learned in the beginning of the class. From the class, I learned that Microinteractions are an essential piece to how a user understands what they are doing on an interface.
Goals
- Front and Back-end code functions properly.
- Overall, user task flow is simple and intuitive.
- Web App’s designs capture and properly exhibit Tyson Bee’s unique branding.
- User leaves the web app with a positive experience.
The Process and Insight
Phase I
As Project manager I wanted to make sure that everyone on the team understood the food trucks goals, our user and their mindset. This is why I made sure we all reviewed and gathered an understand of our user from the research (user persona, journey map ect.) provided to our team individually, and then discussed the material and analyzed it as a team. Making sure to note parts in the research that we needed to keep in mind as we redesign and develop the web application. Also, while reviewing the previous research we noticed some of the provided information either needed updating or was missing components.
Phase II
Once we were all on the same level of understanding our user’s needs and our client’s (Tyson Bee’s) needs, we began working on our design sketches. While designers were designing, Lead coder and I began coding our Team Page and our Web Apps Temporary Landing Page. Once the designers had created their Sketches, as a team we went through each and finalized a version that would be successful in achieve our user’s goal and be practical for our developers to develop in the time frame that has been allocated to them.
Phase III
Next came the difficult part. All members of the team had a lot to do in a matter of a week. Designers had to create Alpha Prototypes in Figma. Coders were tasked with setting up the database and creating the structure for all the content that will be in the database. Data Architects were tasked with collecting any information that will be in the database as well as filing the collected information in a clean manner in our Teams’ File section. Due to the situation at the time, Data Architects were having trouble collecting images of the Menu Items with good quality. This was causing the coders to fall a bit behind schedule and was causing frustration in the team. For this reason, I stepped in and collected and formatted each image using Canva to properly crop and size each image without compromising the quality of the image. I also created an Excel file to maintain all the menu information in one space to avoid confusion or frustration. Once I populated the excel files with the previously collected information from the food trucks menu, I had delegated typing up the description to one of the Data Architects as a task for the following week. Below are images of the Excel File some of the Images I edited to use in our application. Visit our Admin Menu Items Page to view all the content in our database (from the excel file),
Phase IV
As Secondary Coder, I was assigned to create the Micro-interactions while Lead Coder worked on the database and creating a Admin Menu Items Page using PHP, HTML, and Css. During this week, I needed to go through our current designs and figure out what micro-interactions would be appropriate to implement into our project. I wanted to make sure that it was components that were required, so that whatever I build will most likely be incorporated into the final build. I personally don’t like wasting my time, and if I plan to map out and build a functioning micro-interaction, I want to build something that will be used. So, I mapped out and coded components that both Designers and Coders believed we would absolutely use. Below are the Five Micro-interactions that I designed and coded for our project with the help of our designer sketches.
See the Pen Tracking Order Progress Bar by samiha shoshi (@shoshsf) on CodePen.
See the Pen Delete Menu Item from Cart by samiha shoshi (@shoshsf) on CodePen.
See the Pen Quick Add Button by samiha shoshi (@shoshsf) on CodePen.
See the Pen Modify Order Time by samiha shoshi (@shoshsf) on CodePen.
See the Pen Menu Categories Buttons by samiha shoshi (@shoshsf) on CodePen.
The Solution
The final solution is a intuitive and responsive web application that allows customers to browse the menu without logging in. Users can view the various categories and decide what they want to order based on the Menu Item’s Hero Image, Price and Description which were written and collected by CodeBrew. Users are able to then place their order and pay through the app. Due to the truck inability to take credit card, customers are given the choice to pay using Venmo or to pay at the truck while picking up the food. In order to allow the users to do so without conflict, before payment, they must log in and at the truck they must show the confirmation page to pickup their order. The User is also able to view the order history, so they can potentially reorder a meal they had previously in a matter of minutes. Users are also given Reward points and can view their progress to earn a free drink. This was inspired by how the truck owner gives free drinks to repeat customers and new customers. As a team, we thought we could incorporate that into the app, in a way that motivates customers to order more meals from Tyson Bee’s using the Web Application. Last but not least, the final component that impacted our designs and development of the app were our user’s feedback. Throughout the ten weeks, we had 3 rounds of usability testing, and after each round we as a team sat down and learned from our interviewer and changed our designs in accordance to the feedback. Sometimes we would found that some users liked a component and others did not, in this scenario we as a team evaluated the components purpose in the application and analyzed if it was the design or functionality that is disruptive to the user’s task flow.
The Result
In my opinion, our Web App for Tyson Bee’s is a success because it solves the our project’s established problem and we achieved our goals the we had for the users using the app. We wanted to provide our users with an simple and reliable ordering platform that is intuitive and relatively quick to order from. Through usability testing and analyses of the results, our team was able to focus and improve the reported pain point in our previous designs. As a Coder on our team, I was tasked with creating and implementing micro-interactions that complement our unique branding in appropriate place in our web app. As a team player and Project Manager when the designers were struggling to apply the user’s feedback in the design, I provided potential ideas to help them move forward. When our designers were struggling with time, I made sure to assist them in any way I could without overstepping. Personally I believe that a leader isn’t how they lead, it is how they help the people around them stand up stronger. This is something I, as the project manager, followed throughout this team project. Though I think our application is successful, there are a few areas that could be improved to positively impact our user’s experience further. As we all know, everything can always be improved as nothing is perfect to everyone. To conclude, Tyson Bee’s new Web App provides their users with a easy online ordering experience which allows for a quick and easy pick-up, making sure that our app users don’t have to deal with the hassle of a long line.