[RUBY] [Rails] The 12 functions that beginners have added to the problem-solving portfolio are these!

table of contents

Introduction

A while ago, I had the opportunity to hear about the problems of university students, and I learned that many university students had the problem of ** "too many tasks" **. Sometimes I witnessed a student who fell into self-loathing because he couldn't meet the deadline.

Especially since it is such a time these days, regular lessons are switched to online lessons, and teachers cannot check the attendance status of students diligently or impose tests on students, so they issue report assignments. It has changed to. As a result, ** more and more university students are facing more and more challenges **.

That's why ** "I want to help college students who are suffering from many problems" **, and based on that thought, I will create an original app. I decided to.

That said, ** the issues themselves cannot be reduced **, so the idea is to ** create a mechanism that allows you to tackle the issues as enjoyably as possible **. I put out.

Then, ** "〆KiList" ** was born.

(I call it "Shime Christ". I made this because I will list the deadlines.)

Illustrated by Strories by Freepik

Deepen the worries that "there are too many issues"

As explained in Introduction, the purpose of creating 〆KiList was ** to help university students who are suffering from many tasks **. In order to achieve this goal, we first had to dig deeper into the meaning of the problem of "too many challenges."

I thought that the following two points were the roots of the problem of "too many issues" **.

――I don't know the motivation to tackle the problem

--It is difficult to manage the schedule of assignments

Therefore, ** I thought that it was necessary to create the following two mechanisms in order to solve the problem of "too many problems" of university students **.

-** Mechanism to increase motivation to tackle issues **

-** Mechanism that makes it easier to manage issue schedules **

Functions list

〆All the functions attached to KiList are the following ** 18 functions **.

Among these, ** the functions added to realize the two mechanisms necessary to solve the problem of "too many issues" ** are ② ③ ④ ⑤ ⑥ ⑦ ⑧ ⑨ ⑫ ⑬ ⑭ ⑮ ** 12 functions **.

I would like to explain the outline of these functions and the points and thoughts devised to realize the two mechanisms one by one from here!

1. ToDo list function

Overview ToDo list function. It's very simple to use.

① Register the assignment ② Issues are listed ③ Press the Finish button to enter Completed (You can also return from Completed!)

Ingenuity of the to-do list

① Simple

First of all, I tried to ** simple ** . Although it is the main part that is also the application name, I thought that it would be difficult to use even if there are various functions, so I simply displayed ** issue name and deadline ** here.

② Remind

In order to prevent things like "I inadvertently forgot the deadline", I added a ** remind function ** for tasks that have passed the deadline, one day before the deadline, on the day of the deadline. We've also added a ** red hourglass ** to the list for issues that are overdue.

③ Registration of implementation date

When registering an assignment, we also ask you to register the assignment implementation date, which is how many days before the deadline. This is because I think it is important to get into the habit of thinking about "when to do" tasks ** in order to be good at schedule management. I added it with the hope that you can use this mechanism to acquire that habit.

2. Calendar function

Overview It is a calendar that can visualize the deadline. When you register an issue, only the deadline will be displayed automatically. The completed issues are not displayed. Click each issue to jump to the details screen.

Ingenuity of the calendar function

① Simple

Like the list function, I tried to ** simple ** . By displaying only the deadline on the calendar, the deadline can be seen at a glance.

② Deadline color

Issues are usually displayed with the label ** green ** , but issues that have passed the deadline are ** red ** The label is displayed with . At a glance, you can see ** "Issues to be done immediately" **.

3. Like / comment / follow function

Overview These are the three functions that are familiar to SNS.

·How nice

·comment

** ・ Follow **

Ingenuity of the like / comment / follow function

These functions themselves are not specially devised, but everyone who is doing SNS has tasted it once ** "Pleasure to receive likes and comments" "Pleasure to be followed by someone" ”** was implemented with the hope that 〆KiList users will also enjoy it and motivate them to tackle issues.

4. Declaration function (original)

Overview When you register an issue, a declaration button will be displayed. By pressing, you can post ** "When and what task to do" ** to everyone's tweet list.

Ingenuity of the declaration function

① No hassle

So that you don't have to go through unnecessary steps, you can declare it immediately with the touch of a button without having to enter the text yourself.

(2) Systematization of the environment that must be done

We declared it in front of everyone and set up a mechanism to create a situation where we had to do it. If you manage it yourself, you'll just end up saying "I'll do it tomorrow", but I think that if you declare it to someone else, you'll have to do something **. I took advantage of that effect.

5. I also function (original)

Overview By pressing the raised hand mark, you can also register the tasks declared by other people in your own 〆KiList. This mark only appears on issue declaration posts by users other than yourself. I think it is a function that is easy to use mainly for people from the same university or faculty.

I also devised the function

① No hassle

When I saw another person's declaration and thought, "Oh, I had to do this task myself!", I thought that I could register the task immediately without following an extra process, so I added this function. I did.

