User Experience Design

Contents
1 Introduction……………………………………………………………………………………………. 1
2 Strategy Plane Research…………………………………………………………………………. 2
2.1 Product Objectives ……………………………………………………………………………. 2
2.2 User Needs ……………………………………………………………………………………… 2
2.3 Agile Methodology…………………………………………………………………………….. 2
2.4 Questionnaires…………………………………………………………………………………. 2
2.5 User Personas …………………………………………………………………………………. 5
3 The Scope Plane ……………………………………………………………………………………. 8
3.1 User Stories and Storyboards …………………………………………………………….. 8
4 The Structure Plane………………………………………………………………………………. 11
5 The Skeleton Plane ………………………………………………………………………………. 14
5.1 Wireframes Implementation ……………………………………………………………… 14
5.2 Wireframes Testing …………………………………………………………………………. 17
6 The Surface Plane………………………………………………………………………………… 19
6.1 The Colour Scheme ………………………………………………………………………… 19
6.2 The Site Logo…………………………………………………………………………………. 20
6.3 Typography and Fonts …………………………………………………………………….. 20
7 Conclusions and Recommendations ……………………………………………………….. 25
8 References ………………………………………………………………………………………….. 26
9 Appendix……………………………………………………………………………………………… 27
9.1 Figure List ……………………………………………………………………………………… 27
9.2 Table list………………………………………………………………………………………… 27
1
1 Introduction
For this assignment we have been given a case study scenario related to the
improvement of the layout of an online banking site for better customer experience.
The company in question is a bank called Mebak Bank and we, in the role of junior
designers, need to improve the user experience of several online services. We should
also take into consideration the design of the website, mobile and iPad in the sense of
making them user friendly and by that providing perfectly consistent and coherent
access to the online banking services.
User experience design is the process of enhancing user satisfaction with a product
by improving the usability, accessibility, and pleasure provided in the interaction with
the product. (Wikipedia)
To achieve these, I will be using and implementing the five planes of James Garrett’s
methodology for designing digital products. According to Garrett, a good user
experience is based on multiple decisions of variable importance which dictate how
the whole site looks in the end. All those decisions are being ‘built one upon another,
informing and influencing all aspects of the user experience.’ (Garrett, 2000) (Figure
1)
Figure 1 The Five Planes of UX Design
2
2 Strategy Plane Research
The strategy plane is a stage in the UX design process that defines the user needs
and business objectives. “This strategy incorporates not only what the people running
the site want to get out of it but what the users want to get out of the site as well”
(FivePlanes).
2.1 Product Objectives
This product’s objective is an online banking system that allows seamless access to
all of the bank’s digital services. It should be able to provide access to millions of
customers and increase bank’s competitiveness. The services should be available on
a website, and also available as a mobile and iPad app.
2.2 User Needs
The main users of the product will be the bank’s personal and business customers as
well as the bank’s employees who will administer the services. The products need to
be easily accessible by a wide range of users and should provide all services in an
easily accessible format.
2.3 Agile Methodology
Due to the scope of the project and a wide range of users this project will adopt an
agile approach. Instead of defining and designing all the requirements before starting
development this project will be developed in an iterative schedule where components
can be developed and deployed one after another. This will give the bank a quicker
access to the market as the users can start using some of the components before the
whole project is completed.
Having multiple short iterations will also allow the designers to gain feedback from the
users which will be incorporated in the following iterations. Using a continuous loop of
Build-Measure-Learn the team can quickly produce a testable iteration of the product
and test the assumptions based on qualitative user feedback and quantitative
measures.
2.4 Questionnaires
For the purposes of gathering the necessary information I will make use of a qualitative
research which explores things in a natural setting. It “involves the studied use and
3
collection of a variety of empirical materials – case study, personal experience,
introspective, life story, interview…” (Denzin and Lincoln 1994: 2)
According to Unger and Chandler (2012) the UX designer role is to help the project
team understand the business-related context of the project. One way to achieve this
is by site visiting during which the designer holds workshops or interviews with the
future users to better understand the expectations and user needs and roles. A
questionnaire will be produced in order to conduct interviews for the users.
The aim of using a questionnaire is to collect information on a specific subject area by
using a set of questions. These set of questions form a questionnaire that can be
qualitative or quantitative in nature. There are two types of questions: open-ended and
close-ended questions.

4

Table 1 General Questionnaire

Table 2 Customer Service Adviser Questionnaire

5

