Man Environmental website review

1 MAN. Website Design ReviewWebsite Design Review

2 MAN. Website Design Review

Table of Contents03First Stage.Preliminary research

04Second Stage.UX, contents, maps

05Third Stage.Wireframing, responsive and UI

06Fourth Stage.Typography and Design

07Design.Home

08Design.MAN Services

09Design.MAN Case Studies

10FinalThoughts


First StagePreliminary research

BUT, WHO ARE THEY?

When you receive the petition to create and build a new website, to me the initial approach to the project is pretty similar to any graphic design process. You initially have a blank page that you have to fill out with your ideas, creativity and improvement.

The first thing to do is to know all about your client, about the company, about that market, about the products and about the competitors. You need to know:

• who they are• what they do• how they do what they do• what they want to do in the near future as a company

You have to ask to your client to brief you about all of these subjects and also you have to do your own research in sources like internet, libraries, newspapers, etc...

It’s pretty important to have all this knowledge before starting the project itself. Your target at this point is put yourself in your clients’ shoes.

At the end of this stage, you will know all about what your client wants for their website, the contents and you have to start drawing in your head the visual style of your project.


Second StageUX, contents, maps

MAKE THINGS CLEAR

At this stage you have to start working with your development team, trying to figure out which content is really relevant to be on the website and which one isn’t important. You have to create your map of the site based in the final content and based in your strong main principles ofUX Design.

Digestibility. Regarding Man Environmental website, is an example of a B2B site with a lot of text to read, a lot of information. In terms of a good UX design, Good design is easy to digest, the brain shouldn’t have to expend a ton of energy to figure out what it’s looking at. In my opinion, you got to explain to your client that is pretty important to lose some text, in terms to be more direct, concise and precise.

Clarity. Good design is honest. Being coy or unclear about your product isn’t going to win any fans. Make things as clear as you can.

Trust. Good design is easy to trust. Before asking someone to complete an action, make every effort to help them understand why the taskis needed.

Familiarity. Ground-breaking design is awesome, but design that converts is better. Using familiar patterns, icons, and presentational styles is a great way to look native, even if you’re not.

Delight. The more simplicity you can bring to a complex problem, the more delighted the user will be with your solution.

Always take the user’s side.

Visuals are not really important in this phase but I know that little by little we are creating it in our team brain.


Third StageWireframing, responsive and UI

NEARLY THERE

If you complete your 1st stage, you probably will have some good visual examples to help you as an inspiration in your project. As I previously mentioned, it’s pretty important to see what the others are doing, follow tendencies in UX and UI and to make your website very friendly.

It’s wireframing time! I usually start on paper, sketching some examples of how could look the home page of the site and some of the key pages. After that, I go through Photoshop, Illustrator or InDesign to build the final wireframes. The base of your design. I can do it in other tools like Axure but I feel more confortable starting with a 12 columns responsive template in Illustrator, Photoshop or InDesign.

At this stage, the communication with the developers starts to be crucial. This communication has to be fluid, honest and it has to be done very often. The developers will tell you if they are confortable with your responsive initial template and you, as a Designer, has to explain everything about your ideas, visuals, interactions on the website, animations, etc... from here to the end of this process.


Fourth StageTypography and Design

IS TYPOGRAPHY IMPORTANT? YES INDEED

After discussing with your team the final wireframes, once you have that stage completed, now it’s time to put your visuals and creative ideas over the clean wireframes.

It’s time to choose your typograpy, too. For a good design and for good knowledge of your ideas from the developer side, to me it’s important to use two fonts top and not too many sizes. I usually work with Google Fonts but there’s a lot of good fonts in the market.

For MAN project, I’ve choosen these two fonts from Google:

Oswald for titles and subtitles. Because it is a strong character and very similar to the MAN branding font.

Lato for general paragraph text and for the CTA’s areas. Because this font works pretty good in a different range of sizes, it’s nice and friendly to read and it has a complete range of family, with light, regular, bold and black, which gives you more flexibility and options.

DESIGN

In terms of visuals and designs, following the main UI tendencies for apps and websites, I went throught clarity and big pictures in the key areas.To me and I think, for the visual design nowadays, less is more. It’s one of the main targets in the digital creative process today.

On the next pages I’ll give you a deep explanation of why I‘ve choosen my visuals and graphic solutions over the Home page, the Services pages and the Case Studies page.