② Utilize fellowship and rivalry

** There are quite a lot of people who are motivated by the companionship ** "If my friends do it, I will do my best together" ** and the rivalry ** "I must do my best not to lose to that child" ** I think. I set up this mechanism so that such people could actively register their assignments.

6. Tweet function

Overview It is a function that allows you to post tweets.

Ingenuity of the tweet function

ToDo list x SNS

In a lonely environment, I think that there are many people who cannot proceed with the tasks. Therefore, I wanted to create a mechanism that allows everyone to work on issues while actively communicating with other students using the tweet function (SNS-like element), so I implemented it.

7. Graph function (doughnut chart)

Overview The task achievement rate (the ratio of the number of completed tasks among the tasks registered so far) and the deadline compliance rate (the ratio of the number of tasks that have met the deadline) are graphed in a donut chart. I will.

When you complete the task, you can see that the deadline achievement rate and deadline compliance rate have changed.

Ingenuity of the graph function

(1) Quantify and visualize the attitude of tackling issues

I thought it would be great if I could visualize my efforts with numbers and graphs and maintain my motivation, so I implemented it.

(2) Systematization of the environment seen by people

The graph is displayed on My Page. If you jump to that page, others will see your attitude toward tackling your challenges. ** I added this function because I thought that being placed in an environment where people can see their own efforts ** would also motivate me to do my best.

8. Level display function

Overview The level goes up as the number of completed tasks increases. Classes such as "Beginner" and "Intermediate" are also displayed. The higher the level, the more ** proof that you have completed the task well **.

Ingenuity of level display function

① Excitement to aim for the next class

I implemented it with the hope that users will be able to enjoy "What kind of class is next?" And "I will do my best to aim for the XX class!" And motivate them to do their best. There is still room for more variations in this area, so I would like to ** prepare more classes ** and make the specifications so that users will be excited.

② Playful

If you use an app that is too serious, you will soon get bored with it. So, I added some playfulness so that the users can enjoy it and use it for a long time, so I prepared a class like ** "What's this?" **. For example, the Lv.1 class is ** "Baby" **. **cute. I want to grow it **.

9. Ranking function

Overview When the level reaches the top three, the user name and level will appear in the ranking.

Ingenuity of ranking function

Motivation to be on the ranking

I think that being on the ranking is also a kind of motivation. We have added this function so that people will think, "Let's do our best to put our name on the ranking!" However, as you can see, the design is too simple, and even if the name appears, it feels like "what is it?", So I aimed for a slightly more motivational look **.

10. Sticky note function (original)

Overview The registered assignment and deadline are displayed like a sticky note. Today's deadline, you can see the challenges to be implemented today. You can also jump to the issue details page from here.

Ingenuity of sticky note function

Be aware of deadlines while using the app

This app is for keeping the deadline of the assignment, so you need to be aware of the deadline at all times **. Normally, you will not be able to see the deadline unless you go to the 〆KiList page, but by putting this sticky note function on ** My Page and Tweet List Page **, you can use the app. You will always be aware of the deadline while you are doing it. We have implemented this feature to further enhance the prevention of inadvertent deadlines.

Extra: About the color of 〆KiList

When creating the 〆KiList this time, I selected the colors as follows.

-** Main color: navy , orange , ** white ** - Subcolor: gray , blue (when you hover over the button) **

Basically, I was careful to use the main color. I'm not familiar with design, so I came up with the idea of ​​** creating a sense of unity with colors to create a cohesive feeling **, and as a result, I narrowed down the colors used to three.

However, it is not interesting if all of them are in this color, so when you put the cursor on the ** button or a little design part **, use a color that will be relatively familiar to the main color, such as gray or blue. I tried to use it. (The calendar is an exception because the image of Saturday is blue or light blue and the image of Sunday is red or pink)

The main color is ** navy **, but the bluish color gives a more serious impression of "study" and "task". I chose it because I thought it would be easy.

The warm color ** orange ** was added to it because 〆KiList has SNS-like elements, and also elements such as "connection with people" and "encouragement". Because it includes.

** Navy x Orange ** The combination is quite nice, so I mainly used these colors.

at the end

It's been long, but that's it.

In order to solve the problem of "too many tasks" for university students

** ① Mechanism to increase motivation to tackle issues ** ** ② Mechanism that makes it easier to manage the schedule of issues **

It was said that these two mechanisms are necessary, and in order to realize this mechanism, the ** 12 functions ** explained this time were added.

Anyway

"I hope the students can proceed with the assignments with excitement and fun as much as possible"

I created it with the user's point of view in mind.

Thank you for reading this far.

plans

(1) This article is an article in which the "thought" part is in the foreground so far, so ** I hope to add the technical part of how to implement each function in the future. **I think.

(2) This time, I focused on the function, but I will post an overall commentary on the creation of the portfolio (this app) separately. By then, I will do my best to deploy on AWS.