Introduction

In this era of youth ambitiously seeking after their dreams, numerous students face challenges while buying books or other stationery materials. Henceforth it is fundamental for all the students to get a stage where they can unhesitatingly associate with their seniors and buy previously used books and other stationery items from them at a lower cost. The Student Connect Application is one such open door for the young engineers. It is an easy-to-use interface where the users can purchase or sell the supplies and books which are not useful to them. This application provides a platform where the students of a college get an opportunity to connect with their seniors while buying or selling books or other stationery items. One of the significant benefits that the users of this application get is that they not only get to connect with their seniors but also save substantial amount of money. The money that the engineering students spend in purchasing the books and their stationery items is high and by this application they can decrease it significantly. To provide security, authentication of a student will be done as they upload a scanned copy of their college identity card. Furthermore, Neumorphic components are used in the application to make it simple and delightful for the students to use. Its aesthetic is marked by minimal and real-looking UI that’s sort of a new take on skeuomorphism—hence the name. It is about the shade of the whole screen, and conveying a totally special experience for users which gives them a feel that segments like buttons or cards are actually inside the background, and are just noticeable in light of the fact that they are jutting out from the inside. The overall style is about strong tones, low difference and the correct play of shadowing [13].

Procedures to Make Gui intuitive

  1. 1.

    Interactivity:

    The UI should provide features that contribute towards making the application interactive, fun and easy to use. The UI should give clear, immediate feedback to indicate that the action is happening, and was either successful or unsuccessful [1].

  2. 2.

    Readability:

    The application should make discoverability easy i.e., at first glance to the interface, the user should be able to understand the flow and functionalities of a particular component [12].

  3. 3.

    Learnability:

    Every aspect of GUI should be crystal clear for the user to understand the motive of the application and the various components and elements that are involved. User should be able to learn their way around the application in a minimum amount of time.

  4. 4.

    Navigability:

    The application should provide easy accessibility of pages. The connection of the pages should be convenient and comprehensible through the components provided. The user interface should be able to guide the users and take them from one logical place on an application to the other with ease [11].

  5. 5.

    Simplicity:

    The application should be minimalistic and should maintain the clarity of its functions. It should avoid cognitive load on a user’s mind and help the user achieve their goals in a minimum possible steps.

Survey Analysis

Section 1

Above charts i.e Figs. 1, 2, 3, 4, 5, 6 clearly portray that a major percentage of students (Approximately 67%) faced issues while buying the exact books and stationery for the subjects in their curriculum. This problem may occur as many students are not sure about the right books and materials they need to purchase (like the best model of a calculator to buy, the best book for a particular subject, exact measurements of drawing tools required, etc.) for their subjects or do not have the convenience of having a bookstore nearby. The results of the survey also depict that significantly a smaller number of students are satisfied by the use they got out of their books and stationery for the amount of money they spent. From the charts shown above we can also deduce that most students do not mind using previously owned study materials to save a significant amount of money and are in need of such a platform that would allow them to do so with sheer convenience .

Fig. 1
figure 1

Question 1

Full size image
Fig. 2
figure 2

Question 2

Full size image
Fig. 3
figure 3

Question 3

Full size image
Fig. 4
figure 4

Question 4

Full size image
Fig. 5
figure 5

Question 5

Full size image
Fig. 6
figure 6

Question 6

Full size image

Section 2

Section 2 of the survey Figs. 7, 8, 9, 10 aims to compare the visual appeal of various neumorphic design components with normal design (flat design) components. For the analysis purpose, Chi-square test was computed.

Fig. 7
figure 7

Question 7

Full size image
Fig. 8
figure 8

Question 8

Full size image
Fig. 9
figure 9

Question 9

Full size image
Fig. 10
figure 10

Question 10

Full size image

Chi-Square Test

The Chi-square statistic is a non-parametric (distribution free) tool designed to analyse group differences when the dependent variable is measured at a nominal level. Like all non-parametric statistics, the Chi-square is robust with respect to the distribution of the data. Advantages of the Chi-square include its robustness with respect to the distribution of the data, its ease of computation, the detailed information that can be derived from the test, its use in studies for which parametric assumptions cannot be met, and its flexibility in handling data from both two group and multiple group studies [14].

Based on the number of responses obtained by the survey i.e., 184 responses a Chi-Square test was computed to get a detailed analysis of the survey. So total of 184 people that use both the UI designs (flat and neumorphic) responded to the survey depending on the UI components (such as buttons, slider, toggle button and radial slider) that they preferred on comparing both the designs.

It is desired to know whether the UI component is equally fascinating to the people on both the UI designs based on some sample components aforementioned. The values of the expected numbers are placed in Table 1.

Table 1 Observed data
Full size table

