3 – Design development & application of design languages

Wireframes

First, I started with the carer UI where I originally had 4 menu categories:

  • Activity (showing the activities patient had when using a tablet (second UI))
  • Diary (containing personal info and patient routines)
  • Admin (place to manage the photos, music and games displayed on the tablet)
  • My Space (space for carer with breathing exercises, calming sounds etc)

Visual Design

 

Moodboard
Moodboard

The font I chose for this app is sans serif Aspira typeface and components from iOS UI Kit because of their well known, beautiful clear interface.

https://www.youtube.com/watch?v=tZK0wK3DIAw

I read a lot about dementia and carers, but the information I got didn't seem enough. So I decided to contact some nursery homes and have a chat with a carer in a hope they will have answers on some of my questions.

I scheduled an appointment in a nursery home in Leopardstown, and had an interview there with QPSM (Quality and Patient Services Manager). She preferred to stay anonymous.

 

She gave me some handy advices on how to set the menu and which categories should be prioritised so they can be easily available to the carer. I also got some slides (Nursing Management of Insomnia & R.B) which helped me a lot with content I did in the app. After I did couple of tweaks my prototype looked like this:

Final proto
Click to view the final prototype in Figma

 

References

Apple Inc. (n.d.). IOS Human Interface Guidelines. Retrieved April 28, 2019, from https://developer.apple.com/design/human-interface-guidelines/

Aspira Font Family Typeface Story. (n.d.). Retrieved April 28, 2019, from https://www.fonts.com/font/durotype/aspira/story

Clark, J., & Clark, J. (2017, May 16). Using the Amazon Echo to improve the lives of Alzheimer's patients. Retrieved April 14, 2019, from https://medium.com/@JaysThoughts/using-the-amazon-echo-to-improve-the-lives-of-alzheimers-patients-f5727560a5eb

Jacobs, S. (2017, November 22). Four Basic Types of Meditation. Retrieved April 28, 2019, from https://meditationmag.com/how-to-meditate/four-basic-types-of-meditation/

Logan, B. (2016). Caregiver's Guide to Understanding Dementia Behaviors. Retrieved April 14, 2019, from https://www.caregiver.org/caregivers-guide-understanding-dementia-behaviors

Health, U. (2013, May 09). What is Dementia? | Dr. David B. Reuben - UCLA Alzheimer's and Dementia Care Program. Retrieved April 14, 2019, from https://www.youtube.com/watch?v=gIUEBXt0ako

Levi, A. (2017, January 31). Stressed Out? These 5 Relaxing Images Will Bring You Instant Calm. Retrieved April 28, 2019, from https://www.health.com/stress/relaxing-images-to-destress

Stein, T. (2018, June 18). 7 Tips for Creating Positive Mental Imagery. Retrieved April 28, 2019, from https://www.psychologytoday.com/us/blog/the-integrationist/201306/7-tips-creating-positive-mental-imagery

Stevenson, S. (2018, June 11). Dementia Care Dos and Don'ts: Dealing with Dementia. Retrieved April 28, 2019, from https://www.aplaceformom.com/blog/2013-02-08-dealing-with-dementia-behavior/


Moodboard

Moodboard, also know as an "inspiration board" turned out to be a great way for us to focus on the design process, and really useful for capturing and organizing our thoughts and converting them into visuals.

We used Figma for this purpose because it was really easy to collaborate and share our ideas.

Flight App Moodboard
Our Flight App Moodboard

 

Most of the inspiration we found in AirBnb, as we saw the map with prices that were clearly visible and adapted to everyone.

We also picked the photos of the cities that we later included in our high fidelity prototypes, looking up to Google Flights.


3 - Designing the Prototype

Paper Prototypes

As we put our ideas and the feedback we got on the table, we started with sketching and creating our first low-fidelity paper prototypes, which we used to identify the problems in the early stage of the design. They are useful because they're fast and simple to produce, but also to modify.

Paper prototype
Paper prototype

The feedback we got from them was crucial before starting with building the interactive prototype. For this purpose, we used Figma because it's collaborative, and it's easy to connect the screens in the prototypes.

https://www.youtube.com/watch?v=GIrmFSpBu-k

Our first interactive prototype was a slightly better version of the existing app with the easier flow, but just after we did user testing on the first part of the app we got the feedback that we could make the experience more emotional by extending the map and showing the destination prices.

We found inspiration on the AirBnb website, where with all the prices shown on the map the experience still stays positive and users don't find it too cluttered or unusable.

