OverviewUX ProcessTakeaways

ASB Bank

Web App Design and Development

Project Overview

Purpose

The aim of the project was to update ASB's Staff Rostering CMS.

Though this application is confidential, it was a massive accomplishment and I will discuss public information and things to do with what I learnt and how I approached tasks.

Objectives

Interface

Research
- Study the existing System
- Generate UX questionnaires
- Interview users,
- Analyse findings: user pain points, likes/dislikes

Design
- Brainstorm solutions to pain points
- Iterate wireframes for solution

Database
- Study the existing system
- Decide whether to work with existing database or create new
- If create new:
      - Design new database ERD (Entity Relationship Diagram)
       - Build new future proof database

Testing
- User Acceptability Testing

Development
- Decide between a more agile or waterfall approach
- Build front end in HTML, CSS and Javascript
- Build database connection in C#

Database
- Study the existing system
- Decide whether to work with existing database or create new
- If create new:
      - Design new database ERD (Entity Relationship Diagram)
      - Build new future proof database

Documentation
- Prepare and perform four 20 minute presentations about the project, including a live demo
- Use Kan Ban board to distribute and track tasks
- Organise and man an exhibition of the project, including the live system, a game and raffle and small prizes.

Approach

Duration

7 months.
March - October, 2017.

Team Members

Three

The course allowed us to make our own team, and the three of us came together due to our different strengths. Mine being UX design, another's being front end development, and the other's being back end development.

We decided to each cycle through each area to pick up new skills and in doing so I learnt more about front and back end development. I improved my HTML, CSS and JavaScript skills, dipped my toes into C#, and designed the new database.

My Role

UX Researcher & Designer

The course allowed us to make our own team, and the three of us came together due to our different strengths. Mine being UX design, another's being front end development, and the other's being back end development.

We decided to each cycle through each area to pick up new skills and in doing so I learnt more about front and back end development. I improved my HTML, CSS and JavaScript skills, dipped my toes into C#, and designed the new database.

UX Process

Research

I took the lead during the research phase. I created user experience questionnaires and planned the interviews. There was always at least one questioner and scribe present during the user interviews. Afterward, I added all the data into Excel.

I created user experience questionnaires andplanned interviews, note taking at the interviews, translating the information into Excel, transforming that information into graphs to show stakeholders at meetings, wireframing the interface on paper to collaborate in the team, designing the new interface in Sketch and then translating the panels into an interactive prototype in PowerPoint.

Ideation

We brainstormed solutions to the problems that arose from the research phase and ordered them according to priority.

We had a breakthrough with one of the main problems - some data was being included in the interface and took up a lot of space, and after our research we discovered this data was not necessary to ASB's business needs anymore. Thus we made the decision to remove it and reorganize the roster grid to a clearer and more intuitive grid.

Wireframes

I  sketched the new wireframes in a notebook and took them to the team for more eyes.

Design

I drew each screen in more detail in Sketch App. This allowed me to present a closer depiction of the system to the team and users. I included annotations on each page describing what the purpose of the web page was and an example of how a user would navigate it.

I also designed a lot of the back end of the application - drawing ERDs on paper and whiteboards to discuss ideas with the team and stakeholders.

Prototype

We took the prototype to the end users several times to gain their feedback and get them used to the new direction of the app. It was well recieved by the end users - they liked how much simpler it was and could imagine themselves using it.

Takeaways

Challenges

Time management was a challenge at times - juggling both the project at ASB and the course work for University. We overcame this with the Kan Ban board.

Accomplishments

ASB gave us an A+ for their portion of our grade. They were very happy with our work on the project and integration into their team and wider culture.

Conclusion

This project was one of the best things to come out of my degree. I gained a lot of confidence in my skills and abilities, having designed and developed a nation-wide app for one of my countries largest banks.

The company culture at ASB was delightful and the people really made the experience for me.

With thanks to Pixel Buddha for providing the heading icons.

8 Months
March - October 2017