Nexus

Hired by a small agency (The Workers) to help wireframe a new website for a production studio (Nexus Studios) who produce and direct films for clients such as Audi, UEFA, and Google.

Within the brief the clients wanted a more streamlined approach the pages that were currently on the site with focus on the studio and the directors showing that they possess the skills in house.

The agency we worked with also wanted to create an editorial feel to the site where users would be able to explore the work they produce.

Personas

User- Marketing Manager

  • Responsibilities
    • Planning implementation of marketing material
    • Establishing strategies to meet goals
    • Project management
    • Staying current with industry
  • Challenges
    • Understaffed
    • Unrealistic deadlines
  • Wanting to see broad range of work, and clients to gain confidence in the company. May need to forward work onto people within team to gain support to start talking with particular agencies.
  • Doesn’t want to waste time getting lost or have to work out how to use aspects within the website.
  • Wants to see good quality work that excites them that gives them ideas for their own company marketing plans.
  • Saturation of talent within the industry – How do they find the right fit?

 

User- Directors

  • Established directors
    • Looking for the next role that brings good clients for CV, along with excitement of being able to push boundaries in their work.
    • Wants to see a company where they feel they can have likeminded people to work with and be excited by

 

  • Graduate producers directors
    • Straight out of uni, or moving into second role.
    • Wants to see if it’s possible to learn off peers,
    • Looking to the future – seeing if there is progression with the company

 

Deconstruct existing website

First we took apart the existing website, looking at areas that should be improves

What we found:

  • News section within homepage didn’t have headers allowing the user to know the context of the content block. Eg whether it was news, social or work.
  • Not enough space between content, not allowing the work they produce to breathe.
  • When viewing the directors and work pages it was quite easy to get lost within the different sections as the work took you to different areas of the site
  • Inconsistencies across site with video player and format
  • Could be doing more with social being pulled into site to help keep content fresh within site.
  • Nowhere to allow users to share content

Sketches


 

Initial wireframes

Below showing initial concepts and building into wireframes

Client feedback

Here we sat down with The Workers to discuss our initial ideas. From this we were given a number of points to focus on when reiterating our original concept.

Initial thoughts from meeting:

  • We were given more freedom to adapt the site map where we felt the site content could be reduced to ease user journey.
  • Top open up the initial filters to allow user to explore the site more.
  • See if there is a better way to serve the contact information to the user other than the footer.

 

Final wireframes

From the initial wireframes we made a few modifications to the site

  • Combing Work and director page that then both lead the users to the project page.
  • The Individual client page moves becomes a filter within work and Talent. The Videos then reshuffle with text above giving a short description to the director. Helping to not navigate the user away from this initial browsing/filter page.
  • Moving the skills out of studio page and into the Work and Talent as filters. This allows the user to browse the work depending on filter, as well as giving a short description of the skill at the top of page to help give more insight into the Nexus Studio.
  • The use of larger text in short sentences as a page break and help give more insight into the nexus studio as well as introducing new the users to a new section within the page.

 

 

 

 

 

Presentation

 

 

 

 

 

 

 

 

Supplier site

A project at work where I was asked to build a go to website that would help answer the questions that our supplier have, when booking content onto the Sainsbury’s website.

Atomic design

When first joining Sainsbury’s, I found that the team were using templates for their page builds.

After talking with a number of the producer team I found that they want more control within their pages. As the team did not have HTML skills it caused a lot of pages to break as they tried to change their pages.

Here I instigated the move for our designs to be component based. Allowing our producer team to changed the content of the page and quickly and easily create their own templates without the need to brief a new template and duplicate content.


First building the atoms that allowed the producer to choose the text format they wanted to use within their content.

Then producing multiple templates the producer can use within their pages and drop content into.

 

CompShop


Scope

Within a buying role at Sainsbury’s, Tesco, Argos and you are starting to prepare for a new season, or looking at a new range there is first a lot of research that needs to be carried out. One of the tasks is to perform a Comp Shop, to see what competitors are selling within their range and what they are placing their focus on.