AirBnb

We iterated, and created a new prototype with a bigger map, containing prices and planes when the destination is selected, with improved flow regarding the dates and travel extras.

https://www.youtube.com/watch?v=uIp5ugkILBo

 

After getting more feedback from our users, we developed a mid-fidelity digital prototype. We also continued with conducting further usability tests and refining the design before moving it into a high-fidelity prototype.

 

https://www.youtube.com/watch?v=2-ncWoCEFNA

Branding

We wanted to change the existing app, and it was really important that we understand Aer Lingus and their current branding. From our research, we found out that their brand values were:

  • welcoming and warm
  • characteristically and traditionally Irish
  • helpful to their passengers
  • approachable, obliging and communicative

Moodboard

Using these core brand values, and all of the things that inspired us - we created a mood board.

Style Guide

In this stage, and after Hillary's suggestion, we decided to include some Material Design in our prototype and make it look more fresh and familiar to users. Using the style guide, we then developed a high-fidelity mockup of the app.

 

https://www.youtube.com/watch?v=B_wPt-CqH58

Even though we had the high fidelity prototype, which users really liked, we were struggling with one and important thing -  they didn't notice the planes moving. During one of the classes, Andrew mentioned the term "change blindness" which is basically people's tendency to ignore the changes when they happen far away from their focus.

Solution

The only way we could fix this problem we were encountering was using the animation. The design process resulted in a high-fidelity prototype of the app made using Figma, with the preview element animated in Principle to display that functionality. Some of the key flows of the app are shown in the video below.

 

https://www.youtube.com/watch?v=D1PVhSNvF7Y

 

 

Please continue reading, follow on to the next step Usability Testing

 

References

Budiu, R. (2018, September 23). Change Blindness in UX: Definition. Retrieved January 15, 2019, from https://www.nngroup.com/articles/change-blindness-definition/

Nigel_french. (2014, January 06). Developing a Mood Board. Retrieved January 15, 2019, from https://www.lynda.com/Design-Color-tutorials/Developing-Mood-Board/141129-2.html

Preece, J., Sharp, H., & Rogers, Y. (2017). Interaction design: Beyond human-computer interaction. Chichester (West Sussex, United Kingdom): Wiley.

Wyatt, P. (2018, May 14). 20 pro tips for creating inspirational mood boards. Retrieved January 15, 2019, from https://www.creativebloq.com/graphic-design/mood-boards-812470

 


Login

3 - Developing a Paper Prototype

 


 

Finally, we could start with my favourite part - Paper Prototyping!

 

Paper prototying definition

 

 

It's recommended to do this in very early stage of the process, because it's cheap and it will let us fix the usability problems before the money is wasted on something that doesn't work.

Also, we can have a better focus on the core functionalities and flow rather than focusing on eg. colours that come in later stages of the process.

 

https://www.youtube.com/watch?v=XU3iXM0x0QY

Short video showing the process of creating the prototype (credits: Rob McLoughlin)

 

When we started with creating the prototype, we did every screen as a complete one - with all the functionalities in one place. Afterwards, we realised we are wasting a lot of time to sketch the same one over and over again - so Rob suggested creating the components as a separate part (keyboard, input fields..) and reusing them when necessary. That made our prototyping process a lot easier, and we could easily apply changes after iterations as well.

 

Components
Creating the Reusable Components for our prototypes

 

1. Creating the prototype for the "Login" process


 

