Graphical user interface and 3D model of an automated teller machine (ATM) designed for children. This project was developed as a result of a design thinking exercise in the subject, ‘Human Computer Interface,’ in my undergraduate program.

My role:

Team Leader, Prototyping, Interaction Design, 3D Modeling

Team:

Kewal Shah, Adhishree Ranpura, Harsh Sinha

Languages and Tools:

Draw.io, HTML, CSS, Bootstrap, jQuery, Visual Studio Code, Blender, Marvel app, Adobe InDesign, Adobe Spark

Empathizing

The first thing that came to my mind when I was given the problem of designing an ATM for kids was memories of accompanying my dad during his ATM transactions sometime during 8th or 9th grade. I must admit my initial motive was to escape the hot summers in my city and enjoy the air-conditioning in the room the ATM was installed. However, I soon began to take an interest in how remembering a few digits and pressing some options in a sequence could make the machine dispense cash.

Around 5 years later, my dad handed me my own ATM debit card because I got admitted to my undergraduate university, which is located in a city far from where my parents stay. My experiences with the ATM during my college years were not all good. During this period, I once withdrew a large amount of cash and ended up spending a lot on a single day. I also lost my ATM card by forgetting to collect it from the machine after withdrawing money – twice! Each time I had to immediately call up my bank, have them block the card and issue a new one.

Considering the problems that I faced even during college, I knew an ATM designed for kids would have to be a lot different than the traditional ATMs. However, it was necessary to address why would it be required in the first place.

Why would parents and children want a PlayTM?

Definition

Goal

Design an ATM for children 5 to 10 years of age, which allows them to withdraw money, view their account balance, and deposit checks.

Requirements

• The ATM screen should be appropriately placed to suit children of different heights
• The interface should be as engaging and intuitive as possible
• Imposing a limit on the amount that can be withdrawn per transaction to encourage them to save money.

Ideation

During the ideation phase, we came up with many ideas to make the interface as simple as possible. We thought it would be better if the ATM had a biometric hand scanner for authentication instead of children having to carry a card and remember a pin. Having only 4 denomination options to withdraw money along with a maximum weekly withdrawal limit would limit children from spending a lot. To make the design more engaging, we included assistive LED lights in our model to provide visual feedback and designed a video-game-like interface for the UI with an option to select a character as a virtual assistant. For example, a boy can summon his chosen assistant with a command, “Hey Djinn,” if he needs any help with a transaction.

Prototyping

Since our entire team was comfortable with HTML, CSS, and JavaScript, we decided to design and prototype with these, with Visual Studio Code being our text editor. We made use of libraries like Bootstrap and jQuery for improving the UI and adding audio and timers. Below are snippets of how we manually added hotspots using the <map> tag in HTML and added audio effects which would play when a user hovered over the characters.

HTML & CSS

            <div style="position: relative;">
                <img src="images/avatars.jpg" usemap="#avatars" 
                style="position: absolute; margin: auto; padding-left: 77px; padding-right: 73px;
                padding-top: 53px; padding-bottom: 50px; height: 100vh; width: 100%;" />
                <map name="avatars">
                    <area id="1" href="selectoption.html" shape="rect" coords="235,300,450,870" />
                    <area id="2" href="selectoption.html" shape="rect" coords="535,300,850,870" />
                    <area id="3" href="selectoption.html" shape="rect" coords="990,300,1140,870" />
                    <area id="4" href="selectoption.html" shape="rect" coords="1350,300,1510,870" />
                </map>
                <img src="images/background.jpg" style="height: 100vh; width: 100vw;" />
            </div>

jQuery

$(document).ready(function () {
    $("#select_audio")[0].play();
    setTimeout(function () {
        $("#1").hover(function () {
            $("#fighter")[0].play();
        });
        $("#2").hover(function () {
            $("#adventurer")[0].play();
        });
        $("#3").hover(function () {
            $("#monk")[0].play();
        });
        $("#4").hover(function () {
            $("#djinn")[0].play();
        })
    }, 2000)

We later used the Marvel app to create a shareable prototype. I learned how to create dynamic design prototypes using a dedicated prototyping tool for creating hotspots to link screens and adding timers from this experience.

Click to view the working prototype.

A short video to present our idea and working prototype.

3D Model

Components

Input

1. Touchscreen Input
2. Check Deposit Slot
3. Biometric Hand Scanner

Output

4. LED Lights for Visual Feedback
5. Output Display Monitor
6. Cash Withdrawal Slot

I created a 3D model of PlayTM using Blender, an open-source software tool used for modeling and animation.

Conclusion

Though our design idea introduces many features that would we apt if an ATM had to be designed for kids, there are certainly some aspects I missed out on. For example, what if the child is bullied into placing his hand on the biometric scanner? What if a child does not understand English well? These problems could be mitigated by introducing a security camera and adding support for other languages. Our design has a maximum amount for the money withdrawn per transaction and talks about a weekly limit that can be set by parents. However, it does not have a dedicated option where the child can keep track of his expenses and check how much of the limit he has used up. Features like these can be incorporated into our design in the future.