2 Guys With Knives
Local Meal Prep Company
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.
Outcome
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.
- 👂UX Research
- 💡Ideation
- 🛠UX Design
- 📱Interaction Design
- 🔄Prototyping
- 🔮UI Design
- 💻Front-End Dev
- 🧠Product Owner
Hats Worn
-
Adobe XD 
Photoshop
Illustrator
Tech Used
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.
Time
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.
Tech
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.
Code
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.
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.
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.
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.
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.
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.
Prototyping
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.
Iterations
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.
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.
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.
HTML / CSS
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.
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%.
Research
The more complicated the system, the more research time has to be dedicated. Research prevents obvious mistakes and overdrives down the road.
Testing
Testing is crucial. It is much better to cut off features than testing time.
Record
The world does not wait for you. Record what has been done right away, or you will forget the details later on.