2 Guys With Knives
Local Meal Prep Company

Mockup of MacBookPro and iPhoneX with 2GuysWithKnives website

About the Company

2 Guys With Knives is a small meal-prep company located in South Vancouver. Their core strength is flexibilityand meal customization capabilities. Every meal can be altered to fit any diet: vegan, ketogenic or โ€œI hate eggplantsโ€ kind of diet. Their website is available at 2guyswithknives.com

My role

I am the lead UX/UI Designer, the Product Owner and the head of the IT team.
I am coordinating the project and presenting our design solutions to the founders, Patrick and Sergio.
I oversee the team of 2 developers and do the QA for their work.


At the end of the day, the new platform was launched in time, with multiple new features implemented since then. We have heard uplifting positive feedback from our customers, the sales went up at least 10% and I learned a lot all throughout the project.

    Hats Worn

  • ๐Ÿ‘‚UX Research
  • ๐Ÿ’กIdeation
  • ๐Ÿ› UX Design
  • ๐Ÿ“ฑInteraction Design
  • ๐Ÿ”„Prototyping
  • ๐Ÿ”ฎUI Design
  • ๐Ÿ’ปFront-End Dev
  • ๐Ÿง Product Owner

    Tech Used

  • Adobe XD IconAdobe XD
  • Adobe Photoshop IconPhotoshop
  • Adobe Illustrator IconIllustrator
Screenshot of 2GuysWithKnives website

Problem Statement

The process of customizing dishes was confusing for people.

The modifications were added when the dish was already in the cart, without reference to its ingredients or nutritional details.
The action of customization itself would also prompt the page to be reloaded multiple times, which introduced an unnecessary delay in the user journey.

The goal was to simplify and speed up this process.

Scope & Constraints

This was a redesign project of a working e-commerce store, so there were a few constraints.


We had to launch the newly revamped website before the year 2019 started. That meant we had less than 2 months to complete the project.


The website is Wordpress based, using WooCommerce as its e-commerce platform. This meant the solution we implemented had to be already available in the market in the form of plugins.


There is a custom Delivery Options plugin used during the checkout process. This feature was crucial and had to remain unchanged with the new solution.

Our Users

Main audience of the company are busy people, who are keeping a healthy diet. These people donโ€™t have a lot of time to go back and forth between pages or wait for the page to reload 10 times. They want to order what they want to eat and fast.

User Research Findings

The project began with the research phase. Shadowing, interviews and hands-on research revealed there were major pain point in the current order system.

Screenshot of the basic User Flow for 2GuysWithKnives

Further Research

Breaking down the pain point showed multiple issues. The process of ordering customized dishes was taking too long and it was uncomfortable. It was disjointed, and customers had to go back to products frequently.

Screenshot of the basic User Flow for 2GuysWithKnives

User Flow

We created a new flow, where mods would be available in product pages. There were 2 design problems to solve:

  • redesign the menu with clear customization feature
  • design the product pages

User Flow

Combining the two flows in one diagram allowed us to ensure the user journey was clear and intuitive.

Screenshot of the whole User Flow for 2GuysWithKnives

User Flow Close Up

Here is a zoomed view over a portion of the Menu Page userflow.
User Research gave us some crucial insights into the decision making process on the user's end. A lot of those insights turned into actionable design choices during the prototyping process.

Screenshot of a part of the user flow for 2GuysWithKnives

Product Page UX/UI

In order for the Product Page to fit all of the customizations, I had to structure the customization options to be clear and concise.

The options were split into 3 major categories according to their type. This split informed the prototype and the mock up down the road.

User flow and a mock up of the Product Page with the Mod Options split

Menu Page UX/UI

To accommodate the new features, the Menu Page was redesigned as a grid. The benefits of this were lower scrolling time, larger images and clear affordances.

Screenshots of the Menu Item and the Menu Grid


To showcase the solution to the founders of the company, I created interactive prototypes in Adobe XD for both, wireframes and higher fidelity mock-ups.


Every aspect of the project involved a lot of complexity, to make sure we had the right solution, I developed multiple iterations of the features. The prototype iterations were low or high fidelity depending on the level of complexity.

Screenshot of multiple options of Our Partners page

Website UI Redesign

After the wireframes were approved, the time has come for the UI redesign. At the time there was no defined styles for the website, so I cooperated with our Graphic Designer to establish and create the styleguide like this. This set in stone the brand colors and typography.

Screenshot of the style guide for the 2GuysWithKnives brand

UI Kit

At the beginning the team consisted only of the Developer and myself, so we had a very short feedback loop, but to make his life easier, I developed a number of UI kits like this. This way I could ensure the final result will be as close as possible to what I designed.

Screenshot of a developer's ui kit for a Menu Item element


After the approval of the mockups I created the HTML/CSS versions of them to implement on the website. This made implementation of the design as the WordPress theme much easier.

Screenshot of an HTML and CSS documents

Project Outcome

The project was launched on December 29th, with the first menu going live on January 31st.

There were quite a few bugs and issues at launch since the testing was minimized due to time constraints. For a few weeks, we worked in a crisis firefighter mode, but overall, the project was a success.

After we cleaned up the bugs, we received a tonne of positive feedback and the sales numbers increased 20%.


The more complicated the system, the more research time has to be dedicated. Research prevents obvious mistakes and overdrives down the road.


Testing is crucial. It is much better to cut off features than testing time.


The world does not wait for you. Record what has been done right away, or you will forget the details later on.

Visit the Website