Building a interface that will grow with your business

Posted by Greg Lewis,

 

Last month we proudly launched ‘Reward Cloud Hub 2.0’, this is the interface our partners and retailers access to view their sales, reissue codes, load/approve credit, manage brands or partners and much more.

When Reward Cloud initially formed I had less than a month to create the original hub. When I compare that to the beast we are today, there is no comparison. At the time Hub 1.0 did a perfectly good job tracking transactions but as the company started creating further functionality we soon found that Hub 1.0 was becoming cluttered and confusing. Watching back customer journeys we could see that our users were having a pretty torrid time trying to locate pages and carry out simple procedures like adding monies on account.

In this post I will give an overview to how we approached this huge undertaking from a product and design perspective.

This time round I wanted to create a platform which could grow with the company. If we add new features to the system we should be able to easily integrate them without bastardising the user interface. As we already had a service out there it meant there was no rush releasing Hub 2.0. I was encouraged to spend as long as necessary to get it right. This is a nice position to be in as it allows the designer to deeply review and explore the needs of the end user and produce a more streamlined and effective experience.

Jobs to be done

We were conscious that our developers would have to plough 100’s of hours into this project so with the help of Eddie, our product guru, we focused on the core outcomes that we wanted to achieve and focused these into a minimal viable product of our Hub 2.0.

Eddie listed out every existing function we wanted to keep, the ones we wanted to drop and the new requirements that we needed to introduce. We then prioritised these into what has now formed Hub 2.0.

Prod Pad, Jobs To Be Done

Wireframes

After agreeing the wireframes it was time to start producing some high fidelity mock ups. I wanted to produce a interface which was modern, clean and minimalist without compromising visual cues. A lot of flat design falls into the trap of removing so many axioms in the pursuit of perfection that the user experience is compromised. Buttons need to look like buttons, calls to action need to stand out, otherwise you will end up with a beautiful interface that nobody uses.

Wireframe

Mock ups

Once we had agreed on the wireframes it was time to start producing some high fidelity mock ups. I wanted to produce a interface which was modern, clean and minimalist without compromising visual cues. A lot of flat design falls into the trap of removing so many axioms in the pursuit of perfection that the user experience is compromised. Buttons need to look like buttons, calls to action need to stand out, otherwise you will end up with a beautiful interface that nobody uses.

The wireframes also included designs for mobile, in this iteration of the system we wanted to have a system which was simple to operate on tablet or phone. We had feedback from our customer base that they like to check their sales first thing in the morning!

To keep artistic interpretation to a minimum with the developers I designed every page at every breakpoint. I designed five breakpoints per page - 1920px, 1280px, 1024px, 768px, 375px and 320px. Not only would the breakpoints demonstrate any position changes for elements it would also show size changes for margins, padding and font sizes. It was important that our customers had an optimised experience on any device. This was a very time intensive process, the dashboard alone had 35 artboards.

Mock ups

Prototypes

High fidelity mockups are a great aid for the front end dev team when it comes to styling and placement. However static mockups don’t help explain how I want elements to function or transition. Animated visual cues can really help a user confirm that they have correctly completed a journey so it is important to spend time creating these. Using Principle 2 I would create animations which would show how I would expect an element to work when interacted with. This was a great visual aid for the developers which they could keep referencing.

Testing

Whilst the build for the new interface was in the system, Eddie would test functionality whilst I would test aesthetics. We created a shared spreadsheet where we documented all the errors with links to screenshots and recordings. We then had a sign off process where we would re-test errors and once approved push the fix to development.

Pre-launch

Before launching the new system we were conscious that it may be quite a shock to the system for our users. To help prepare our customer base for the new hub we launched a week long email campaign, each day we’d send another email showcasing a part of the system. It proved a good move, we had no complaints from users about any changes to the system.

Email

Feedback

Since the launch we have had only a few hiccups which have been addressed with a few hotfixes. Eddie is using Hotjar to watch our users journeys to make sure they are not getting stuck or lost anywhere, we will keep reviewing this as the system develops. Apart from those small issues feedback has been very positive. Below are some thoughts from some of our users.

Testimonials

Conclusion

All in all the project was a success. Hub 2.0 is just the MVP release, I am still working alongside the development team to refine the system even further. We also have some exciting releases coming in the next few months. I am looking in the coming months to reach out to our customers to get further feedback from them. I imagine Hub 2.0 to be a more sustainable system, like Facebook or Instagram we are looking to make more regular and minor updates from now on so that the program evolves with our customer base.