CookBook APP

2019.04-06, Design & Development
Image

About CookBook

CookBook is pitched as an app that finds recipes. In addition, users can exchange experiences in the community. The application is my graduation project. I participated as a product designer and developer and building this product from 0 to 1. I don't know much about Android application development. During this period, I am very grateful to my friends @CDC and @Yuzhenlei for the help and guidance.

Tell a story

Summer vacation in 2018, I have an internship outside the school. One morning on the weekend, I was very hungry and woke up and opened the takeaway app, but I did n’t know what to eat.

Image

So I had the idea of ​​cooking and began to explore the fun of cooking. #Solemnly declare, I'm not a professional chef. At first, I used a browser to search, check the recipes on the website or consult the cooking experience. However, searching with a browser is troublesome, unable to collect recipes, and inconvenient to exchange experiences with others.

Image

I found many recipe apps. With the commercialization of applications, more and more advertisements in these applications have influenced my judgment on choosing a recipe. So I want to make a recipe app without any ads. This idea has been around for a long time, and I chose it when I chose the subject of the graduation project.

Market Research

In the early days of application design and development, I conducted a market survey of the current situation in China.

At present, the direction of products on the market is mainly divided into three categories :

1. Go to the store : The user uses it in a physical store.

2. Order food online : The user order food through the Internet.

3. Recipe : The user queries the recipe through the mobile phone.

According to the survey, the proportion of users of recipe apps from first-tier cities and second-tier cities accounts for about 57%, and other users come from third-tier cities and below. The top three cities with the highest proportion of users are Shanghai, Beijing and Shenzhen. This shows that the recipe application has a good sinking market.

Project Feasibility Analysis

Scientific decision-making is based on the actual situation of the project, on the basis of investigation, statistics, analysis of technology, operating environment and economic factors.

This application feasibility analysis mainly studies from the following three aspects :

1. Technical feasibility analysis : Evaluate software technology and hardware performance. This application development is based on Android system, mainly uses MVP design pattern, written in Java language, need to learn Java related knowledge, operating system basics, PHP and MySQL basics and other related knowledge . Recipe data chooses to use the existing related data API(MobTech) on the network, which can not only solve the data management problem, but also provide users with a large amount of recipe tutorial data. Complex technical implementation thanks to the help of @cdc.

2. Economic feasibility analysis : Since the development project is only used for my graduation project, it will not involve a lot of economic costs. Initially, only one computer and Android system mobile phone are needed to build the application. For the back-end server, I chose the discount version provided by Tencent Cloud for students.

3. Operational feasibility analysis : In the daily debugging process of development, I can debug on the simulator. In order to make debugging easier, I can also use an Android phone for testing. After the project is completed, I can package the application as an Apk file and share it with people.

User Needs Analysis

A set of data about the gender, age, hobbies and social style of users of the recipe app. Data resources come from iResearch, BDR and Aurora Big Data .

Image

Through the analysis, analysis and research reports of the relevant user groups through the survey data: the gender ratio of the users of the relevant products reaches 7 to 3, and the highest age distribution is between 16 and 25 years old. The user community is also younger.

In addition, people's favorite is the social and experience sharing module of such applications.

Through the user psychological needs analysis to analyze the actual needs of each level.

Image

Use psychologist Maslow's hierarchy of needs to analyze user needs for recipe applications. Obtain the actual needs of users. Users need to find recipes through the APP, cook for themselves or for their families to make the family happier, share experiences and record happiness in life to get attention and encouragement.

Image
* The user's social topology is a mesh topology.

Community function is the best way to exchange information. By adding UGC community, the APP integrates the vertical functions of recipe information, learning and communication. Establish interactive communication and sharing platforms for people with common interests or needs.

Communityization can bring many benefits. For example, users can more easily share and disseminate information. Let users share their own content to improve the product experience and increase the length of time users stay.

System Analysis

The recipe is divided into two parts for design, one is the front desk for users to use, and the other is the management module, that is, the background system where the administrator manages the users.

Image
* Information architecture diagram based on function content.

From the user's perspective, the user enters the APP as a visitor without logging in. In the guest mode, you can browse and search for recipes but you cannot use community functions. When users log in, they can view recipes, and can also view other people's dynamics, comment on others' dynamics, follow others, post dynamics, modify user information, etc.

From the perspective of the administrator, the administrator logs in to the background and can manage the user through the background, prohibiting posting and comments. Posts can be managed, and posts can be set to a comment-forbidden state, or they can be deleted directly. For comments, you can delete comments. The account can be managed, the account can be set to a login prohibited state, or the user account can be deleted. These reasons are to ensure that the community is a positive and positive circle. Administrators can delete prohibited posts through the background, ban special posts from user comments, and freeze and delete accounts of illegal users.

Core Product Decisions
Image

