STERIS Collect & Deliver

User Interface /

Steris
collect & deliver

One of the big projects that was on our road map for 2018 was to create a mobile app for EPOC / EPOD (Electronic Point of Collection / Electronic Point of Delivery).

user interface

We already had the process, but it was done with pen and paper or word of mouth between members of staff collecting and delivering trolleys.

Collect & Deliver application on a Bluebird device

Login

When the user opens the app, the first thing that they have to do is login with their credentials.

The app login had a 10minute inactivity period before it logged the user out of the app. If the user works for a longer time, the user can tap ‘Remember me’, and it will keep them signed in until they decide to log themselves out.

After logging in, the user is taken to their Task page, where they can set up, or do their daily jobs. – Phase 1, started with Collect and Deliver.

Login design flow (1 of 3)
Login design flow - enter user details (2 of 3)
Login design flow - enter details (3 of 3)

Password expired

After some time, for security reasons, we made the user enter a new password.

Collect

When drivers collect trolleys, they must scan the location that the trolleys are being collected. They then need to scan the trolley IDs for the waiting trolleys.

If a trolley is scanned that shouldn’t be collected, then the user will be notified to inform them of an error.

Hospital contacts

When the driver logs into a device, it populates the contacts page with the staff relevant to the collection and delivery points for that shift.

If something goes wrong during a journey; stuck in traffic, for example, drivers can call the on-site manager, or use the maps to navigate around the traffic to get to their destination quicker.

Favourite tasks

The user can edit their tasks depending on what jobs they are doing throughout their shift. This updates the Task page when the user toggles each job on or off.

Locations

Most drivers have roughly 3 of 4 delivery points that they drive to throughout their shift. Sometimes there can be ad-hoc requests or Fast Track deliveries that are needed as soon as possible. These will notify the user and take them directly to that location as quickly as possible.

Settings (change language)

STERIS work over multiple countries, so the app needed the ability to allow users to change language settings.

To do this, users go into Settings, select the Languages area, followed by tapping on their language of choice. Once a selection is made, the app navigates back to the Settings page.

Settings (change user)

The device is used across multiple users, so we added the ability to switch between accounts quickly. Doing this allowed users to keep their preferred personalised Tasks the same without having to set their Tasks up again every time they logged into that device.

Settings (create new password)

If the user wanted to change their password, all they have to do is enter their current password, followed by entering and confirming their new password. Once the user has tapped Save, the password will be updated.

Byte Ya Matez

User interface /

Hack24
byte ya matez

Hosted by Tech Nottingham, Hack24 is a 24-hour coding competition based in Nottingham City centre.

Teams of up to four people compete for some awesome prizes by starting with innovative ideas and building them into new things.

esendex challenge

Our team, decided to work on the Esendex brief.

The aim of the brief was simple;
“Make communication (and the world) better!” 

Teams received bonus points for using Esendex products. We used the ‘Esendex Multi-channel API’. This allowed users to interact with each other using their mobile phones. When paired with a mapping API, this allowed us to create a virtual game of ‘tag’ that could be used with friends across the city.

Zombies vs Humans

The aim of the game is simple; Chase and Tag your friends around your area. You get allocated a team; Zombies or Humans. As soon as there are no more players for one team left, then the game restarts.

There are ‘Power’, ‘Safe’ and ‘Dead’ zones where you can call out to your friends to help each team to take advantage and swing the pendulum of your side to win the game.

You tag a friend by tapping your phone on the other players device, making sure NFC (Near Field Communication) is active.

Loading…

I decided to create a fun twist on the loader for the app. In the true spirit of zombies, the body would crawl across the bottom of the screen whilst the page loads.

Zombie loading bar example

Status bar

These are the status indicators showing the number of players currently on each team. As players swap between groups; the Humans or Zombies counters change.

Notifications

No game is complete without relevant notifications explaining the situation of yourself and friends within your area.

UNiDAYS Native App

User interface /

UNiDAYS
NATIVE APP

My job over an 8 month period was to think up slick UX / UI and work with my team to develop a native iOS and Android app, ready for the start of the start of the new educational year.

WHAT UNiDAYS DO

UNiDAYS are the world’s leading student network, with access to over 10+ million students worldwide.

Providing multi-channel campaigns and solutions to help reach students – the highest value consumer group of all time.

10 million total verified members

50,000 monthly verified member growth

18.4 million monthly user sessions

48 million monthly page views

6.5 million total monthly engagement

14% average user conversion rate

APP STORE & GOOGLE PLAY

It was an incredible moment for everyone when the UNiDAYS app broke into the App Store top 25 and Google Play top 100.

User interface

When the app opens, I created a loading animation. This allowed time for the app content to load all the Perks within the homepage. The iD was highlighted in the beginning to represent Student ID.

Introduction screens

As well as the animation, I created a few introduction screens that explained the benefits of joining and having a UNiDAYS account.

Login screen

