As I previously stated, I am undertaking Mobile Application Design in my 2nd Semester in order to enhance the relevant skills as I feel such knowledge will be crucial for my thesis. For our mid term assignment, we were required to focus on the planning that goes into an application before writing even a line of code. Continue reading
My time spent studying MSc in Interactive Media allowed me the opportunity to practise design techniques such as prototyping and user testing through creative exploration and prototyping projects.The Foundations Of Interactive Media Design module specifically gave me an extensive understanding of the perceptual and cognitive issues in the general HCI field. Extensive research in the field has enabled me to:
An example whereby my skills were examined took place in November 2015 when we (myself and two other colleagues) were required to choose a design space of our liking and to implement prototyping techniques to create an interactive prototype. The chosen design space for this process was the UL campus car parks, with the intervention being the queuing of cars at high traffic times. Our design team decided to use the medium of a mobile application for the intervention due to the high quantity of mobile phone usage by both staff and students.
Sketch of Campus Car Park Map
Initially a brainstorm was used to explore the design space and possible designs were discussed. The design team then proceeded to mind-map the topics brought up in the initial brainstorm. A second mind-map was then used to explore the chosen idea of a mobile application. The design process followed the user-centered design process. A qualitative study was completed on a small sample group of users. The potential users of the system (students) were asked what they would need in an application to monitor the car parks on campus and these were used to design the requirements for the system.
To begin the creative flow we decided a brainstorming session would be the perfect seed to our thought and development process. Iteration was important to our group. After initial suggestions had been noted, categorized and thought about on a personal level (we wanted to avoid a collective group thought at early stages to prevent tunnel vision) we began to repeat our fifteen-minute session in relation to each design solution. By moving from the general to the specific we narrowed and sharpened our scope and created some more detailed ideas specific to the respective design solutions.Once we had every detail listed for each solution on the brainstorm we moved onto mind-mapping those ideas into a logical and readable layout.
Once we had all our keywords noted in brainstorming sessions we began collecting them in an arranged order. By arranging our ideas it gave us a great insight into how each design would need to operate in real world scenarios. We could see in a clear manner, which aspects of our design needed to communicate with each other. Links showed us how complex and interdependent a design solution would be and volume of details showed us how much depth or scope there was to each respective design. The mobile application required communication with real world data, different parts of the app internally etc. Whereas the LED billboard was a far simpler implementation however it had obvious drawbacks in it not being an IoT style device. By creating the mind map we got insight into the inner workings of each design.
Car Park Mind Map
After the initial mind map, we decided to explore the various mediums that this product could use. We took the ideas generated from the brainstorm and expanded each idea on a flipchart sheet.
Priority Board
After the prioritization task and the exploratory design, we felt that the mobile application would be of most benefit to the users. This was decided due to the high number of smart phone usage by staff and students alike. We proceeded to generate another mind map to explore the possible features of the application. In this session, the following features were explored: networking, notifications, symbols and functionality. This iterative mind mapping allowed the team to increase and decrease scope of the project from the initial mediums to the final medium.
Mobile App Mind Map
After the initial mind map of the mobile application, we decided to carry out requirement analysis to gain a better understanding of what users would need. We asked qualitative questions to a sample of potential users. We asked six students who drive to campus and use the parking facilities regularly.
The questions asked were:
1. What features should a mobile parking application have?
2. What would you like the layout to be?
3. What information would need to be displayed?
From these questions, we gathered the following requirements. The mobile application should:
Unlike the idea generation phase, the design phase involves choosing a particular direction and narrowing the range of possibilities. After much thought and discussion about various methods in which we could improve parking at the University by implementing user technology to our advantage, our research guided us to believe that a mobile application would be the best medium. We discussed and understood the stakeholders that are involved in our design process. Once we had a strong idea of whom we were designing for and the goals of the application, we decided to further our notions by creating numerous character profiles and scenarios in which they depend on our application. We agreed upon six types of potential users and planned scenarios for each one. We covered the character types and planned scenarios as one design task because we believed both techniques to be closely related. We each created two characters and scenarios each and then shared as a group.
Our objective using characters and scenario planning was to get a better-defined idea of everyday use of the app. The process aimed to call attention to any problems or help uncover any opportunities we had not encountered yet. This type of “what if” thinking helps us, as designers; consider how situations can play out as a result of interaction with the app. We agreed that we had to consider both “ideal scenarios” and also “worst case scenario”.
Prototyping is a technique that is used to present in a short time a graphical concept of a product. It is an iteration of mock-ups whereby more ideas can be formed or weaknesses can be eradicated. Prototyping techniques can radically improve work, increasing usability with each iteration. It can be split into three types: Low fidelity, Medium fidelity and High fidelity.
Low fidelity – this method is the easiest to undertake. It is cheap and very time efficient. Ideas and concepts can be roughly sketched up on post its, paper, white boards etc.
Medium fidelity – this method is a bit more advanced that low fidelity. It concerns more specifics such as colours, fonts, positioning specifics. Due to it being more complex, it is more time consuming and also can be more expensive.
High fidelity – this stage of design is very close to the final product. It is the most time consuming and the most expensive. All major flaws should be addressed before reaching this stage.
In order to thoroughly explore our design concepts and solidify a direction to move towards, we implemented low fidelity prototyping. This technique was very efficient in managing our time, prevented us from overthinking and overspending. From this we could better understand our design alternatives and screen layouts. Our group wanted to explore low fidelity options before discussing complexities and moving forward with specific ideas. Careful low fidelity prototyping helped us detect/address major problems early on, build cheaply, draw feedback that focuses on high-level concepts and allowed us to display them easily.
Paper Based 2D:
Creating low fidelity paper prototypes was an intricate part to our design exploration. They helped us to imagine the flow, the aesthetic and the interactivity of our mobile app without over committing to any particular idea. We agreed that we would avoid digital designing such as wire framing at the initial stages in order to establish our on screen elements. Paper prototypes hold a high degree of flexibility that other prototypes methods do not hold. They can be presented on paper sketches, post its, graphs or whiteboards, which means that ideas can be easily discarded without having invested too much time. Paper prototypes liberate us from the burden of technical requirements. This low cost approach meant that we were not limited in exploring our design space. Its simplicity meant we could iterate through design ideas at a higher speed. It allowed us to sketch on paper how we could imagine our app flow (see image below), which we could, then implements into a cardboard hand held prototype. By laying out each of our screen sketches, we were able to build an idea as to how a user would interact and move through the app. This type preparation decreases the chance of user error but also enhances our awareness with regards to some weak points we may have overlooked.
For our mobile app we created a short prototype film. We felt that as it was software based and interactive that this would be a highly appropriate medium to showcase our sample product’s possible capabilities. Viewers can get a real sense of how the app would be used in a real world situation. The medium also benefits from a few key characteristics: it is easily shared, viewed, understood and scalable. With a video we can reach thousands of people at once and get a broad spectrum of feedback from that.
The video gave us a tangible, shareable and easy to understand prototype. Viewers could easily see a potential scenario in which it could be used and we gathered some interesting retrospective feedback internally from this. We created the video from the paper prototyped models. By placing each screen into a cardboard model of a smartphone we were able to simulate to users how the app would work to scale. Notification sounds bring the prototype to a further level of realism by integrating.
Stuart Creates 