Table 3 Bank Product Manager Questionnaire
After we finish with the information gathering process, we focus on using that
information to build user personas.
2.5 User Personas
Personas are imaginary users of the product based on the real users. They describe
typical users of the website or application. The UX designer uses personas as a
constant reminder of the users of the product. They are a useful tool in the decisionmaking process and help in reaching decisions when in doubt. Table 4 presents a
User Persona for a Customer Service Adviser, called Mila and Table 5 shows a user
persona named Edward who is a bank product manager.
6

Table 4 Customer Service Adviser Persona
7

Table 5 Bank Product Manager Persona
8
3 The Scope Plane
The aim of the Scope Plane is to determine the features and functions of the product.
This is done by defining Functional Specifications and Content Requirements.
Functional Specification is a “detailed description of the “feature set” of the product”
(Garrett, 2000) while the Content Requirements are a “description of the various
content elements” (Garrett, 2000).
3.1 User Stories and Storyboards
User stories are short statements that identify the user and their needs and goals.
They capture the common processes the users are going to perform on the product,
and they help to document the practical information about the users.
These are some user stories developed based on the user personas in the previous
stage.
– As a customer service adviser, I want to be able to open customers transaction
history and export it without waiting.
– As a customer service adviser, I want to check customers’ account balance in
two clicks.
– As a bank project manager, I want to check customers’ regular money in and
money out in two to three clicks.
– As a bank project manager, I want to be able to check multiple on-screen products
compared side by side, so I can be up to date when discussing products with clients.
Based on the user stories created above, we are going to create scenarios that will
represent the task orders visually and what they do.
Scenarios capture the tasks the user performs to complete a story. They help the
developers and product owners explain the UX designers’ vision. Developers use the
scenarios to develop the code behind the screens.
9
Figure 2 Scenario Showing a Customer Service Advisor Checking Transaction History and Exporting or Printing It
Figure 3 A Customer Service Adviser Checking Account Balance
10
Figure 4 Product Manager Checking Regular Money In/Out
Figure 5 Bank Project Manager Checking Multiple Accounts Simultaneously
11
4 The Structure Plane
After collecting all the information that we needed and creating the scenarios we are
moving on to creating the Interaction design and Information Architecture. The
interaction design focuses on the interaction between the user and the product and
vice versa in regards with the functional requirements. On the other hand, the
Information Architecture focuses on how the content elements are organized in
regards with the content requirements.
Successfully organized architecture at this stage is beneficial to the goals
accomplishments and it also shows the functionality and interactivity.
Good information architecture is also one that is adaptable to change, and which can
be expanded in future.
In this stage, first we write all the possible features based on the requirements and
goals on notes, then we try to group those that belong to a same group into logical
groups and lastly, we create a navigational structure.
Using card sorting is very beneficial for the whole process of information architecture
building. “Card sorting will help you understand your users’ expectations and
understanding of your topics. It is often most useful once you have done some
homework to find out about your users and understand your content.” (UsabilityNet)
Another very important step or key in creating a good website is also a well created
navigational structure.
The figures below represent all the features before card sorting, after they have been
sorted and then organized and presented visually in a navigational structure.
12
Figure 6 Showing All Cards Before Sorting
Figure 7 Showing All Cards After Sorting
13
Figure 8 Navigational Structure
14
5 The Skeleton Plane
The skeleton plane involves designing the interface, navigation and information
design. Interface elements, like radio buttons, checkboxes, drop down menus, buttons
and textboxes, are chosen to best represent information on the page.
Navigation needs to be designed in a user-friendly way to unambiguously guide user
through all the steps they need to take to complete a task.
5.1 Wireframes Implementation
“A wireframe is a visual representation of a user interface, stripped of any visual design
or branding elements” (The UX Review). It is used to arrange the elements on a screen
in a hierarchical order. It simply shows the layout of a webpage with all the interface
items on it.
The following figures represent the wireframes for the previously developed scenarios
for the customer service adviser and bank product manager.
Figure 9 Log In Wireframe
15
Figure 10 Customer Support Screen Wireframe
Figure 11 Customer Accounts Wireframe
16
Figure 12 Customer Regular Money In/Out Wireframe
Figure 13 Compare Products Wireframe
17
Figure 14 Customer Statements Wireframe
5.2 Wireframes Testing
The user feedback is required to design and develop a good product and to minimize
changes in the later stages of the development. To gain information early it is beneficial
to perform wireframe testing with the users.
Wireframe testing is the process where the users are introduced to the generated
wireframes and asked to perform the tasks from the user stories by clicking on the
wireframe elements. This gains valuable information as the users can ask questions
and voice their doubt about some interface elements.
The following tables show the steps taken to test each of the user scenarios. All the
tests have been conducted during a session with the users and all tests passed.

