Case Study - Loot
Head of Design 2015 - Present
Head of Design 2015 - Present
Empower Young people to know more and do more with their money.
Loot is an exciting Fintech startup, looking to break into the student current account market by providing students more information about their money through their banking app.
As millennials we're fed up with our current banking infrastructure. Your banking app feels outdated, it's slow, and it doesn't tell you anything about where you're money is going. 67% of millennials are interested in financial management tools from their bank and 6/10 have admitted to using a money management app within the last 6 months.
As one of the earliest members of Loot I was able to build and implement the design process from scratch. This involved working to an agile process.
We conduct user research so we can understand users’ characteristics, aims, and behaviours towards achieving certain goals. Its purpose is to produce designs that improve their working practices and lives.
The types of user research that are carried out include both qualitative (e.g., ethnographic studies, scenarios, personas, focus groups, prototyping) and quantitative methods (e.g., surveys, eye tracking, controlled laboratory or field testing).
We would start by defining the problem and the idea behind the solution.
After the research has been analysed we're able to start mapping out what the customer wants; Using User Flows & personas.
Wireframing the solution
Here we can use UXpin, envision or Principle for MAC to internally test some low fidelity prototypes. This allows us to get really quick feedback, and provides a live solution which sometimes breaks the idea before we even test.
Mobile First design methodology
We decide to follow the mobile first design ideology because over 70% will view first on a mobile device. As over 85% of Loot users use a mobile device over the webapp it makes sense. By designing mobile first you're able to grade the hierarchy of the page, and map out the user flow easier than if you were designing for desktop first. This is down to the fact you are limited on space.
Invision Prototype - https://projects.invisionapp.com/share/X7E9DGLBK#/screens/261690804_Transaction
Being a startup we had to consider ways to improve our efficiency, as a result of this I fully integrated with Sketch symbols, Craft and Sketch Runner to enable the design team to have a shared library of perfect design components. This ensured we were gaining back valuable time that might've been spent on ensuring spacing, colours and typefaces were correct.
UI accessibility testing
To ensure we're not excluding disabled users we test our designs against accessibility practices, including colour blindness and readability.
Here we would provide a realistic solution internally to test amongst the company, Predominantly made of our target market.
User Testing & iteration
After developing and creating the MVP we would continue to test the product with users and qualitative and quantitive methods to help up iterate.
At this point the design team would internally evaluate our own designs against Nielsen and Molich's 10 User Interface Design Guidelines
We would also evaluate against Dieter Ram's 10 principles of good design.
When passing over to the developers, be it Front end, Android or iOS we ensured we were using the same language. Files were named correctly throughout, and by creating a style guide every text style, and colour was referred to correctly leading to less confusion.
I've created a series of style guides, one for each platform to ensure as the design team grows our consistency and attention to details is kept too. The main benefit to having a style guide is so two designers are not spending time creating multiple of the same elements.
We integrate with ZEPLIN, software designed to show developers CSS for design elements, and a place where they can download any used symbols or images. The developer can also view measurements, shape styles, constraints, and colours hex values.
Feature Writeup for developers
When passing over to developers I like to write up a document indicating what each UI means, the way finding of that view, interactions, and use cases. i.e. if the transaction was over a month ago, Show 'X' if it was within a week, show 'Y'.
The final step is to test the product with users, to get their feedback on the actual product in the real world to hear what frustrations they have and how we can iterate to make the product better.
Clients I've worked with
© 2017 All Rights Reserved /Nick Spiller Portfolio