House of Fraser Party Micro Site

Project 2 - General Assembly
Luis Maceira

House of Fraser Party Micro Site was my second project in my journey trough General Assembly, this task consisted on create a micro site to help people plan and manage their parties.

Picking the brief a part

Concept Map
Concept Map

House of Fraser came to us with a brief, this was an long document where they ask for different features and requirements, my first step in this project was to break into smaller pieces so it will be easer to manage, the best tool for this job was to create a concept map so I can se graphically all the extension of the brief and what they were requiring.

The concept map help me see that the project was form by 3 important parts, the party planner functionality, the shop features and the navigational part.

What are they asking for

Requirements

Now that I understand how the brief composed from, the next step was to identify the requirements, some of the most important features required where:

Ecommerce Micro Site
The option to compare products side by side
Party Planner Functionality, and this was really complex
Tracking guests attendance
RSVP’s
Dividing costs among hosts
and more…

After that it was clear what I needed to do, but I needed more information related to the users and how to structure the micro site, so the next step was research.

The Research Process

Let’s get down to business

The brief provide information about the target group of users in the for of 3 personas, this personas had many things in common, but the most important where their pain points, such as inspirations, the possibility to compare products without having to open separate tabs, the lack of detailed product information and lengthy checkouts.

After analysing the personas in the brief, I conducted interviews to validate the pain points in the brief, one of them was my friend Vanessa Casoralo who loves to organise themed parties and in really familiar with the process.

In the interview I found similarities with the personas in the brief and also in the pain points.

“Not knowing how many people is going at the end … and the problem of splitting the cost of the party between the organisers, I always end up paying more than the rest”

This help me to understand the common navigation criteria and pain points of the target users for the project.

StoryBoard

Graphical representation of the persona situation

To help me understand more the situation of the user, I created a storyboard related with the persona and their pain points.

The situation of the persona

This help me see the hole picture and also identify an objective wich was obvious, to organise the best themed party ever.

Categories

How to organise the content

The brief had a list of 100 items to populate the micro site, this list was very wide, and at first it was very difficult to set an order to categorise them.

The best way to understand how suppliers organise this wide range of items I visited a party supplier shop in lewisham, in this visit at first it was really hard for me to figure out the catogories, the inventory was massive and it was everywhere, but after I spoke with one of the staff members, he showed me the way they organize the items, and indeed there was a way to orginise after all.

I left the store with a general idea of the main categories and how to organise the content for the project, but I wasn’t clear, I needed to try something else.

Card Sorting

Organise cards to generate a structure

The card sorting exercise help me generate categories for all the items in my inventory, and after doing it with 3 different volunteers a group of categories emerged.

Inspirations
Decorations
Wearable
Essentials

After I identify what they needed and how to organised, the next step was to create a site map to see the global hierarchy and the scope of the microsite.

Site Maps

Based on the concept map, I drafted two site maps, one for the site navigation and the second one based on the party planner functionalities that lives within the account tab.

First attempts of sitemaps

After a lot of iteration and refining, I digitalise the maps in Omnigraffle and ended up with this structure.

There is a second version with all the items from the inventory.

User Flows

Journey of the user to achieve a target

One of the requirements of the brief was to illustrate 4 user flows. Using the site map I was able to create this flows, and it help me to see the real scope of the site, and also to identify how many screens I needed in order to create my wireframes.

Wireframes

Building the skeleton of the prototype

Based on the research and all the information that I had, I started to draft some wireframes, the firsts attempts were tested in paper in order to validate their efficiency, unfortunately it didn’t work, after iterating the process based on the paper wireflow, a final concept was built.

This concept was digitalised using Omnigraffle to create a prototype using InVision, after testing, the results came and in order to improve the prototype I had change the terminology used in some parts, also work in some screens that were missing such as the confirmation screen for the check out process.

Here is a link to the final prototype:

Next Steps

How to improve the potential of the micro site

Some of the next steps are improve the navigation inside the account tab, create screens for the user log in experience, and of course test again.

That’s the end of week three, If you have any comments or suggestions please don’t hesitate to write.