The hypothesis to be tested is that there is no relation (a null hypothesis) among the UI designs and its components which means there is no relation in the appearance of the components in different UI designs. If the null hypothesis is disproved, as indicated by a large value of χ2 then a significant relation exists. Corresponding to each entry in the table we can determine the expected number under the null hypothesis.

For example, for component Buttons, the expected value can be calculated as follows,

$$ {\text{E1 }} = \left( {{\text{TotalofFlat}}*{\text{TotalofButtons}}} \right)/{\text{Total Table}} = \left( {{5}0*{46}} \right)/{184} = {12}.{5} $$

Similarly, the expected value of other entries can be evaluated. These values of the expected numbers are placed in parentheses in Table 2.

Table 2 Expected data
Full size table

Once we have all the Expected values, we need to find the difference squared (so they are all positive) between the individual cells’ Expected and Observed values as shown in Table 3.

Table 3 Chi-square test statistic
Full size table

Adding all the differences, we get a Total Chi Square,

$$i.e., {\upchi }^{2}=\sum \frac{{\left(O-E\right)}^{2}}{E},$$

where O is the observed (actual) value, E is the expected value

Associated with the distribution χ2 is the number of degrees of freedom, d.f. For the four-row, two-column table of the example, d.f. = 3. In general, d.f. is the product (r − 1) × (c − 1), where r is the number of rows and c is the number of columns. From Table for d.f. = 3, the value of χ2 (where level of significance is 5%) is 7.81. Since 8.898 > 7.81 we reject the null hypothesis and conclude that there is a relationship among the UI designs and its components.

So, it can be inferred that neumorphic components seem undeniably more visually appealing to the users than flat designs. Hence the inclusion of neumorphic design in the application enhances the aesthetics of the overall user interface and makes the user experience more enjoyable.

Proposed System

The proposed system aims to provide a platform for students to buy proper books and stationery from their seniors right within the college campus ensuring safety along with convenience and helping the students get the maximum use out of the study materials they purchased.

  • Students who usually buy previously owned study materials have to purchase these items by physically visiting various different shops where a certain portion of the money is charged by the shopkeeper for acting as a medium to provide them with these materials.

  • Similarly, while selling these study materials to the same stores, students get a significantly low amount of money for their items as shopkeepers look to gain commission from selling these items later.

The proposed system also helps in eliminating the need of a middleman and allows the students to directly buy and sell and negotiate an optimum price for their study materials amongst themselves without having the need to physically visit a shop ensuring that both the buyer and the seller benefit from the deal.

Building Prototype for Student Connect Application

Prototyping is done with help of Adobe XD. Neumorphic components are used to make the application visually appealing. The Neumorphic components help us apply the aesthetic usability effect which states that the users often perceive aesthetically pleasing design as design that’s more usable [9].

The Sign-Up and Sign-In pages are shown in Fig. 11. The Sign-Up form is segregated into two parts and is designed considering Hick’s Law which states that the more stimuli or choices users face the longer it will take them to make a decision. This segregation of pages helps in reducing the user’s cognitive load. The Sign-Up page asks the user to upload their college identity card for verification (This provides security while users buy or sell products and also shows the legitimacy of a particular user) which can be either done while signing up or later by editing their profile.

Fig. 11
figure 11

Sign-up and sign-in pages

Full size image

Home page shown in Fig. 12 marks the beginning of the user experience hence it has been designed to appear simple yet fun and attractive, inculcated with various colors and elements and clear text which adequately distinguishes the functionality of each button and component. In compliance with Fitt’s Law touch targets (buttons) are kept large enough and well-spaced for users to both discern what it is and to accurately select them [7]. Depending on the College and year of Engineering, the users will be shown buttons of the subjects in their curriculum, this helps in reducing the complexity and makes the decision-making process quicker and simpler. To provide ease of the use voice search feature is also included in the application.

Fig. 12
figure 12

Home and voice search page

Full size image

The Product Category Page demonstrated in Fig. 13 designed in such a way that it segregates the equipment, syllabus-based notes, stationery and other study materials required by a particular subject in different categories. This helps the user in searching for what they exactly want and also helps in simplifying and speeding up the product selection process.

Fig. 13
figure 13

Product category, product catalogue and filter page

Full size image

The Product Catalogue Page displays all the products pertaining to the same category in a carousel. The preview images in the product carousel are sized sufficiently giving the users a proper view of the product without having the need to visit the main product page over and over again. This helps in saving the user’s time. The users can add the products they like in the wish-list and later access them with ease to compare and make the decision of buying.

The user can further sort and filter the products based on their condition, price-range, amount of time used, etc. to personalize and customize their search. According to The Law of Uniform Connectedness, elements that are visually connected are perceived as more related than elements with no connection [10]. Hence, elements have been visually paired in the filter and product pages by using similar color schemes, frames and shapes.