With wireframes (low-fi simplified designs that allow me to get a full scope of the entire app), I tackled app specific flows and went deep into interactions without compromising core product decisions from the get go.

Immersive Guidance

Image

The guide page takes the form of a full-screen picture or video to bring immersion to the user.

Image

The user's registration method is to use the mailbox or user name to register. The user can view the recipe information without logging in, but when the user enters the “Discover” page and “Me” page, the login window will be evoked.

Main Navigation Pages

I only made some needed functions. The main navigation menu contains four items: homepage recipe information recommendation, recipe classification, community dynamics and my information page.

Image

Bottom navigation function orientation :

- Home : With Cookbook, users can immediately start browsing recipes, even if they don't have a login account. And users can customize the display items of the secondary menu.

- Classification : The clear classification of information can help to select users who have difficulty, such as me !

- Discover : Social adds vitality to the app. Users can browse other people's dynamics here, and can also post dynamic sharing food experiences.

- Me : All about me. Including my browsing history and favorite recipe information. And some extended functions.

* Try interesting interactions on the Tabbar.

How to choose Feed ?

Currently popular feeds include : Double-row feed, Single-row feed and Immersive feed.

Image
Double-row Feed
Image

Advantage :

- Static arrangement, Users can selectively browse a piece of information.

- Double-row feed can show more content.

- Facilitate negative feedback on content to assist personalized distribution.

- A good cover can increase click-through rate.

Disadvantages :

- Require users to make too many choices and operating procedures.

- Limited content exposure.

Single-row Feed #Timeline
Image

Advantage :

- Social orientation experience. Stronger social content, Stronger interactive ability.

- Timeline for content distribution, timeliness.

- Rich content.

Disadvantages :

- Limited content exposure.

- Can't do personalized content distribution.

Immersive Feed
Image

Advantage :

- Suitable for pushing high-quality short videos.

- Reduce user operations.

- Immersive content experience, Content is mainly.

- De-hierarchical-ization, promote content consumption conversion.

Disadvantages :

- Weak social ability.

- Limited content distribution efficiency.

So

For Cookbook

The presentation of recipe information requires efficient and diverse. In order to enhance community stickiness, social is also an essential function. Content sharing and timely interaction.

Image

Custom Navigation

The second-level recommended menu at the top of the application homepage is a customizable menu.

* Customize the menu long press to adjust the location micro-interaction example.

Related rules :

- Click on the classification in " More Categories " modules to add.

- Long press the label in the My Menu module to wake up the editing state.

- Click the delete button in the edit state to clear the related categories in the "My Menu" module.

- In the editing state, long press and drag to move the position sequence, this is a complicated process :

// Move processing
@Override
publicvoidonItemMove(RecyclerView.ViewHoldersource,RecyclerView.ViewHoldertarget) {
     if( type== 0) {
           intfromPosition=source.getAdapterPosition();
           inttoPosition=target.getAdapterPosition();
           if(toPosition== 0 ||toPosition== 1) {
           }else{
                if(fromPosition<mData.size()&&toPosition<mData.size()) {
                      ItemBeanitemBean=mData.get(fromPosition);
                      mData.remove(fromPosition);
                      mData.add(toPosition, itemBean);//Exchange data location
                      notifyItemMoved(fromPosition, toPosition);//Refresh position exchange
                      }
                }
     onItemClear(source);//Remove the zoom effect of the view during the move
     }
}

//Remove
@Override
publicvoidonItemDissmiss(RecyclerView.ViewHoldersource) {
     if( type== 0) {
           intposition=source.getAdapterPosition();
           mData.remove(position);//Remove data
           notifyItemRemoved(position);//Refresh data removal
     }
}

//Enlarge
@Override
publicvoidonItemSelect(RecyclerView.ViewHolderviewHolder) {
     if( type== 0) {
           intposition=viewHolder.getAdapterPosition();
           viewHolder.itemView.setScaleX(1.1f);
           viewHolder.itemView.setScaleY(1.1f);//Enlarge the selected view when dragging and selecting
     }
}

//Restore
@Override
publicvoidonItemClear(RecyclerView.ViewHolderviewHolder) {
     if( type== 0) {
           viewHolder.itemView.setScaleX(1.0f);
           viewHolder.itemView.setScaleY(1.0f);//Restore the state of the view after dragging
     }
}

Design Planning

Cookbook UI Kit

Big Collection of the Recipe Design UI Kits for Android

V 1.0 Update:2019 . 04 . 08

Logo

How much seasoning is added is the essence of cooking

Image
Colors

Brand color and Application color

Image
Cookbook GUI

Cookbook Basic Style Library

Tabbar
Image
Navbar
Image
Secondary Menu
Image
Card
Image
Button/Label
Image
Icon Size
Image

Pages

Image
GitHub