DesignHome

LESS IS MORE

After all the previous stages, I have finally the design of the home page for this review of the MAN environmental site.

I tried to build and create a more minimalistic version of the website, following the modern tendencies in UX and UI design, where the information has to be just the necessary with direct messages and with very direct call to actions.

I’ve slightly changed the hierarchy of the main sections of the website. Regarding the last version of the site, the most important change is on Accreditations area, because I think that area must have a very important place on the home, Accreditations are very very important and makes a strong and trustworthy idea of the company. So the final order or the sections of the home is:

Header/Slide with the main menuServicesAccreditationsCase StudiesLatests StoriesContactFooter

For this site I’ve choosen, a header/slide with a video on the background, with an opacity area of pale blue colour above the video to help visualise the rest of the important elements on this area: main menu, logo, intro company text and CTA to the Services of the company.

This pale blue color with an opacity of 64% will be used in the entire website to highlight some CTA above the images and it will be the main tone colour of the site.

In the file that I sent you, in the sections with pictures on it, like Services, Case Studies or Latest Stories, the blue area with text above some images, is highligthing the CTA areas and you can see how these areas are changing when you put the mouse cursor above them.

I am happy with the final visuals. It’s responsive and it’s easy to see how good it will work in the different device sizes, in two columns in tablet and in one column in smartphones. It’s also visually trendy, according to the latest graphic tendencies and it conforms to the UX and UI principles.


DesignMAN Services

EVERYTHING IS IN THE RIGHT PLACE

The basics of UX and UI design are in the fundaments of the design of some of the key pages. Looking again after the clarity of the site, I’ve designed these key pages, in just one place, like a card as you can see as an example, on these Services pages.

Come back to the home page, when you click over one of the Service’s pictures on the home page, it will start a transition process with some animation. The whole site will be covered by a blur effect and from one of the sides, a card with all the information of the clicked service appears. In this case, We Consult.

On the card you will find a menu on the top, to browse for the rest of the services and in the top right, a familiar icon to close this card and to come back to the home page, exactly where we were, in the Services section.

Below the top area, there will be a picture relating to the section and after that, the rest of the information.

Like I said, according to the basics UX principles, in my opinion there’s a lot of text on these sections and it’s necessary to cut some copy or if we can’t do that, at least to present some of this copy in a more visual or attractive way, exactly like I did in Our Capabilties section on this page.

I know that this is a B2B website but we must have on mind that nowadays the content on the sites is designed for a minimal effort from the user. To be honest, nobody will read the whole text of this site.


DesignMAN Case Studies

AND AGAIN, EVERYTHING IS IN THE RIGHT PLACE

The Case Studies page, is based again in the same principles than the previous Service’s section. All the Case Studies will be showed in the same area/card, with a navigation system in the top picture of the page: you can click on the right or on the left of the picture to change to other of the Case Studie.

Again, all the principles of UX and UI trying to make here the site more friendly and confortable for the user. The comments about the amount of text in Services pages are valid also here, and must to be showed in a more visual and attractive way.

And again, if you click to close the card over the familiar close icon at the top right of the card, you’ll come back to the Home page, over the Case Studies area.


Finalthoughts

DIGESTIBILITY, CLARITY AND FRIENDLYNESS

These are the three fundamental points in which my redesign of MAN environmental site is based. These three are UX basics and nowadays, all the B2B and B2C designs, all responsive designs, all app designs, must be based in at least these three fundamental.

I ‘ve created the home page with all the main contents there because the user today doesn’t want to browse a lot, they want all the information in a few clicks. That is why I’ve created the card system for the other Key pages.

I believe the final design is efective, given the time constraints to make a deep initial research in the company and make a deeper UX analysys.

OPPORTUNITY BUSINESS, YOUTUBE

I’ve detected also a good opportunity for MAN environmental. The company don’t have Youtube Channel or at least it wasn’t detect it. So I think it would be very good for the company to have an Official Youtube Channel, explaining in videos how they work, all the company process, how they remove asbestos, etc.... that’s why I added the Youtube social icon, together with Facebook and Twitter, on the home page.

This would also be a good way to offer the client our video services and to make a more solid bond with them.

MAN. Website Design ReviewWebsite Design Review

Man Environmental website review

Documents

Transcript of Man Environmental website review