No work mates

Project Brief:

To create an online networking and support community for the millions of UK self-employed or home workers.

Our Approach:

 

  • Created a responsive website by interacting with the stakeholders, collecting their business objectives and taking through the mockups when the design options were ready.
  • Established the brand identity – creating the logos and setting up the colour scheme.
  • Performed competitor analysis, created sketches, wireframes, user flows, visual design, writing interaction notes for the developer.
  • Involved in UAT to make sure the final output is as per the supplied visuals and guiding the front-end developers accordingly to fix the issues.

We successfully completed the first iteration of the designs and development, tested with the user group. The feedback was navigation is simple and easy, they understood the main objective of the site, but a few of them felt the design looks dated and it is not responsive.

Based on the feedback, I started thinking about a design solution which works for Desktop, Tablet and Mobile, like hit areas spacing around the design elements etc.,

 

 

Branding 

Created Brand Identity, Font selection, Primary Colors to differentiate the categories.

Competitor Analysis

net4mums.com, Chiswick forums, streetlife, Quora and few other discussion forums to understand how they work

Swimlane diagram:

Showing the flow addressing the functionalities in the Browse, Discussion forum and in the account area of the site.

 

 

Sketches

Before jumping in to wireframes/designs, made some sketches to take the client through my ideas on the layout structure for the mobile version of the site.

Design Decisions 

Below are the few design decisions we took based on the user testing for Homepage banner designs .

Option 1

We initially started to using icons related to that category and the faces of the People on the banners in small circle

Option 2

We realized some human emotion and engagement is missing in the banner so we started showing the pictures in black and white, but the relation of the colors for both categories is missing here

 

Option 3

So we made a 3rd option balancing the human emotion and the category colors.

 

 

 

Phase 1 Vs Phase 2

Listed below are the important pages of the site showing the difference before and after the User testing.

Home Page  

Phase 1

we have only the banner with the copy explaining the objective of the site and the search box. The search box was not really standing out as it was in the gray box. Client’s is really keen not to have a scroll bar on the homepage.

Phase 2

Considering the SEO and want to use the real estate of the Homepage wisely to tell more about the objective of the website and encourage users to register by showing some social proof (Eg: Testimonials) finally we dismissed the idea of not having a scroll bar on the homepage, thus we have added on to the homepage.

  • Changed the Search bar to dark gray, to bring more user attention.
  • Section to show ‘How it works?’ About NWM, Testimonials from the members has been introduced
  • Introduced Blog so there will be a fresh content on the site which helps users to revisit the site and also an advantage for SEO purposes.

Discussion Forum Page 

Phase 1

We took the conventional way of showing the forums.

Phase 2

As the conventional way of forum design doesn’t work for responsive went with boxy types so with this we can maintain the style consistently across all adaptations. Clicking on anywhere on he box will take user to the Post Detail page

Final Output

Style guide / Interaction guide

These set of slides contains the instructions we submitted to the developers, to make sure we are all on the same page.

Let's Get Started!

Request a FREE Digital Marketing Consultation with our Experts

Let's Get Started!

  • This field is for validation purposes and should be left unchanged.
×

Request a Proposal

Fill Out Our Form & We’ll be in Touch Shortly

  • This field is for validation purposes and should be left unchanged.

Our Locations

PH: 1-888-444-0110
Sales: Ext. 102

NYC

112 West 34th Street
18th Floor
New York, NY 10120

Long Island, NY

31 West Main Street
Suite 212
Patchogue, NY 11772

Los Angeles

100 Glendon Avenue
17th Floor
Los Angeles, CA 90024