We want to show you how the design process of our app prototype – Chop Chop – looked! As there are a lot of misunderstandings and myths around design during the software development process, we want to explain how we came up with the idea of Chop Chop, and how our Design Team approached this project.

This will give you an insight into how our team works on any given project and how valuable all stages of the design are to make a successful digital product.

How it all started

As Chop Chop (you will learn how we came up with this name later on!) was our internal project, we had a Product Owner* on board. Our Partnership & Growth Manager Ashmeet was an initiator of the project and he took the role of Product Owner. He was responsible for the preliminary research that helped to give our idea a more coherent form. And what exactly was our idea?

Product owner is a scrum development role for a person who represents the business or user community and is responsible for working with the user group to determine what features will be in the product release.

Our goal was to create a recipe app for Millennials and Generation X with easy-to-follow and personalized recipes. We know that recipe books are good, but they are not always accessible. We wanted to give recipe creators a modern platform to share their recipes with their followers.

Brand Design

To kick off the design process of our app, we started with a brand creation stage. Comprehensive, consistent and high-quality branding is crucial when it comes to the success of a digital project. As Will Rogers said, “you never get a second chance to make a great first impression.” This rule works with apps and digital projects, as well as with people.

As you can see on the graph below, the average app loses 77% of its DAUs (daily active users) within the first 3 days after the install. Lousy branding and poor visual identification can play a big role in this negative process. If your app is visually unappealing or the stylescape of the app doesn’t fit the project, your users might be more inclined to uninstall your app.

For our app’s branding, we started from the very beginning following the research we mentioned earlier, we knew what kind of project we wanted to build but we didn’t have a name for it! That’s when our Senior Graphic Designer and Branding Specialist Michał stepped in.

The first step for Michał was to meet with the Product Owner for an interview, during which he tried to gain as much information as possible about the project, its purpose, target group, business goals, etc. Ashmeet explained in detail the whole idea of the project, as well as the results of the research.

Name creation workshops

The next step for creating a brand identity was a brainstorming workshop to create a name for our app. A lot of the time, people choose the name for their project randomly, not paying enough attention to this important step. At Setapp, we understand the importance of a great name for a digital project. There are few elements that you always need to remember while creating a name for your app:

• Try to create a brand name that connects with a product. Obviously, it’s not a must but a name that automatically connects with the app’s purpose makes it much easier to sell. Doesn’t Chop Chop immediately bring the vibe of a culinary experience?
• Keep in mind the language of your users. If you’re creating an app solely for Chinese market, consult a native Chinese speaker whether the name sounds right. It’s best to come up with a name that sounds right to anyone, no matter age or native language. That’s what Chop Chop does. No matter if you’re young or old, your native language is English or Japanese, Chop Chop immediately makes you think about cutting and cooking something delicious. Perfect for a cooking app!
• Make it easy to remember. A perfect name stays in your mind after hearing it just once. That’s why the name should be short and easy to pronounce.
• Originality is a must. The branding specialist who carries out the brainstorming workshops has to make sure that the name you decide on is new and original. You don’t want your project to be mistaken with any other and if your brand name is not original enough, you could find yourself having difficulties with various registrations and even possible litigation from existing brands.

With all those rules in mind, our Branding Specialist Michał carried out a brainstorming workshop for our project. He invited several people, based not only on their creative skills, but also on their proximity to the target group. Our branding workshops consist mainly of team based tasks but there is also some individual effort. By the end of the day, all the members of the group had decided that Chop Chop was clearly the best name that meets all the requirements of our project.

As the name was now ready, Michał was able to start working on the logo and the visual identification of the project. It is important to note that the results of his work had a huge impact on UI (User Interface) creation that happened later.

Chop Chop’s logo, in a similar manner to the name, immediately sends a message out about the scope of the project. The invisible knife works great with the name Chop Chop and it’s also very flexible when it comes to animated visuals.

With the whole branding ready, our UX Designer Agnieszka was able to step up and work on the User Experience of our project.

User Experience Design

After the successful brand creation process, it was time to build the User Experience (UX) for Chop Chop. Our UX Designer Agnieszka started her work by conducting an in-depth analysis of the project, its target personas, business goals and the competition analysis. Some of those things were done by the Product Owner at the beginning of the whole process but it was necessary to make significant refinements and in-depth analysis solely for the purpose of UX Design.

To prepare a high quality User Experience, it was essential to clearly define target personas of the project, its business goal and its value for the final consumer. It was also very important to go through the benchmarking process and analysis of the competition.

Another crucial part of the whole process were the interviews with a carefully selected group that resembled the target personas decided earlier on. We try to not work on assumptions – it’s important to do things based on facts, data and the results of analysis, rather than our gut feelings. Key insights from the interviews were:

• Users usually use Google search to find recipes. Therefore, a search feature within the app is a must-have.
• Some of them use tags (e.g. ‘vegetarian’ or a certain ingredient e.g. ‘tomato’) on websites to filter the recipes. Hence, filters are a must-have.
• All users pay a lot of attention to images, they click on the recipes which present photos of ‘mouthwatering meals.’ Therefore, high-quality pictures would be a welcome addition.
• Users look for recipes on the Internet when they want to be inspired, want to prepare something delicious for guests or they have some ingredients which they want to use to prepare a meal.
• As users want to be inspired, a recommendation section would be highly appreciated.
• One user said that he makes multiple portions of the meal (not to waste opened ingredient packs). This means we should add some kind of calculator.
• Users usually cook using written recipes.
• Users often browse the comment sections to see other people’s opinions and genuine pictures of the food they made. Hence, we should provide users the possibility to add comments and to rate the recipes.

UX Interviews gave us a lot of very important feedback. It was crucial to understand the problems that amateur cooks have, their action flow while cooking and what they’re looking for in a cooking app. We got a lot of feedback that truly changed our perspective and had an impact on the scope of our project.

For example, one of our interviewees said that one of her worst cooking experiences was making a crème brûlée. She had all the ingredients ready and started cooking but when she was almost done, she realized that she didn’t have a blowtorch to finish off the dessert. She was mad that her cookbook didn’t clearly state the unusual equipment required at the beginning of the recipe. That’s why, that apart from the ingredient list, we decided every recipe in Chop Chop will also have an equipment list clearly visible.

User stories and User Flow

After finishing up the interview process, our UX Designer Agnieszka was ready to create user stories. Not going into details, User Stories for UX Designers are short sentences that look like this: “As a user I want to … [basic user goal].” Based on those stories, designers get to know exactly what the potential users of your app want to accomplish. As you might guess, every project has multiple user stories.

Once Agnieszka was done with gathering all the User Stories, it was time to create a User Flow. It is an essential part of a UX Designer’s work. It covers all of the actions that might be done by the user throughout the app and it connects them all in a logical manner. A UX Designer’s job is to make the User Flow as intuitive as possible, while covering all of the possible ways to interact with the app.

Agnieszka always kept in mind the creativity of the users and their tendency to choose the most unpredictable ways of using the app. A digital product needs to be ready even for the most demanding clients.

It is also crucial to make the app responsive in all scenarios, even when things go wrong. A lot can happen with the device that can have an impact on how your product works. Your app needs to be ready for every scenario. If it crashes (every app crashes from time to time), you want it to go back to the last page opened when you open it again. That’s why a UX Designer’s job is so important – it outlines how the app works and interacts, once the development work is done.

When Agnieszka finished with her UX work, she passed the torch to Paweł – our User Interface (UI) Designer. But it was not the end of her work. She kept consulting Pawel all the way to the finish line to make sure that the UI reflects the needs of the prepared UX. That’s why it’s so important to have a team that works well together – just like ours!

User Interface Design

User Interface design was the last part of our design process with Chop Chop. Paweł, our UI Designer, worked closely with Michał who prepared branding of the product, and Agnieszka, UX Designer, who made an extensive User Flow. We had to align all of those elements to make sure that the results of our work are satisfying to all sides of the project.

While a black design of Chop Chop is in line with the current design trends (dark mode), the trends were not the only thing that guided Paweł. He purposely used black theme to make the pictures of food stand out and look as juicy as possible!

As you may have noticed – Chop Chop has an exceptionally big pictures for a mobile app. Again, it was a deliberate move by Paweł to make every recipe to look as attractive as possible.

Fun fact: our UI Designer Paweł is also a professional cook! He knows best how to make a delicious looking food – it clearly shows in Chop Chop!

User Interface of Chop Chop is also controllable by voice commands. Isn’t it annoying when you need to clean your hands and stop what you’re doing, just to check the next step of the recipe? That’s when voice commands come real handy!

But for those who actually like to click through their app while they’re cooking – Chop Chop’s UI consists of large buttons and clickable elements so it’s easy to click on the right thing, even if your hands are dirty.

You can check the results of Paweł’s UI work in the video below. Chop Chop got a modern, stylish look that doesn’t steal the attention from what matters the most in cooking apps – the pictures of food and recipes! Don’t you all love it?

Summary

Chop Chop gives you a proper idea of how design process looks like at Setapp. We have incredible, experienced specialists on board who take any project through the design process to deliver amazing results.

What is crucial to point out is that while every member of the Design Team has his or her own area of expertise, it also takes a lot of teamwork to deliver great designs. All stages of the project must be aligned with each other to create a coherent and high-value design experience!

Impressed by our Design Team’s work?

Take a look at our team’s portfolios and feel free to contact them! They’d be more than happy to talk about the design process at Setapp.

• Agnieszka – UX Designer
• Paweł –  UI Designer
• Michał – Graphic Designer & Branding Specialist
• Ashmeet –  Partnership & Growth Manager and a Product Owner of Chop Chop