Responsive Design
Smoked Meeting Express is a barbeque food service. The main goal was to create a responsive website that will help simplify the online ordering experience for customers and increase sales.
Smoked Meeting needed to find a solution for customers to order their food and use their services they did not have a standard online ordering system in place.
We started with competitor analysis. We were able to identify new opportunities and see what worked and what didn't work for their direct competitors. We developed a swot table, brand comparison, and market positioning map.
We interviewed 5 meat lovers. We were able to gather targeted information about the user and understand their goals and pains. With the collected data information we were able to create an affinity diagram and an user persona.
Our user persona was based on the behaviors and motivations of the users we encountered in our research.
To help organize our content and the structure of the website we created a site map and a user flow.
We started with concept sketches and later moved to low-fidelity wireframes. Each wireframe was tested with 5 users and changes were made to each version according to our findings and possible pain points in the user flow.
When testing the low-fidelity wireframes we were able to gather information about the flow. Some of our findings were:
Our main brand attributes were: Rustic, Welcoming, Approachable, Tasty, and Unique. These attributes helped us to guide the creation of our mood board. We tested the mood board with 5 people to see if our attributes were represented correctly.
For our style tile we made sure to keep consistent colors and typography that coincides with the brand attributes we were aiming for. We complemented these with tasteful photos of the meats and ingredients.
With the collected data from the low-fidelity wireframes, we were able to create mid-fidelity wireframes.
After the mid-fidelity wireframes were tested, we developed high-fidelity wireframes with the new branding proposed. The usability findings were used to build these screens.
Users can now easily find their menu and can start an online order from the homepage. They can also learn more about Smoked Meeting and their catering services.
After checkout, users can review their order and see their information details. They have the option to go back to the homepage to continue shopping.
Screens for mobile and tablet were designed. The typography, buttons, icons and images were scaled down for each device.
Having a clear understanding of Smoked Meeting business goals and empathizing with the users early on made this project very gratifying.