Upon logging in, users are taken to the homepage. This is where the main brands pay for exposure, as well as limited-time offers.

Explore (for Android)

Perks were in groups of type, so users could swipe between the pages to see the other areas.

This area was one of the main differences in native UX between Android and iOS. Android interface uses swiping and the Hamburger navigation to get between pages, whereas the iOS interface uses main sections along the bottom navigation.

Search (for Android)

Searching within the Android app was done by hitting the floating action button at the bottom right of the screen. Doing this opened up a new page where it showed previous search results.

See Tickets Mobile Site

User interface /

See tickets
mobile site

I was challenged to create a dynamic mobile site as we felt there was a big hole in the business that needed filling when people bought tickets for events whilst on the move.

User interface

By researching, and through personal experiences, people use their phones more during the day, during commutes, and on lunch breaks. It isn’t always easy to have a computer to hand to book concert tickets.

It made sense to create a smooth experience to book through and store users information to their account on. So the next time users wanted to buy tickets, it would be easy enough to do so in no more than four clicks.

Location screen

When a user first enters the site, they get asked if the site could use the phone’s location. This helped keep events relevant to the location of the user. You could also use the search bar to search for events within a specific city or area.

(Android – iPhone – Windows)

Login & Sign up

We gave users the ability to browse the website regardless of creating an account or not. However, when the time came to buy tickets, users would be required to Login or Sign Up.

Creating an account allowed users to ‘like’ and ‘follow’ events of their choice. Users could also save their details to speed up the checkout process when ordering tickets. As this is time-sensitive, the whole process a lot simpler and easier to complete.

Homescreen

The home screen was designed into different sections to allow users to filter and easily search. You could search for a Date range, Location or Event type. Changing these filters updated the results on the homepage accordingly.

The home screen showed an infinite amount of events, with the ability to add individual events as your favourite. Adding a favourite event allowed users to navigate back quickly to that event at a later date.

When a user adds an event to their favourites, it gives the user the option to receive notifications announcing when tickets went on sale or if ticket allocation was running low. We didn’t want people missing out!

Filtering & Search results

To help users narrow down their search results, we added the ability to search a specific date range, events happening on that day, the following day, or coming up at the weekend.

As well as this, we used geo-location to bring in all the events happening within a set radius of the phone’s location.

Finally, if the user had a favourite genre of music or festival, then they could favourite multiple artists – these would be remembered and filtered for the user on the homepage.

Tracking & despatch

Sometimes tickets took longer to arrive than expected; users could check the state of their order. We created a Tracking and Despatch area, where we added various FAQ’s and outcomes to help the user out.

A progress bar showed users the state tickets were at, and when the tickets will get delivered.

Tour page

The tour page is where users select the date / location that they would like to see an event.

Certain events had promotional videos and pictures you could view by swiping through on the thumbnails. I also added a ‘Similar Artists’ area at the bottom of the page so the user could view other areas and events.

Event page

The event page lets users select the number of tickets they require to add to their basket.

It also has additional information like the Seating Plan, Venue location and the directions.

Checkout

The checkout area needed to be straightforward and easy to use as it was time-sensitive.

If the user hadn’t purchased tickets after 5minutes, the tickets then get released, and the user would have to go back to repurchase the tickets. This prevented robots bulk buying tickets, or people adding tickets to their basket and forgetting to purchase them.

Within the Profile area, if a user allocates their bank card, they would only have to click the ‘Buy Tickets’ button – this helped save a lot of time at the Checkout stage.

If the user doesn’t fill these text fields, then they need to do so before being able to complete the purchase.

Impero Remote Manager

User interface /

impero
remote manager

Operating in two key sectors; Office and Education. I worked on the company rebrand and structure of their products, and branding identity to create a simple to understand and instantly recognisable format for customers.

USER INTERFACE

Designs approved and templates built. Now to populate the app with the new styled icons I created. The app was launched in four languages;

French, German, Arabic, and Dutch.

Icon design

The icons that ran through the app were simple. Each icon had three corporate colours; this helped give the app a modern facelift.

remote manager

Remote Manager is a seamless and innovative blend of online safety, network admin and classroom management software.

Imagery

It works in conjunction with the Education Pro, Workplace Pro and YouID software.

In doing so, we created a fresher and brighter identity that connects with Impero’s customers and creates a clear vision that flows through all products and sub-brand.

Website

The last thing to get rebranded was the website. During the test phase of development, the site got A/B tested so that we could choose which website layout to use once the official site went live.

imperosoftware.com

The website uses the location of the user. So when a user is in a different region, it loads up that specific regional webpage.

Each region has it’s own tailored visual elements that run throughout the pages.

A/b testing

A/B testing is a method used on many sites to find out how well a design is influencing users’ engagement, particularly in regards to a specific call-to-action.

imperosoftware.com

When users arrive at the site, they are shown one version of the design at random, and overtime statistics are measured to see which design gave the best results. Once a winner is determined, it becomes the design for all visitors.