First, we started with prototyping the "Login" flow, into the desired one with more "Forgot PAN (Personal Access Number)" options. Having in mind our persona Ann and Scenario #1, we decided to make following changes:

  1. implement the "Touch ID" feature (because almost all the competitor banks had it, and we wanted to follow the trend. Also, a lot of reviews on Google Play and App Store were pointed in the direction: "Guys, allow us to use the "TouchID" to login"
  2. reduce the number of steps and screens necessary to login (if all the other banks need only  PAN in order to login, why can't we do that as well?)
  3. remove the password masking when entering the PAN, so our users can see which numbers they're typing in (as Nielsen promoted in 1990's)
  4. add more options to recover if users forgot the PAN
    We extended existing "call to recover" option with additional:

    • "use the password"
    • "face recognition"
    • "use the desktop app" (using the QR Code)
  5. we also added the "Quick Balance" feature (because many users mentioned this in online reviews on Google Play and App Store. Also because we got info from a lot of AIB customers absolutely loved this feature when we did initial research at the beginning)
  6. we also redesigned the accounts page, the first one users see after they login. Our new redesign help them to get an insight in accounts and easily switch between them.
  7. in addition to all, we added the help icon in top right corner - as Nielsen mentioned in his last usability heuristic: "Even though it is better if the system can be used without documentation, it may be necessary to provide help and documentation"

 

Login
Changes we did and features we added for the "Login" flow

 

To make things easier, Rob created this user flow with solutions to the problem which helped us visualise the actual user's path in "Forgot PAN" scenario.

Forgot PAN Process
The improved "Forgot PAN" process with 3 additional options to recover your PAN (Personal Access Number)

 

And, after all the work has been done for "Login" process - this is how it looked like:

Login
Sketched screens for the "Login" process

 

2. Creating the prototype for "Transfer funds to a new person" process


 

Second, we started with prototyping the "Transfer funds to a new person" flow, which doesn't exist in the PTSB mobile app - just in the desktop version. Having in mind our persona Ann and Scenario #2 this time, we decided to:

  1. offer a quick link to "Transfer" from the home or every page where the user is
  2. default the "From" field to a current account(because most of the transactions come from current account. When testing with AIB app - I figured out that there wasn't a possibility to make a transfer from your savings account)
  3. list all the saved payees below, with a possibility to slide through them (as Google did with "chips")
  4. add an "+Add New" button in case our user wants to add a new payee which is not on the list (we wanted to make this easier for the user, without making them navigate through different screens just to add a new person)
  5. ask only for the most important information, which are:
    1. From
    2. To (when adding a new payee, then just IBAN and Name are required)
    3. Amount
      -> as Nielsen proposed in one of his design principles - Simplicity - "if design works well without an element then we can remove it"

 

Transfer to a new person
Changes we did and features we added for "Transfer to a new person" flow

 

We looked up on this scheme, which helped us focus on the flow itself and what's the best way to present this to a user.

 

New Payee
New improved "Transfer to a new person" process

 

It took time to create this prototype, but we didn't want to be perfect - we wanted to test and let our users point us where are we going wrong and where to improve.

Transfer funds to a new person
Creating the prototype for "Transfer to a new person" flow

 


 

After we sketched all of the screens for both of the tasks, we decided to upload them on InVision  so we can test them in a proper way, get the feedback from actual users and hear what they think about our redesign.

 

InVision
Link on InVision prototype

 

We also recorded every user testing session using either QuickTime or Screen-o-Matic, which enabled us to review more times every session and figure out where we went wrong in our designs - what to keep and what to change.

 


 

  1. References

    1. Nielsen, Jakob. "Paper Prototyping: Getting User Data Before You Code." Nielsen Norman Group. April 14, 2003. Accessed October 29, 2018. https://www.nngroup.com/articles/paper-prototyping/.
    2. Pernice, Kara. "UX Prototypes: Low Fidelity vs. High Fidelity." Nielsen Norman Group. December 18, 2016. Accessed October 29, 2018. https://www.nngroup.com/articles/ux-prototype-hi-lo-fidelity/.
    3. Knapp, Jake, John Zeratsky, and Braden Kowitz. Sprint: How to Solve Big Problems and Test New Ideas in Just Five Days. New York, NY: Simon & Schuster, 2016.
    4. Adiseshiah, Emily Grace. "Paper Prototyping: Your Step by Step Guide." Justinmind. May 18, 2018. Accessed October 29, 2018. https://www.justinmind.com/blog/paper-prototyping-your-step-by-step-guide/.
    5. Cronenwett, Diane. Lynda.com - from LinkedIn. September 19, 2017. Accessed October 29, 2018. https://www.lynda.com/InVision-tutorials/UX-Foundations-Prototyping/605436-2.html?autocompleteMovieId=661973.
    6. Nessler, Dan. "A Guide to Paper Prototyping & Testing for Web Interfaces." Medium. March 29, 2016. Accessed October 29, 2018. https://medium.com/digital-experience-design/a-guide-to-paper-prototyping-testing-for-web-interfaces-49e542ba765f.
    7. Nielsen, J. (2009, June 23). Stop Password Masking. Retrieved September 15, 2018, from https://www.nngroup.com/articles/stop-password-masking/
    8. 10 Heuristics for User Interface Design: Article by Jakob Nielsen. (1995, January 1). Retrieved September 28, 2018, from https://www.nngroup.com/articles/ten-usability-heuristics/