UX Design — Fundamentals of UX (part 3)
Card Sorting
As-is
We came up with three categories for the application.
- Info (about the service)
- Entry (login/register process)
- Application (Add/remove/edit of the application)
Key findings
- Deep Pages
- Content Overload
- Poor navigation
It seems that there are 3 separate sections of the application, all very different from each other eg the first section (info) contains the Bus Eireann website, the footer and header while the other two are more like an app.
To-be
Our attempt was to reduce the complexity of our deep pages by splitting into 4 categories, introducing an eligibility tester and adding a simple login/register.
- Reduced pages
- Streamline content
- Remove redundant information
- Eligibility test — small intro for people who don’t know the system as to eliminate some complexity on the front page.
- Video/image to better describe the service than a blob of words.
Task Analysis (to-be)
In the to-be task analysis we have removed key points of friction and addressed the major issues identified by the Heuristic evaluation.
- Clear information from the outset
- (Error Prevention) Eligibility Check up front
- Remove and streamline steps
- Enter information — once and reuse (removing effort for end user)
- Fully Digital process
Wireframes
Version 1.0
This version is a version before our first wireframe. It’s a just a mockup of a wireframe to give us a visualisation of what it could potentially look like. We drew this in about 30 minutes. We did not want to draw out a very detailed prototype as we knew we would connect to it and it would be hard to change.
Version 2.0
For version 2, we got a little more detailed. We started to see whats inside the boxes, titles and labels. We used version 1 as an example . We initially started to draw out example on the piece of paper but changes where hard and we basically needed to draw it out again. That took too long so we started to draw our common pieces on coloured paper; This method is called common components, user a lot by front-end developers to help re-use code.
It was useful for us to even do faster prototypes as we can reuse any component. This made it even easier to prototype; by shifting them about and rapidly coming up with new ideas was quite fun and productive.
In our example, the header and footer pretty much stayed the same, so this saved paper and we could reuse them for each screen. Also our common green button can be taken and a label is created reusing that same piece. This helped with sizing and layout as the button stayed the same size.
Version 2.1
We ran out of time on the last session so we met up again and started to draw what our paper prototypes have stated. This was quite detailed going over each section with titles, labels and text.
I then uploaded the screen to Marvelapp and got a basic interaction story going with flow between screens, check it out below.
After creating this and sharing among the group, we found out after that we would need to draw a lot more screen on paper, and drawing is quite time consuming, no copy paste or undo. We turned to the digital side for help.
Version 3.0
I used Adobe XD (had a look at other tools but found this the most easy to use) to quickly mock up an app. I did not create anything from scratch. I used the Apple iOS design system components, for fast prototyping the app, as we did not want to get into high fidelity designs.
Click anywhere to interact with this Prototype:
