Site Mockups
-
Upload
kris-bruynson -
Category
Design
-
view
217 -
download
0
Transcript of Site Mockups
![Page 1: Site Mockups](https://reader036.fdocuments.net/reader036/viewer/2022062503/589bd0c11a28ab92618b5a41/html5/thumbnails/1.jpg)
UX AND DESIGN MOCKUPS
![Page 2: Site Mockups](https://reader036.fdocuments.net/reader036/viewer/2022062503/589bd0c11a28ab92618b5a41/html5/thumbnails/2.jpg)
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](https://reader036.fdocuments.net/reader036/viewer/2022062503/589bd0c11a28ab92618b5a41/html5/thumbnails/3.jpg)
AGENDA
Current State
Design/UX Trends
Concept
![Page 4: Site Mockups](https://reader036.fdocuments.net/reader036/viewer/2022062503/589bd0c11a28ab92618b5a41/html5/thumbnails/4.jpg)
UX ANALYSIS
Current State
Design/UX Trends
Concept
![Page 5: Site Mockups](https://reader036.fdocuments.net/reader036/viewer/2022062503/589bd0c11a28ab92618b5a41/html5/thumbnails/5.jpg)
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](https://reader036.fdocuments.net/reader036/viewer/2022062503/589bd0c11a28ab92618b5a41/html5/thumbnails/6.jpg)
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](https://reader036.fdocuments.net/reader036/viewer/2022062503/589bd0c11a28ab92618b5a41/html5/thumbnails/7.jpg)
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](https://reader036.fdocuments.net/reader036/viewer/2022062503/589bd0c11a28ab92618b5a41/html5/thumbnails/8.jpg)
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](https://reader036.fdocuments.net/reader036/viewer/2022062503/589bd0c11a28ab92618b5a41/html5/thumbnails/9.jpg)
UX and DIGITAL TRENDS
Current State
Design/UX Trends
Concept
![Page 10: Site Mockups](https://reader036.fdocuments.net/reader036/viewer/2022062503/589bd0c11a28ab92618b5a41/html5/thumbnails/10.jpg)
Motion draws the users eye towards the design and is one of the major
ways we remember and recall information
![Page 11: Site Mockups](https://reader036.fdocuments.net/reader036/viewer/2022062503/589bd0c11a28ab92618b5a41/html5/thumbnails/11.jpg)
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](https://reader036.fdocuments.net/reader036/viewer/2022062503/589bd0c11a28ab92618b5a41/html5/thumbnails/12.jpg)
Google Micromoments is evolving into
microinteractions
![Page 13: Site Mockups](https://reader036.fdocuments.net/reader036/viewer/2022062503/589bd0c11a28ab92618b5a41/html5/thumbnails/13.jpg)
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](https://reader036.fdocuments.net/reader036/viewer/2022062503/589bd0c11a28ab92618b5a41/html5/thumbnails/14.jpg)
Concepts
Current State
Design/UX Trends
Concept
![Page 15: Site Mockups](https://reader036.fdocuments.net/reader036/viewer/2022062503/589bd0c11a28ab92618b5a41/html5/thumbnails/15.jpg)
The Concept
Water does not stop at the end of the pipe
![Page 16: Site Mockups](https://reader036.fdocuments.net/reader036/viewer/2022062503/589bd0c11a28ab92618b5a41/html5/thumbnails/16.jpg)
The Site
![Page 17: Site Mockups](https://reader036.fdocuments.net/reader036/viewer/2022062503/589bd0c11a28ab92618b5a41/html5/thumbnails/17.jpg)
CONCEPT
![Page 18: Site Mockups](https://reader036.fdocuments.net/reader036/viewer/2022062503/589bd0c11a28ab92618b5a41/html5/thumbnails/18.jpg)
CONCEPT
![Page 19: Site Mockups](https://reader036.fdocuments.net/reader036/viewer/2022062503/589bd0c11a28ab92618b5a41/html5/thumbnails/19.jpg)
CONCEPT
![Page 20: Site Mockups](https://reader036.fdocuments.net/reader036/viewer/2022062503/589bd0c11a28ab92618b5a41/html5/thumbnails/20.jpg)
CONCEPT
![Page 21: Site Mockups](https://reader036.fdocuments.net/reader036/viewer/2022062503/589bd0c11a28ab92618b5a41/html5/thumbnails/21.jpg)
CONCEPT
![Page 22: Site Mockups](https://reader036.fdocuments.net/reader036/viewer/2022062503/589bd0c11a28ab92618b5a41/html5/thumbnails/22.jpg)
CONCEPT
![Page 23: Site Mockups](https://reader036.fdocuments.net/reader036/viewer/2022062503/589bd0c11a28ab92618b5a41/html5/thumbnails/23.jpg)
CONCEPT
![Page 24: Site Mockups](https://reader036.fdocuments.net/reader036/viewer/2022062503/589bd0c11a28ab92618b5a41/html5/thumbnails/24.jpg)
CONCEPT
![Page 25: Site Mockups](https://reader036.fdocuments.net/reader036/viewer/2022062503/589bd0c11a28ab92618b5a41/html5/thumbnails/25.jpg)
CONCEPT
![Page 26: Site Mockups](https://reader036.fdocuments.net/reader036/viewer/2022062503/589bd0c11a28ab92618b5a41/html5/thumbnails/26.jpg)
THANK YOU