At the beginning of the project, we undertook a detailed project exploration phase. During this process we assessed Saving Stream’s current analytics to help us gain a deeper understanding of how the platform was being used by existing and new investors. To help inform the design phase, we performed a competitor benchmarking exercise where we looked at other industry websites and evaluated them. This is a useful process to see what companies are doing well and what could be improved, doing this research helps formulate a rationale for new site ideas.
Using metrics gained from the analytics, we were able to create Personas typifying the average Saving Stream user, which became a valuable reference point during the project. Before doing any visual design our creatives produced inspiration boards pulling together various influences to help define a stylistic direction. Prior to entering the wireframing stage, user flows were produced to help define optimum paths that users should ideally be taking to complete specific tasks and goals.
Saving Stream required a lot of thought around how investors would interact with the platform. Although they were experiencing a steady number of new investors coming on board each month, like any ambitious startup an increase in volume was important. Therefore an initial goal for the company was to significantly increase sign-ups, and ultimately convert these into investors. Their previous site, similar to others in the industry, required users to create accounts before seeing any potential investment opportunities. It was suggested that a more transparent approach would be more effective.
We explored an onboarding process that saw users immediately being able to ‘Start Investing’ when landing on the website. This would take them to the available loan portfolio, where interaction with the platform could start immediately, just as an investor would have done previously with a full account - no blockers, no details required. It’s only when potential investors are happy to commit to an investment that they are required to ‘Create an account’, and transfer the funds to Saving Stream within 48 hours.
Wireframes & Prototypes
Taking into consideration the newly defined onboarding process, the design team worked away at the wireframes referencing the user flows and sitemap. Detailed, high fidelity wireframes were produced to simulate user journeys but without the influence of any visual design.
These wireframes were made completely interactive so user testing could take place and flows iterated upon. After undertaking this process the client had a good feel for how users would interact with both the front facing marketing site and the investing platform when logged in. The process proved invaluable as it helped define clear tasks and paths early on, with the client being able to see any shortfalls without being influenced by any visual language.
Initial steps were taken with the visual direction during the exploration and wireframing process. Saving Stream already had a recognisable logo which required minor tweaks. Loosely using their brand style, we helped redefine a visual language.
UI Style Guide
With the high fidelity wireframes in place and defined user flows, we turned our focus to the visual design. We took a new approach with this project by creating a UI style guide for developers to work with. This defined all elements of the site, from colours and headers, buttons to form elements and success messages. The style guide allowed a more flexible approach to the design using a solid reference point.
A few marketing and initial platform pages were designed to demonstrate usage, but this system allows pages to be produced by developers along the development road map. The UI itself made use of a blue-green gradient to give the site a much more friendly and modern feel. Photography choices steered clear of overly corporate, staged images and looked to use real people, in more relaxed environments. A set of illustrated icons were produced promoting the features of Saving Stream, which was another useful addition to the visual language of the site.
Saving Stream talk to their users regularly, when a new loan is available or with a weekly update - we wanted to build upon this good rapport with some visual delights for investor inboxes. For added continuity we wanted these emails to look and feel just as good as the website does, so following the brand guidelines and UI style guide that we had created, beautiful new email templates were built.
Handling Realtime Investments
Each of Saving Stream’s loans has a limited availability. When new loans are published to the platform, it is often a race for investors to get a slice. These short bursts of activity can be problematic for systems dealing with finite amounts; consider the thousands of would-be festival goers fighting to purchase the last one hundred Glastonbury tickets. Without proper consideration it’s possible for some purchases to be placed before stock levels affected by simultaneous purchases are updated... resulting in more tickets being sold than are available.
This is a problem Saving Stream has been affected by in the past. Loans sometimes ended up with a negative availability because multiple investments were made at the same (or nearly the same) time. This meant that two investments of £500 could be placed for a loan that only had £500 remaining, causing investment to exceed the loan availability by £500. Whenever this occurred, Saving Stream had to manually thumb through the investments, cancel any that were placed after the loan’s quota was filled, and notify the soon-to-be disappointed investor.
If this sounds a little confusing, it’s because it is. This is a class of time related problems that can be challenging for programmers and often go unnoticed. Hackers, for example, have been able to cheat Starbucks’ gift card system by very quickly transferring balances between cards, eventually being able to transfer the card’s balance twice before it was updated.
We solved this problem by handling investments in a queue. Investments in any single loan are handled sequentially, meaning that the amount available is always accurate. We ensure that investors still get a slice by adjusting the amount of their investment if the availability has reduced by simultaneous transactions.
Due to the financial nature of Saving Stream’s service, security is of utmost importance. We implemented SMS based multi factor authentication to secure investor accounts. Investors are required to periodically verify each device they use by entering a code that is messaged to their phone number. This means that both the account password and physical possession of the investor’s mobile phone is required to gain account access.
In addition to our usual process of image squashing, asset concatenation, and stringent performance reviews, we employed the relatively modern tactic of inlining critical path CSS to achieve excellent performance in a range of network conditions.
This means that the styles required to render the top of a web page (the part usually visible to visitors when they arrive) is inserted directly within the page and available immediately. This makes a real difference to how fast a web page feels.
Live Investment Updates
We used AJAX to keep changing figures up to date across the site. Loan listings are updated to show availability as it changes, without reloading the web browser. This is a useful feature for those investing in a new loan, the availability of which may be consumed within minutes.
To ensure these updates are performant, the backend system we created is able to serve many pieces of data at once. Only one HTTP request is required to fetch all updated data for any page (which may contain several loans).
Copywriting (SEO focussed)
The copywriting process began with analysis of the existing Saving Stream site, as well as those that offer a similar service, as identified during the competitor benchmarking process.
An important goal for the new site was to increase the number of signups. We considered several areas that contribute to search engine optimisation, as it will be important to reach as many new users as possible. We also carried out detailed research into the industry itself, including financial regulation guidelines, to ensure that all content would be accurate and contain any important terms and conditions.
When it came to producing the copy we felt it was important to use straightforward, clear language, free of any industry specific terminology. This was to ensure all visitors to the site could understand the concept of Saving Stream, and by echoing the simple, transparent processes in sentence structure and language it continues the overall image of an easy-to-use platform. Once we decided on suitable words and descriptions we continued these throughout the site to ensure consistency. When the copy was agreed by Saving Stream we used this as a basis to outline meta data and alt tags for the developers, all of which contributes to the SEO efforts.