Top Banner
UX AND DESIGN MOCKUPS
26

Site Mockups

Feb 09, 2017

Download

Design

Kris Bruynson
Welcome message from author
This document is posted to help you gain knowledge. Please leave a comment to let me know what you think about it! Share it to your friends and learn new things together.
Transcript
Page 1: Site Mockups

UX AND DESIGN MOCKUPS

Page 2: Site Mockups

The Ask1. Visit www.echologics.com.2. Identify user-experience issues on the home page .3. Suggest an improved redesign of the home page to address the issues

you identify.4. Present (strategy and visuals) to us and few other team members.

Page 3: Site Mockups

AGENDA

Current State

Design/UX Trends

Concept

Page 4: Site Mockups

UX ANALYSIS

Current State

Design/UX Trends

Concept

Page 5: Site Mockups

UX ANALYSISSlogan not readableAlthough the slogan is typically not a critical piece of content, it clutters the page when it is not readable.

Not ResponsiveOn average, more than 50% of users now browse from a mobile device. A site that is not responsive, loses all

these consumers.

Additionally, Google punishes site that are not responsive.

Page 6: Site Mockups

UX ANALYSISInconsistent clickable elementsService images are not clickable but images on articles are – not consistent – users shouldn’t relearn how to navigate the site every time they click on something

Whitespace under articles

Lots of white space under the articles titles -

awkward

Inconsistent content

Links go to a page with content that

does not align with the homepage

content.

Page 7: Site Mockups

UX ANALYSIS Multiple ways to emailTwo methods of contact (clickable email and click

through to contact us form) – complicates and clutters the site

Contact below the footer

Footer is above the contact us section – gives the impression that there is something more below

the page

Page 8: Site Mockups

UX ANALYSISCritical1. Cannot read all of the logo2. Not responsive3. Service images are not clickable

but images on articles are – not consistent – users shouldn’t relearn how to navigate the site every time they click on something

4. Footer is above the contact us section – gives the impression that there is something more below the page

Needs Improvement1. Lots of white space under the articles

titles - awkward2. Two methods of contact (clickable

email and click through to contact us form) – clutters the site

Minor3. Not all menu buttons click through to

landing page - inconsistent UX4. Sliders are not often used due to

consumers not clicking on them5. No imagery for the articles. With no

unique imagery, there is no purpose to having it.

Page 9: Site Mockups

UX and DIGITAL TRENDS

Current State

Design/UX Trends

Concept

Page 10: Site Mockups

Motion draws the users eye towards the design and is one of the major

ways we remember and recall information

Page 11: Site Mockups

UX ANALYSIS Motion draws the users eye towards the design and is one of the major

ways we remember and recall

information

Scrolling will play a bigger part in

animating siteS in the future

Page 12: Site Mockups

Google Micromoments is evolving into

microinteractions

Page 13: Site Mockups

Google Micromoments is evolving into

microinteractions

Brillo: A platform that links objects from thermostats to washing machines to each other and to the web

Weave: A Set of developer tools that allows smartphones, the cloud and devices powered by Brillo to talk to one another.

Page 14: Site Mockups

Concepts

Current State

Design/UX Trends

Concept

Page 15: Site Mockups

The Concept

Water does not stop at the end of the pipe

Page 16: Site Mockups

The Site

Page 17: Site Mockups

CONCEPT

Page 18: Site Mockups

CONCEPT

Page 19: Site Mockups

CONCEPT

Page 20: Site Mockups

CONCEPT

Page 21: Site Mockups

CONCEPT

Page 22: Site Mockups

CONCEPT

Page 23: Site Mockups

CONCEPT

Page 24: Site Mockups

CONCEPT

Page 25: Site Mockups

CONCEPT

Page 26: Site Mockups

THANK YOU