Archive | websites RSS feed for this section

Lovefood.com – a new website for foodies

23 Nov

Over the past few weeks, Colin, Joseph, Julia and I have been working away on a tasty new website called lovefood.com. I think it looks mouthwatering!

Lovefood homepage

The idea is that recipes from top chefs are collected together to form a definitive ‘Guide’ that’s full of authentic dishes, so you know they’re tried, tested and delicious.

Lovefood Guide

Giles Coren is one of the key writers for the site and recipes come from celebrity chefs, like Jamie Oliver and chefs from well known restaurants such as Henry Dimbleby (Leon) and Rene Redzepi (Noma).

As usual, we’re still working on adding to the site, agile style so it will evolve over time. Next to come is registration functionality and being able to comment on recipes.

Enjoy!

‘How-to’ get richer

18 Nov

We’ve just launched our shiny new How-to Guides at lovemoney.com.

They do just what they say on the tin – whatever your financial aims are, whether it’s managing milestones in life such as getting married, or being able to go on more holidays, or build up some savings, there’s a guide to help you achieve it.

How-to Guide homepage

I think they look pretty enticing with the carousel for navigation. Each guide has the tasks broken down within it, so there’s loads of information here.  I even learnt a thing or two from our testing!

We’re going to add the ability for users to comment very shortly – some of the most useful tips have been from the lovemoney.com users.

How-to Guide task

We’ve been working on some other things too, which I’ll post about very shortly.

Designed by Julia, built by Phil and coded by Joseph – excellent work guys!

Join a group on lovemoney.com

7 Oct

Groups, our recently built page was moved from the footer into the header in yesterday’s release, so we’re looking forward to seeing lots of activity on this area of the site.

It’s supposed to work more like a community of people with similar interests, so you should easily be able to find answers to pretty much anything and it doesn’t need to be limited to personal finance….

Hope you like it – have a go! I’d be interested to hear any feedback.

Mortgage update: Apply for your mortgage online

2 Aug

….with our new application form!

Begin by searching

The idea is that a user can filter down their mortgage options using our mortgage search and then select a mortgage they would like.

One good thing is that we check to see if they are eligible as part of the process, so the user won’t see products that they might not be able to get (as you usually do on best buy tables).

Apply online

Once they know which product they want, they can go on to fill in an application form for that product. I outlined it on our company blog here.

The main aim with the form was to  try and make it simple to fill out because most people associate a mortgage application with lots of boring paperwork, and it’s true, there is a lot of information that’s needed. I counted over 500 fields!

So our aim was to make the form as short as possible whilst still recording enough detail.

Initially we looked at all of the information that was required in an application and removed any fields that we felt could be collected at a later stage. The credit card details information fell into this category, as these can be obtained by the mortgage advisor.

We reused as much information as we could from the registration and previous journey that the customer has taken.

So,the form is prepopulated where possible: the image below is for a non-registered user, and the the one below that is for a registered user.

We divided the form into sections and, you only see the ones that you need. For example, if you’ve worked at the same job for more than three years, we will not need to know about your previous employment.

As the form is pretty long, also use the functional navigation to indicate how far along in the process you are and avoid disorientation!

There’s also a bit of encouragement here and there on the form!

The side bar indicates what information the user will need to have to hand, to save them time.

Above this, is the “We’re here to help’ the button that the user can click on to get help at any point throughout the form. This goes through to our mortgage team who can give help on the form itself or can advise on a mortgage, whatever the user needs.

Once the user submits their application, they get an email with details of their application. The mortgage team at lovemoney.com also get an email alerting them to the new application and they can view it so avoid asking rafts of questions and can get on with helping with the application.

So hopefully the process of applying for a mortgage is a bit less tedious than normal.

What is the Web Layer?

30 Jul

The web layer brings together the design and code instructions in a way that a user can understand on a web page. These pages are written in HTML (normally using CSS too because this enables easier control of the look of the site) and are displayed in a browser.

MVC: a brief overview for non-technical product managers

8 Jul

Our tech team have been using a new architecture – MVC our website, so for other non-tecchie product  managers who might be involved in using this, I thought I’d try and explain my take on it and give an example of what our team has built.

Apparently one of the benefits of using MVC is that development is quicker because there’s less code to write and code can easily be reused, more easily than when using N-Tier.

So what is MVC? I’m no expert but Colin (our in-house pro) has explained it, (and he has written some really useful tips on his blog  including how to upgrade your system to use MVC) so I’ll try and write it down as best I can.

So, MVC stands for model view controller, which represents the 3 different parts of the architecture.

Model

First of all is the model. This contains the entities, which are like templates for how the tables in the database should look. In the N-Tier process, a whole load of stored procedures would need to be written to tell the Data Access Layer what to pull from the database.  However, we’ve used Entity Framework which simplifies access to the tables because it ‘understands’ how they are structured, so negates the need to write bulky stored procedures and mapping.

View

Then there’s the view, which shows how the page will render using HTML. This is the part that the designer will style.

Controller

The controller gets requests from the user and gets the relevant data from the view and the model to display on the screen.