Many times, students waste their valuable time and energy looking for the right resource for any particular subject. And very often they go through only the important questions of a subject that are relevant to their exam. As a consequence, collecting all relevant exam notes in a systematic manner has become a basic necessity for all the students. Therefore, the Syllabus and Notes Page in Figs 14 and 15 have been included in the Student Connect Application to help all the aspiring engineers with their study materials and resources.

Fig. 14
figure 14

Syllabus page

Full size image
Fig. 15
figure 15

Notes and video lectures Page

Full size image

Before beginning to read, the majority of students first go through the syllabus. Hence, the Syllabus page was important to be included in this application. The Syllabus Page lists all the modules and concepts that are covered in a specific topic. This page is segregated into two sections namely, Notes and Video Lectures. This feature helps all students to make the most out of this application as they can learn concepts at their own pace and convenience using either the notes or the video lectures.

As making notes takes a lot of time and effort it is extremely beneficial to them if they receive any prepared notes from their seniors. As a result, this application includes a Notes page where all students can find specific notes relevant to a subject prepared by their seniors. Their seniors have uploaded some handwritten notes in the form of PDFs and some important research material that they can link to during their exams. Students who have completed their semester can assist other students by uploading their notes and study materials. This improves not only the quality of interaction between two students but also their sense of obligation for making useful notes for their exams. The student who is uploading his/her notes can charge for those notes as per their convenience.

Students may also inspect the notes before buying them, depending on the seller's price and content condition. This will eventually lead the students to take more notes on themselves without wasting much time in searching for resources. There is also a feature added in this application where all the students can add their favourite notes/PDFs to a wish list, compare them, and buy them later.

In addition, not all students are adept at recalling information from handwritten notes. Many students can only grasp concepts after visualising them, which is only possible if they watch a video on that subject’s specific topic. The videos section of this application was created with keeping this in mind. This section includes the video lectures, or recorded lectures, for a specific module of a subject. Students can choose videos to learn based on the number of recommendations provided by the other students of the same institute. They can also give their own recommendations on the videos they would prefer to learn from. The students have an option to add videos to their wish list, just as they could do in the Notes segment, so they can watch them later.

The Product Description Page in Fig. 16 provides brief information regarding the product and the seller along with some more images of the item. The information is displayed in a detailed yet aesthetically simple manner. Content is kept precise yet relevant and is ordered properly to help the user get information which is exactly required to determine whether they want to buy the product or not (Fig. 16).

Fig. 16
figure 16

Product description page

Full size image

According to the Law of Prägnanz, the human eye likes to find simplicity and order in complex shapes because it prevents us from becoming overwhelmed with information, hence the Publish Ad Page (Fig. 17) is designed with simple shapes and elements with neumorphic effect to make its visuals appear simple yet prevent them from being aesthetically monotonous [6].

Fig. 17
figure 17

Publish Ad and confirmation page

Full size image

Sliders, toggle buttons and dropdown lists are provided as input mediums to make the data input process interactive, fast and accurate. The Page can be easily accessed from any other page in the application by the touch of a single button.

The My Ads Page demonstrated in Fig. 18 vividly displays the active ads along with the previously sold products of a user. The user can easily view their active ads and edit the description and information of those ads by clicking on any of the ads which are currently active. If already sold, the user can update the status of the active ad as sold by clicking on the ‘Mark As Sold’ button.

Fig. 18
figure 18

My Ads page

Full size image

The Chats and Messages Page (Fig. 19) allows the users to connect with each other for buying or selling items. The Chat interface has been kept minimalistic, displaying the most recent dealings of the users first. The user can conveniently switch between chats regarding all the products they plan on buying and the chats pertaining to the items they are selling. The profile of the users with which a user has the most frequent chats are placed on top of the page encircling the user’s profile.

Fig. 19
figure 19

Chats and message page

Full size image

Future Scope

The reach of the Student Connect Application can be further extended in the future by considering the following points.

  • Including students from various different streams (commerce, arts, medicine, etc.). This will provide a lot more students the opportunity to save a substantial amount of money while making life-long connections.

  • A common board can be added in the application to allow students of different colleges to pin their college’s upcoming fests, events, accomplishments, etc. so that students from different colleges can view it, actively participate in inter-college activities and connect with each other.

Conclusion

  • This paper presents the idea of designing a UI template for StudentConnect Application using Neumorphic Components.

  • It gives the users a platform to connect with their seniors by buying and selling books and other stationery materials from them.

  • Easy to understand interface makes this application simple and convenient for students to utilize.

  • Neumorphic Components contribute towards making the user interface minimalistic yet visually and aesthetically appealing.

  • If used properly the application can help a lot of students save their valuable time and money and get the best use out of their study materials.