Happy Sunshine App Design & Development
Anoushka Sandeep
The Overview
Tasked with the project to design, prototype, and develop an app for a local food truck, I - and
five other members from my class - spent three months ideating, researching, testing, and
securing what would be our final product. During the semester before, I had been a member of a
different group where the project had to been to pick a food truck and perform research and usability
testing so we could create a stellar prototype for a mobile food truck app on Figma. For the next semester that this project ran,
we were put into different groups where we’d select a prototype project from the last semester
to finalize and program to become a real application available across all devices. I’m grateful
that the project chosen project is the same one that I had worked on last time, and so the
familiarity of the design, the food truck, and the menu were beneficial. Each person in our six
person team had a role to fulfill and duties that followed. My positions were the second coder
and the second data architect, where my primary roles were to program microinteractions, menu
and content organization, and aiding with whatever other tasks I could partake in — including
image selection and processing, creating design elements for the final visuals, and performing
usability testing.
Context & Challenge
The setup of this project is much like how development projects work in the real world.
We as a team communicated using Teams and managed our weekly tasks with a KanBan and weekly
meetings. We found out early on that open communication was vital and that it was optimal to
make sure everyone always had tasks to complete.
Process & Insight
Early on in our process we had to figure out what our critical path would be that we would
focus on designing and coding for the rest of the term. After discussing our main ordering task,
I sketched and organized the wireframes for the critical path. While some elements have changed over
time after multiple rounds of usability testing, the key features of the critical path held strong.
The Solution
We then collected all of our content and images needed for the project. I sought out license free
images for our menu categories and edited and prepped them to be web-ready. I also edited some
graphics to make the colorful category panel images, and made multiple versions of each so that we
had properly scaled images for different devices.
While the images were being prepared, our other team members focused on wireframing and
prototyping the critical ordering path on Figma for mobile, tablet, and desktop. This was
the process for a few weeks early on – we would have some people focusing on preparing visual
elements and organizing the data, some people creating wireframes and static pages, and others
performing testing to see what we could focus on improving.
Later during this phase once most of the imagery was set, I designed and programmed a
few complex microinteractions using Codepen. Microinteractions help enhance the experience
and visual appeal of the application and it was best to have someone on the team focus on
developing these while they had the time to do so.
The first microinteraction I made was a hover effect on the lunch bag. The lunch bag
icon on the top right of our navigation bar served as our item cart. I programmed this
so that when hovered on, the bag would swing side to side as if someone were swinging
it naturally. It’s a cute effect that helps with building a friendly atmosphere. I used
keyframes to animate the bag swinging side to side and used only HTML and CSS.
The second and third microinteractions I made didn’t make it to the final cut, but
they were fun to create and allowed for users to select items for their order.
The fourth microinteraction is an order status progress bar for customers to reference
after they have ordered their food. Because we are creating this app for educational
purposes, we’re not taking actual orders on the website and so we decided that the progress
bar would animate on a page load. Once the order confirmation page opens up, this progress
bar would fill in itself. The first egg denotes that the order was placed, the middle egg
denotes that the order is in the works, and when the progress bar is at the last smiling egg,
it means the order is ready.
The Results
The concluding two weeks were definitely the most gratifying. I helped wherever I could
to make sure the final transition process of the project would go smoothly, but something
I learned was how valuable it was to have reliable, well-collaborative teammates. Our primary
coder and designer integrated the HTML, CSS, and PHP code to make sure that the final product
is fully functional and all notes from usability testing have been utilized. The final product
is full-fleshed and functional as a high level prototype and demonstrates the efforts of our
team wonderfully.