The CompShop app aims to give users a place where the information gathered can be saved as well as presenting this information for the various strategy meetings that take place.

The current problem

– Everyone within the team takes their notes on different formats. eg pen and paper, mobile notes. Making it quite time consuming to collate this data when back at the office.
– When out on the comp shop a lot of photos are taken of products, Shelving, and different competitor offers but there is no system
that links the notes taken from colleagues with the various images taken, so this becomes a manual task to link up the images with the notes when back at the office.
– The start of a new season can be quite a busy time. Collecting the teams data can happen a number of weeks after the comp shop has taken place, meaning that when collating, certain points may be missed.
– Because different people collate the Comp Shop every season, it can be very difficult to find previous Comp Shops to compare against.
-All the current teams display their data in different ways. Causing issues when senior manager move departments with teams delivering something the manager is not used to or expecting.

The User

Tesco employees within Buying team. Including Buyer, Merchandising, Technical and Web Trading.

Solution

– Mobile app that will collate the teams data, notes and images.
– Will link photos taken with the correct store.
– Will present the teams data in a web interface, that can be saved out and be used within a team strategy meeting.
– A system that allows users to view past CompShops.

 

Research – Concur

Concur is a mobile application that allows employees to submit expenses. I can see this being a similar application as the CompShop as this is a simple interface that presents the user with a number of forms they have to enter, as well as using the camera to add receipts to specific expenses.

Benefits

  • Simple to use. You can generally pick this up and use it with little knowledge of the app.
  • Clearly spaced and labeled.

Negatives

  • When entering and submitting a form you go through different pages and it is not clear how far you have gone away from the home page of your initial entry. I think this can be partly blamed on the page colour. As all are white its difficult to create a picture in your head of how you have directed yourself to the current page.

Research – Bazaar voice

Bazaar voice is an online application that gathers our customer comments and ratings. It will then feed this data back so you can quickly decide what products need to be focused on, and how these have been tracking over a certain period of time.

Benefits

  • Very good at gaining a brief overview of how your area is tracking and what areas need to be looked at in more detail.
  • Data can be easily adapted and can be presented in meetings without having to edit and change formats.
  • Doesn’t give too many options so overbearing for first time users.
  • Question marks discreetly added to help users understand what is being seen.
  • When hovering over graphs more detail is quickly presented in a small pop up, making the forms engaging.

Negatives

  • Does not take into account actual returns so you can not rely on this data alone.
  • Only shows data in graph format. Table format may be beneficial to digging down deeper.

Research – Dunnhumby

Dunnhumby is a company that uses clubcard transactions to help Tesco and out more about their customers.
They deal with lots of data and have to present this in a way that can be easily understood.

Benefits

  • Have separated the page into two defined areas. Top data, bottom form, allowing user to clearly move between different sources.
  • Colour coded so user can determine the relation between top data table and bottom form.

Negatives

  • No feedback from forms, showing data.
  • No quick tips explaining to new users how to interpret the data.
  • Above form you have drop down to change data source. As a new user there are too many options, which can be quite overwhelming.

User Journey. Mobile application

Showing user flow of how both a participant and organiser would use the comp shop app.

User Journey. Desktop

Showing user ow of how both a participant and organiser can edit submitted data as well as accessing data in graph form.

Sitemap. Mobile and Website

Wireframe. Mobile


 

Wireframe. Desktop

 

 

Prototype

Tesco Bank

Redesigning Tesco bank to give a consistent look and feel.

The problem:

  • When navigating through the site, the website went into different formats, with the navigation moving around the page from right to left.
  • There is no obviously place to go within the homepage if you want to pay a bill, or showing how much you need to credit your account by before a specific date.
  • Is Debit and Credit the best terminology to use?
  • Nowhere showing what your credit limit is, which could lead to mistakes when comparing it to over banking site.

Existing page review

Competitor Review

Wireframes

Key points of the design:

  • Give a constant responsive website between pages.
  • Allow key information about account to be accessible from homepage.
  • Reduce number of clicks by putting pages within tabbed sections.
  • Allow credit card payments within homepage.