Designing sketches, wireframes & mock-ups

Design choice analysis and reflections

Introduction

The assignment aims to learn how to design, analyse, and reflect upon our wireframes and mockups. During the earlier stages of the project, when we were focusing on coming up with potential ideas and problems that we would like to focus on and solve, we came across the problem of parking electrical scooters. Therefore, when creating wireframes and mockups, we had to decide if we would focus on the physical prototype.

After doing some research, touch-ups and refining our product idea, we started working on a physical module we like to call ScootSeal, a parking module. With this module, we want to emphasise the interaction during the payment process. Henceforth we borrowed a Raspberry PI, an NFC reader, a small screen and some motors. In addition, the parking module includes other things, for example, visual design. However, for this part of the assignment, there will be no finished parking space; instead, this will be presented in the form of sketches, mockups and concepts.

The idea and process

When we started discussing the possible layout or design of the locking module, our opinions were split into different ideas and functions.

Everyone attended the workshop with Dipak, where we drew eight different squares containing our potential ideas of what our product would look like, which helped us immensely. However, we quickly realised some of our designs were unpractical, and some even ended up on the “nightmare” eight nightmare designs we also got to create after the initial eight ideas. Some examples we initially had but ended up in the nightmare scenario were a kind of booth where the potential users had to bring their scooters inside. There were different contraptions to hang them and lock them, but we quickly realised that the “opening a door” part is one of our most despised things when locking bikes. The horrible experience of holding up the door while guiding a large object through you cannot easily carry is terrifying. This made everyone question whether the booth was such a great idea since doors are not something we enjoy when parking our scooters or bicycles.

After some more discussion regarding the initial eight designs we created, we picked out our favourites and started discussing the pros and cons of each and every one of our three favourites, which we also got time to perfect. Once the group had decided upon some of our favourites, we started sketching our versions of the potential design which closely resembles the idea. This led us to our current prototype, a low-profile design especially compared to the booth idea. The parking spot will resemble a bike parking rack with more robust construction and integrated locking.

In addition to the integrated locking and the parking spot, we decided to implement one smaller screen per five parking spaces to make it possible for users to pay for their parking with a payment card instead of just using a mobile application. We decided on this because the focus should be on parking the electric scooter easily and fast rather than on a graphical user interface. The screen only presents the possibility of retrieving a receipt and perhaps a feature to translate English instructions to the native tongue for people who usually do not encounter the English language or prefer their native tongue. The part where the screen is attached reassembles one of the familiar places where you can buy a parking ticket to park your car, and this was decided upon to help the user understand its purpose at a glance. There are mainly three components on this block reassembling the parking ticket booth: a small screen, an NFC reader and step-by-step instructions in English consisting of three instructions not to overwhelm them but to give them all instructions needed to lock and retrieve their scooters.

The idea of the ticket part is that the first step is to help the user understand that this is the place to pay. When the NFC reader scans the card, a transaction will be made. Once the transaction has been accepted, the user will be directed to the available parking spot, which will be indicated with the help of a green light presented by a lamp on the given parking spot. It should be easy to park and lock the scooter.

Initially, when the user taps the card, a reserved payment will be applied to the user’s card, allowing us to reserve parking fees for up to a day until the user checks out the scooter whereafter the proper amount would be deducted from the user’s card.

Analysis

We also took Norman’s six principles of design into account when creating ScootSeal, as told by Dipak during his lectures. The first principle of visibility is something we implemented in the form of choosing a few ways for the user to interact with the parking module. The three-step instructions make it visible that there needs to be minimal contact when parking to save time and make it easy for a wide range of people. The visibility aspect is also apparent when we use a green lamp, so the user quickly understands where to park. The green light is also something Norman brings up in the second principle, feedback. In regards to the mapping principle, we created the three-step instructions with arrows to make it as straightforward as possible. The choice of having a small screen with little to no graphical user interface connects to the constraints principle. Minimizing the alternatives for the user makes it more difficult for errors to occur, which in turn, makes it more user-friendly. 

In regards to the affordance principle, there are a few different components that provide clues for usage. For example, as mentioned earlier, the green lamp is one of these clues or indicators. In addition, we thought about situations or objects people use in their daily life and got inspired by self-scanners at supermarkets, where they have a similar approach when picking up a scanner. Another design choice related to the affordance principle is the NFC reader with the internationally recognized symbol for contactless payments. This, in turn, also relates to the last principle of consistency, where other objects or situations in everyday life play a big part in making a product user-friendly. The advantage of the contactless payment symbol is that most people will have encountered it before, and prior knowledge helps reduce time spent in front of the parking module.

Another thing that connects to the affordance principle is the visual design of the actual parking spot. It is inspired by a regular bike rack but modified explicitly for electric scooters. This way, most people who would use ScootSeal for the first time would find it less challenging to use it since regular bike racks are a well-known concept in society overall. Our thought, while not visible on the mockups or sketches, is also to implement sounds when the parking spot is locked and when it gets unlocked, which also can relate to the affordance principle.

Wireframe and sketches

Mockups

We have created 2 mockups. The first one is the mockup of how a potential look on the display when you rent the scooter at the locking location. The second is a 3d module of what the module would look like. Feel free to download the .gld file and import it to the tool linked beneath the picture.

The Screen