UX & UI

Documenting requirements

  • Establishing what it is we are creating
  • Who is the user
  • Why is this going to bring value to the stakeholder/client
  • How are we going to create this
  • How much time have we got for each stage of the process
  • What is the budget? Establish the budget for each stage of the process.

Gathering requirements

Research

  • Establish budget on key development areas (UI and database)
  • Create the I.A (Information Architecture)
  • Understand all functionality for the user
  • Understand how this links to the database
  • Consider data mistakes and options for edits in the front end
  • Compare similar tools in the market for data capture

Research chart

Concept Design

  • Create simple sketches highlighting user journey
  • Test/share sketches with users for feedback
  • Create wireframes for user journey for testing

User journey sketch

Wireframes

Testing and validation

  • The pages were a little to complicated with too many fields per page
  • The process felt a little time consuming for 1 page
  • The language used was confusing to some users due to English being their second language

UX Design changes to meet requirements

  • Simplify the user journey. One field per page, move onto the next field (page).
  • Establish language that all users can understand for each field.

Testing issues

  • Location of client (Ireland)
  • Location of users (Ireland)

Testing solutions

  • The initial sketches were sent over and a skype session was set up with the client and his staff
  • The interactive wireframes/prototype was sent via JustinMind testing tool for feedback with comments
  • The 2nd iterations to the UI and user journey were also sent via JustinMind sharing tool for feedback via comments
  • A live testing session with users via JustinMind’s Validately (Think Aloud) or Skype.

Design concept validation after iterations

  • Testing the new user journey with the User/Staff
  • Creating new wireframes/Interactive prototype for testing
  • Creating the User Interface for sign off
  • Creating the Interface elements for development
  • Working with developers to clearly manage the user journey and functionality
  • Working with the developers on the data output CMS/Reporting
  • Managing the schedule and development stages for testing with the stakeholder and users

User journey established

Prototyping

Detailed design and development

The client decided that he would like a light, clean and colour injected user interface. The client had previously requested the ‘system’ to be based on his website, with a heavy black and silver theme, but had decided that this would actually be changed in the future to follow this system interface.

Example of user-interactions and prompts in the Log-in UI