Capstone: Meal Delivery Kit
Project Overview
This objective of this project is to create an ecommerce site based on a fictional meal delivery company like Freshprep and Blue Apron. We created basic pages using the backend of WordPress and used PHP with WordPress specific functions to build custom post types. We also used plugins such as Advanced Custom Fields to add further functionality to the site. The ecommerce portion is powered by the WooCommerce plugin, which can manage the (fake) payment and information regarding the subscriptions.
<?php
if (function_exists('get_field')) :
if (have_rows('how_it_works')):
while(have_rows('how_it_works')) : the_row();
if (get_sub_field('illustration_guide')) :
echo wp_get_attachment_image(get_sub_field('illustration_guide'),'medium');
endif;
if (get_sub_field('text_guide')) : ?>
<p><?php the_sub_field('text_guide'); ?></p>
<?php endif;
endwhile;
endif;
endif;
Code
This is the code used to output the images and text from the Advanced Customed Fields (ACF) plugin. Since they won't display automatically, we needed to use ACF functions. The code will only run if ACF is installed and if there's an image or texts uploaded to the how_it_works field. Once it was able to verify the images and texts, we can output the image using the WordPress function, wp_get_attachment_image() and calling on the sub field that has the associated text.
Development Plan
Before we began coding or even wireframing, we had a meeting with the “client” (our instructor) to brainstorm ideas and pinpoint any specific things that we needed to include in the site. For example, one of the criteria we needed to include were step by step instructions with graphics or illustrations accompanying the text. We also inquired about what the design will be like: we noted that meal delivery services focusing on organic and natural ingredients preferred a clean, minimalistic look, whereas services focusing on family friendly meals used bolder colours in their brand identity.
Afterwards, we wrote a document referred to as the Memo of Understanding, which we based on the notes taken during the meeting. We included information regarding:
- The meal delivery service’s personas (target audience)
- The aesthetic of the site
- Plugins that will be used
- Content and features for each page
- URL links to competitors or any site that could provide inspiration
- Next steps
In the content and features section, we outlined what we’ll include for each page. For example, the home page will be a long scrolling page with:
- A CTA near the header for discounts and/or promotions, and another CTA near the footer
- A hero image
- An “About Us” section
- Graphics in the “How It Works” step-by-step guide that could be aligned either vertically or horizontally
- Testimonials in the homepage
- Social proof from magazines or TV shows
The Memo of Understanding acted as a contract for the client, so they were aware of what would be included in the site. If they wanted to make any changes or additions, the document would be revised and sent again. It was only when both parties agreed that we could proceed with the following steps.
Once the client agreed and signed off on the Memo of Understanding, we were able to work on the skeleton of the site: the information architecture (sitemap) and the wireframes. The information architecture was based on the journey map, in which we determined the flow that would provide the outcome of a user subscribing to one of the meal delivery services. The wireframes were created on Figma and used the content & features outlined in the Memo of Understanding as reference.
After creating the wireframes, we devised a Development Plan. Since the site was to be created using WordPress, we needed to figure out which pages required custom post types, custom taxonomies, and/or Advanced Custom Fields. We also needed to organize the various PHP files that will be used throughout the site. From a very basic level, header.php and footer.php were to be used on all pages.
It was only after completing these steps that we began working on the pages with the dashboard and coding certain PHP files. Our first priority was to create basic pages with text and images but with no styling. The workflow was a little different than what we were used to for other projects, because we needed to update our localhost site in addition to our live site. Anything that had to do with plugins or working with the WordPress dashboard was to be done on the live site. Every team member who made changes must let others know to pull the updated content to the localhost. When a PHP file of the theme was updated, we pushed to Github and transferred the file in FTP so the changes were also reflected in the live site.
Our final step was styling the theme, which used Underscores as the base. The workflow was similar to earlier where we pushed the updated SCSS files to Github and then overrode the existing CSS file in the FTP. During this process, we also worked on any JavaScript code that would make the site more dynamic.
Although the meal delivery service, Chopped Fresh, was a fictional business, we did a run through of the checkout process, making sure that a real customer would successfully be subscribed if they completed the payment process. We also purposefully made mistakes, such as using an incorrect postal code format, to figure out what the user will see when they encountered an error.
Unlike other sites, deploying the live site was done as the first step due to this project being a group project.
Challenges
During the initial stages of the project, we had issues with splitting up the work evenly between us. Most teams for this project had three to four members, but we were a team of five. We didn’t want a member to feel overwhelmed by the workload, but at the same time, we didn’t want anyone feeling like they couldn’t contribute. For this reason, some of us started working on the following steps, even though the current objective in the schedule was yet to be due.