Table 6 Wireframe Testing Scenario 1
18

Table 7 Wireframe Testing Scenario 2

Table 8 Wireframe Testing Scenario 3

Table 9 Wireframe Testing Scenario 4
19
6 The Surface Plane
The Surface Plane is the “top layer” where we polish things up and we focus on the
aspect related to how the website would look visually. Important things to take into
consideration here are the colours used for the final look of the site, the typography,
the contrast, the layout and the website logo. We need to carefully consider colour
schemes and appropriate font styles and sizes. A well-designed interface has a great
impact on the user satisfaction and the frequency of the site visits.
6.1 The Colour Scheme
“Colour inaccuracy has many negative consequences for marketers, including loss of
sales, increased returns and complaints, and customer defections” (Nitse, Parker,
Krumwiede, Ottaway, 2004).
Therefore, the right colour representation is very important for the brand recognition.
The colours I chose are black, white, bottle green, sea green and alabaster.
Green colour is associated with nature, wellbeing & freshness but depending on the
shade, different emotions can be invoked. For example, deeper greens represent
wealth and prestige and are the perfect choice for a bank website. Lighter shades
have calming and peaceful effect on the user.
Figure 15 Colour Scheme
20
6.2 The Site Logo
The site logo is the visual representation of the brand. It is the most important image
for the brand recognition.
The logo I chose for the bank site shown in the figure below is green showing a circle
finished with two leaves. “Green leaves depict hope, renewal, and revival”
(Protas,1997). In general leaves represent growth. So, in my opinion, having leaves in
a logo for a bank company is pleasing to the eye. Investing, saving and using the bank
can easily be compared to the positive ever-growing green leaves in nature.
Figure 16 Mebak Bank Logo (Pixabay)
6.3 Typography and Fonts
Typography has one of the most important roles in web design because it makes
reading effortless. As it was mentioned by Reichenstein “Web Design is 95%
Typography”. Good typography means good user interface.
Another important fact is that less is better when it comes to the number of different
fonts used. So, my choice was to use only the Arial font but in several different size
fonts depending on the text it represents, arranged accordingly to their meaning and
significance on the particular screen. Arial Font “is easy to read at large and small
sizes and in a variety of applications, Arial has been a staple screen font for decades”
(Monotype).
21
Implementing UI Prototypes
Prototypes are usable representations of the final product. Unlike wireframes they
contain actual content and are built according to the agreed design. Users can interact
with them and follow the links through the pages.
They are used before the development process begins as a quick way to show the
users how the end product is going to look like. The designer can gain information
through user feedback and parts of the design can easily be discarded if the user
doesn’t like them.
The following figures show the prototypes for the Mebak bank webpage. The figures
show the Desktop version, but the pages are designed to be reactive and to fit the
mobile and the iPad screens.
The starting point of the website is the log in screen that shows the Mebak bank logo
and a simple form for the user to enter the username and password (Figure 17).
Depending on the user type, either the Customer Support screen (Figure 18) or the
Product Manager screen (Figure 21) is shown. After searching for the user based on
either name or id, the Customer Support Adviser can check the customers’ accounts
(Figure 19), statements (Figure 20) or regular money in/out (Figure 22).
Figure 17 Log In Prototype
22
Figure 18 Customer Support Screen Prototype
Figure 19 Customer Accounts Prototype
23
Figure 20 Customer Statements Prototype
Figure 21 Compare Products Prototype
24
Figure 22 Customer Regular Money In/Out Prototype
25
7 Conclusions and Recommendations
In this assignment I designed an application for the Mebak bank using the bottom-up
approach with the five planes of UX design. The first step is to define the objectives of
the project. I conducted an interview with the future users of the product to determine
their goals and expectations and created personas based on the users.
The next step was determining the scope of the project and actual requirements. With
the help of users, I wrote down the most common user stories and created scenarios
for them.
By analysing the requirements, I wrote down all the necessary parts of the product,
grouped them based on common uses and created a navigational structure to connect
all of them.
With the scenarios and product components ready, I created the wireframes for the
application screens with the constant input from the user who helped test them
according to their requirements.
The final step was defining the colour scheme, creating the logo and deciding on the
font and creating the working prototypes.
The user input was beneficial during the whole design process and changes were
made as more information was gained.
I gained valuable experience in the process of designing a product with the users’
requirements in mind. I would recommend this process again when designing a new
product.
26
8 References
Litwin M. (2019), 15 Mobile App Survey Questions You Can’t Miss Out On, available
at: https://survicate.com/mobile-app-survey/mobile-app-survey-questions/ (Accessed:
10/04/2019)
Abul-Ezz S. (2019), In-App Survey Questions: Guidelines and Templates, available
at: https://instabug.com/blog/in-app-survey-questions-templates/ (Accessed:
09/04/2019)
Wikipedia (2019), User Experience Design, available at:
https://en.wikipedia.org/wiki/User_experience_design (Accessed: 13/04/2019)
Garrett J. J. (2000) The elements of User Experience, available at:
http://www.jjg.net/elements/pdf/elements_ch02.pdf (Accessed: 12/04/2019)
Denzin, N. K., & Lincoln, Y. S. (1994). Handbook of qualitative research. Thousand
Oaks, CA: SAGE
Elgabry O. (2016) UX – A quick glance about The 5 Elements of User Experience,
available at: https://medium.com/omarelgabrys-blog/ux-a-quick-glance-about-the-5-
elements-of-user-experience-part-2-a0da8798cd52 (Accessed: 13/04/2019)
Usability.gov (2019) Card Sorting, available at: https://www.usability.gov/how-to-andtools/methods/card-sorting.html (Accessed: 12/04/2019)
Nitse P. S. (2004) The impact of color in the e-commerce marketing of fashions: an
exploratory study, available at:
https://www.emeraldinsight.com/doi/full/10.1108/03090560410539311 (Accessed:
12/04/2019)
Protas A. (1997) Dictionary of Symbolism, available at:
http://umich.edu/~umfandsf/symbolismproject/symbolism.html/index.html (Accessed:
14/04/2019)
Babich N. (2017) 10 Tips On Typography in Web Design, available at:
https://uxplanet.org/10-tips-on-typography-in-web-design-13a378f4aa0d (Accessed:
14/04/2019)
Reichenstein (2006) Web Design is 95% Typography, available at:
https://ia.net/topics/the-web-is-all-about-typography-period (Accessed: 14/04/2019)
Saunders P, Nicholas R. (2019) Arial, available at:
https://www.fonts.com/font/monotype/arial/story (Accessed: 14/04/2019)
27
9 Appendix
9.1 Figure List
Figure 1 The Five Planes of UX Design …………………………………………………………… 1
Figure 2 Scenario Showing a Customer Service Advisor Checking Transaction History
and Exporting or Printing It…………………………………………………………………………….. 9
Figure 3 A Customer Service Adviser Checking Account Balance……………………….. 9
Figure 4 Product Manager Checking Regular Money In/Out……………………………… 10
Figure 5 Bank Project Manager Checking Multiple Accounts Simultaneously………. 10
Figure 6 Showing All Cards Before Sorting …………………………………………………….. 12
Figure 7 Showing All Cards After Sorting……………………………………………………….. 12
Figure 8 Navigational Structure…………………………………………………………………….. 13
Figure 9 Log In Wireframe……………………………………………………………………………. 14
Figure 10 Customer Support Screen Wireframe ……………………………………………… 15
Figure 11 Customer Accounts Wireframe ………………………………………………………. 15
Figure 12 Customer Regular Money In/Out Wireframe …………………………………….. 16
Figure 13 Compare Products Wireframe………………………………………………………… 16
Figure 14 Customer Statements Wireframe ……………………………………………………. 17
Figure 15 Colour Scheme ……………………………………………………………………………. 19
Figure 16 Mebak Bank Logo (Pixabay) ………………………………………………………….. 20
Figure 17 Log In Prototype…………………………………………………………………………… 21
Figure 18 Customer Support Screen Prototype ………………………………………………. 22
Figure 19 Customer Accounts Prototype………………………………………………………… 22
Figure 20 Customer Statements Prototype …………………………………………………….. 23
Figure 21 Compare Products Prototype …………………………………………………………. 23
Figure 22 Customer Regular Money In/Out Prototype ……………………………………… 24
9.2 Table list
Table 1 General Questionnaire ………………………………………………………………………. 4
Table 2 Customer Service Adviser Questionnaire……………………………………………… 4
Table 3 Bank Product Manager Questionnaire …………………………………………………. 5
Table 4 Customer Service Adviser Persona……………………………………………………… 6
Table 5 Bank Product Manager Persona …………………………………………………………. 7
Table 6 Wireframe Testing Scenario 1…………………………………………………………… 17
Table 7 Wireframe Testing Scenario 2…………………………………………………………… 18
Table 8 Wireframe Testing Scenario 3…………………………………………………………… 18
Table 9 Wireframe Testing Scenario 4…………………………………………………………… 18