The diagram from Wikipedia is a handy way to visualise the flow of information in MVC

“Model-View-Controller concept. The solid line represents a direct association, the dashed an indirect association via an observer (for example).”


Colin’s built our new feedback forum for the online banking part of our website. It works really quickly.

This is the main landing page for feedback for online banking. As you can see, there’s a distinction between public and private threads.

Users, if logged in, can start a discussion (pictured above) and reply to threads (pictured below), tagging them as ‘Helpful’ if they found them so.

In terms of breaking down and estimating the work, it seems like it got broken down a lot more that when using N-Tier.

Here’s a sample of the kind of tasks the work was broken into:

As you can see, most of the work is 1 or 2 hour chunks, instead of hefty ‘stored procs’ work for example.

The great thing about using MVC means that if any other areas would like their own feedback forum, it’s now a pretty simple job, a case of changing a few headers instead of writing and testing lots of new code.

Nice!

Mortgage engine update

12 Mar

We’ve been busy making a few tweaks here and there to our mortgage engine over the last few iterations so I thought it was about time for an update. Here’s how it looks:

The landing page

Karen has styled the engine so that it uses the ‘secure’ look and feel of the site, which was first of all used by our Online Banking tool. Ben designed a lovely clean new landing page with a nice big orange button that signposts where to click. Great job!

You can now login to save your searches. Handy if you want to try and then search again in a bit – without having to fill out loads of fields. Nice work Colin!

Initial questions

 

We’ve added instant chat too, so that people can quickly ask our advisors something – handy if they don’t think their question merits a phonecall and it’s discreet too.

Eligibility

This section asks eligibility questions to make sure that the results produced are mortgages that the user could actually get.

The results are therefore pretty different from a normal best buy table in this respect. Usually these tables feature links for the products with the best rates. Often these products have criteria that need to be met and you only learn whether or not you fit the criteria by applying for the product. So doing it this way saves the user lots of time and form filling.

Refine your results

More filters – here the user can specify which features they’re looking for, like offset mortgages for example , and allows them to select up to 4 mortgages to compare.

Select your product

 

Once the user has compared mortgages, it’s easy to select and find out how to apply.

What next…

So it’s nice and easy for our users to find a mortgage :)

The other thing I really like is our case management tool. If someone takes out a mortgage with us, our advisors keep them up to date by posting updates and useful docs on the user’s personal mortgage homepage. I’ll do a post on this soon…

Great work, Team A Star!

Storytime

24 Dec

Laurence Sterne A Sentimental Journey’

Stories are fun at any time of year, but Christmas in particular lends itself to storytelling, having a get together, watching films, reading books.

This quote above shows how stories are a powerful way of teaching because they allow the audience to connect emotionally. Sterne draws a parallel with heat – indicating that stories can inflame passions, and questions why the ‘heart’ cannot be convinced with cold facts, but tends to need the frame of a story in order to be convinced.

This reminded me of an excellent book. Made to stick examines at how to make ideas memorable and comes up with a set of rules that each idea needs to abide by in order to make it stick in people’s minds. One of the key  rules, of course, is to use a story to represent the message.

Following on from this, I wondered how storytelling online differs from traditional methods. This article by Rob Mills at Carsonified talks about how to make storytelling  work on the web and was a useful way to consider the different elements that you would online.

I liked Rob’s conclusion that the web offers opportunities for new ways of storytelling that are not necessarily linear and it presents a range of creative challenges.

Ok, and now my contribution. Well, it’s not it’s not strictly a story – but jokes counts as stories right?

There were two monkeys in the bath.

One went  ‘Ooh ooh ahh ahh’ and the other said ‘Add some more hot water then!’

Credit goes to Jimmy Carr for that gem- he did a fabulous show at the Apollo!

So off to Xmas – I wish you all a very happy Xmas with lots of storytelling and cracker jokes!

Making it simple to search for a mortgage

30 Oct

mortgagehomepage1

We launched the new lovemoney.com mortgage engine recently.

It’s designed to

  • show you mortgages you’re eligible for
  • allow you to filter the mortgages on the market according to what you want

so that when you see the table of products listed, they will be suitable products that you are qualified for.

What we did

We started the project by spending a few months asking users what they wanted and developing the journey. We ended up with wireframes outlining what the journey might look like.

Homepage

SearchPage

SearchPage(Working)

SearchPageSubsequent

PossibleProducts

ProductSelected

Wallet

Then we specced it, built it, tested and launched it. It took a couple of months to spec out the work and about three months to build the first version.

Now we’re iteratively adding functionality. Since it’s been launched, people can share their searches with others and Instant Messaging went out in the last release, so people can now chat with our advisors.

There’s more in the pipeline!

Wireframes made simple

15 Sep

Came across this great tool today. Makes doing wirefames as easy as pie.

mockup

We’re close to launching a new engine on the site today (more about that soon!) and the wireframes were the bit that took the longest – thinks it’s related to trying to visualise something that doesn’t exist.

Looking for an excuse to use this now! Thanks Balsamiq

Follow

Get every new post delivered to your Inbox.