Le Wagon final project—Patched app

A phone mockup of the Patched app
The Patched app on mobile


Screens of the first prototype created by the Patched team
Our first prototype—Patched app

Maria and João

Mood boards created by the Patched team to show the visual direction of the app
Team Patched’s visual ideas

Mood boards

All of the Patched prototype screens
High-fidelity prototype—Patched app


Trello boards from the Patched build — first 4 days
Using Trello—planning and building in an Agile way

The build—Week 1

User stories


Seeds of seeds


Front-end foundations

The build — Week 2

Screens showing the core functionality of Patched
The core functionality of Patched

Ruby logic

  • See how many days to go until their vegetable seedlings should be planted in their ‘patch’
  • See how many days to go until their grown vegetables could be harvested
  • Different vegetables need to be planted at different times in the year
  • Different vegetables take different amounts of time to develop
  • The app needed to know when the user’s vegetables were planted or harvested

Solution—days until planting:

  • In our vegetable model we created a global variable (an array of hashes) where we replicated the seasons, their lengths and their start and end days. Here’s an example for Spring:
  • Next, to show the vegetable’s ‘days until planting’ we created a method which would be called if a vegetable was selected by the user for their garden patch. The method would register the start date of the planting season the vegetable matched with and the ‘date today’ (the date of the vegetable’s selection). The method would then subtract the dates to find the amount of days left until planting
  • However, if the season had ended for the year, the method would start counting towards the same season in the following year:
if date[:start_month] >= today.month && date[:start_day] >= today.day
season_date = Date.new(today.year, date[:start_month], date[:start_day])
season_date = Date.new(today.year + 1, date[:start_month], date[:start_day])
  • If the ‘days until planting’ equalled 0 then we would show the user a checkbox in the front end to register when the vegetable was planted:
<% if @vegetable.days_until_planting.zero? %>
<% if params[:instruction_type] == 'planting' %>
<%= render 'planting_check_box', crop: Crop.find_by(patch: @patch, vegetable: @vegetable) %>
<% end %>
<% end %>
  • Clicking this checkbox would also activate the vegetable’s ‘planting date’ and re-set the countdown process:
def planted?

Solution — days until harvesting:

  • In our Crop model (the model for the user’s selected vegetables) we created a method to work out the days remaining until harvest
  • This method would register the ‘planting date’ and add the vegetable’s growing length in days (recorded in our database), then subtract this date and the date of ‘today’ (the date of the user’s session on the app)
def days_until_harvest
harvest_date = planting_date + vegetable.growing_length.days
[harvest_date - Date.today, 0].max.to_i
  • When the harvest date equalled 0, the user would see a checkbox to register when the vegetable was harvested, return to the main harvesting page and trigger a congratulations popup to create an additional feeling of achievement for the user:
<% if crop.present? && crop.days_until_harvest.zero? %>
<%= simple_form_for crop do |f| %>
<%= f.input :harvesting_date, label: false, input_html: { class: 'd-none' } %>
<%= check_box_tag :harvested, 1, crop.harvested?, class: 'd-none', id: 'planted_check' %>
<%= link_to harvesting_patch_path(@patch), class: 'vegetable-card-checkbox-harvesting mx-3 mb-3 js-crop-check', data: { submit: "edit_crop_#{crop.id}" } do %>
<span class="flex-grow-1 ml-3 font-size-h5">
<%= image_tag("harvesting-icon.svg", class: "harvesting-icon") %>
<%= crop.vegetable.name %> is harvested?</span>
<div class="check">
<%= image_tag("tick.svg", class: "tick") %>
<% end %>
<% end %>
<% end %>

Demo day

The result

The Patched app demo, here I am with my team-mate Luis (aka João)

Next Steps

  • Notifications—from a user experience perspective we wanted to add in notifications to ensure a user is alerted to the most up-to-date requirements for their patch. This ended up being out of scope for the limited timeframe.
  • Gamification—from a learning (and fun!) perspective we wanted to develop a gamification aspect of the app, this would allow for further experimentation with JavaScript. We set up our database in advance to ensure we could explore this in the future.

Key Learnings

  • Prototypes are powerful. I was aware of the aligning magic of prototypes from my previous professional experience. However, from a developer perspective I hadn’t appreciated how much of a difference a clear prototype makes to successfully executing a team vision and planning implementation effectively. It also helped a lot when communicating with teachers and teaching assistants when we were stuck or needed help with finding a solution.
  • What’s in a name? Originally we had a model called ‘PatchVegetable’ for the vegetables selected by our app’s user. However, this caused a lot of issues for us. This is because Rails kept registering ‘patch’ as a command to perform a patch request. Eventually we realised what was going on and renamed this model to ‘Crop’. No additional patches or seeds or patch vegetables shall enter a database of mine again!
  • “It works on my machine”. We worked really well together, pushing regularly to Github as a team. When it came to deploying on Heroku there were always many surprises! We certainly learned the importance of doing this at the end of every day and solving unexpected bugs regularly.




Product Designer | Developer | www.louisehill.tech

Love podcasts or audiobooks? Learn on the go with our new app.

Recommended from Medium

Changing your VS Code Terminal to PowerShell 7.1 downloaded from Windows Store.

Software Engineer Interview Questions to Know Inside and Out — Principles of OOP

Check if the Sentence Is Pangram

Perpetual doesn’t mean forever


13. Disjoint Set (Union/Find)

Inversion of control and Dependency injection.

Dridex Loader Technique Used For MSF Shells

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Louise Hill

Louise Hill

Product Designer | Developer | www.louisehill.tech

More from Medium

Adding Voice Commands to a React App

Interact with smart contracts via React and a Node.js API — LogRocket Blog

Recipeez -React Final Project

My first experience of cloning a website using React Framework.