Website Redesign for Interface Design Course

75 %
25 %
Information about Website Redesign for Interface Design Course
Design

Published on March 22, 2009

Author: brianpagan

Source: slideshare.net

Description

This was a university assignment for Social User Interface Design. Our task was to find a health website and improve the user experience for teens.

This does not mean that there is anything wrong with the website we chose, but we had to pick an existing one to do a theoretical redesign.

This project was carried out for the User-System Interaction program at the Eindhoven University of Technology by Loes Ruijs, Nata Gredina, Frank van Gils, Quan Cheng, and Brian Pagán
http://usi.id.tue.nl

Online Health for Teens Online Health for Teens Loes, Nata, Frank, Quan, Brian User System Interaction :: June 8, 2009

Outline Introduction Guidelines Prototype Evaluation Discussion

Introduction

Guidelines

Prototype

Evaluation

Discussion

Introduction Social - Biological - Psychological -

Aim Redesign a health website for teenagers so that it satisfies their usability requirements

Redesign a health website for teenagers so that it satisfies their usability requirements

Method - original website -

Usability Guidelines How to Design for Teens

Usability Guidelines Loranger & Nielsen

Loranger & Nielsen

Usability Guidelines Loranger, Nielsen Visual design Interaction design Multimedia

Loranger, Nielsen

Visual design

Interaction design

Multimedia

Usability Guidelines Loranger, Nielsen Visual design Interaction design Multimedia Navigation Writing for the web

Loranger, Nielsen

Visual design

Interaction design

Multimedia

Navigation

Writing for the web

Prototype Applying Design Guidelines

Main Goals Visual Aesthetics

Visual

Aesthetics

Main Goals Visual Aesthetics Clarity & Consistency

Visual

Aesthetics

Main Goals Visual Aesthetics Clarity & Consistency Interactivity & User Engagement

Visual

Aesthetics

The Prototype Original Prototype

Original

Visual Aesthetics We reused: Color palette

We reused:

Color palette

Visual Aesthetics We reused: Color palette Page division 1 3 2 1 3 2

We reused:

Color palette

Page division

Visual Aesthetics We reused: Color palette Page division Page layout

We reused:

Color palette

Page division

Page layout

Clarity & Consistency Original: Multiple access points

Original:

Multiple access points

Clarity & Consistency Original: Multiple access points However, Here, only conditions

Original:

Multiple access points

However,

Here, only conditions

Clarity & Consistency Original: Multiple access points However, Here, only conditions There, no teenager section

Original:

Multiple access points

However,

Here, only conditions

There, no teenager section

Clarity & Consistency Prototype: General health info and illnesses

Prototype:

General health info and illnesses

Clarity & Consistency Prototype: General health info and illnesses Teen-relevant menu items

Prototype:

General health info and illnesses

Teen-relevant menu items

Clarity & Consistency Prototype: General health info and illnesses Teen-relevant menu items Clear breadcrumb navigation

Prototype:

General health info and illnesses

Teen-relevant menu items

Clear breadcrumb navigation

Interactivity & User Engagement We reused: Social networking

We reused:

Social networking

Interactivity & User Engagement We reused: Social networking Update services

We reused:

Social networking

Update services

Interactivity & User Engagement We added: Video

We added:

Video

Interactivity & User Engagement We added: Video Mini-quizzes

We added:

Video

Mini-quizzes

Interactivity & User Engagement We added: Video Mini-quizzes Symptom checker

We added:

Video

Mini-quizzes

Symptom checker

Interactivity & User Engagement Next: Hit or miss?

Next:

Hit or miss?

User Evaluation Testing the Prototype

Online 8 subjects 2 groups Evaluation Introduction Tasks Questionnaire

Online

8 subjects

2 groups

Introduction

Tasks

Questionnaire

Questionnaire

Results 1 1 Comprehensible 1,5 0,25 Visual 1 0,75 Navigation 0,75 0,25 Pleasure 7,75 7,25 Overall

Discussion What Does It All Mean?

Why are the results such as they are? The evaluation was not very relevant - group too small The geographical situation of the users did not allow to make deeper research on how they use the sites So we were able to make only very basic quantitative estimations

The evaluation was not very relevant - group too small

The geographical situation of the users did not allow to make deeper research on how they use the sites

So we were able to make only very basic quantitative estimations

Conclusions The main result: very positive, since in no component the new site is evaluated worth than the old one Moreover: almost in all components an increase, and sometimes a strong increase In their informal estimations the users also gave positive feedback for redesigned prototype

The main result: very positive, since in no component the new site is evaluated worth than the old one

Moreover: almost in all components an increase, and sometimes a strong increase

In their informal estimations the users also gave positive feedback for redesigned prototype

What next? Testing on more users Testing deeper: to see, how the users really use the site To make prototype even more comprehensible

Testing on more users

Testing deeper: to see, how the users really use the site

To make prototype even more comprehensible

Questions? Questions? User System Interaction :: June 8, 2009

Add a comment

Related presentations

Related pages

portfolio | MOOC Interface Redesign

MOOC Interface Redesign. ... website design, prototyping, information ... Although the design of the course interface is closely linked to ...
Read more

Website Redesign | LinkedIn

View 45089 Website Redesign ... and interface design to create a website that ... is the foundation for creating beautiful websites. In this course, ...
Read more

PGA Website Redesign on Behance

During a college course, we worked with PGA to solve user interface and design problems on their current website. This was my final redesign pres…
Read more

UI,UX Design Services for Web and Mobile - UIRedesign

UIRedesign specializes in user interface design and usability for web ... or a complete redesign of your existing website. ... iPhone app design, ...
Read more

User Interface and Website Redesign | Ryan Tipton

User Interface and Website Redesign ... User Interface, Web Design, ... One component of that new website will be a Course Progress Tracker.
Read more

Website Redesign - anitacrawley.net

Website Redesign. Montgomery College redesigned the college website. ... It was also a final project for an Interface Design course so has information ...
Read more

Investec Website Redesign | Clients and Case Studies | Box UK

User Experience activities guide global brand redesign, ... the ordinary’ experience across Investec ... designs for sitemaps, user interfaces ...
Read more

Website Redesign for University — Medium

Website Redesign for University. ... For the redesign of ESD’s website, ... (main/supporting/ interface), links ...
Read more

Designing Effective User Interfaces - WPI

Effective Visual Communication for Graphical User Interfaces. by Suzanne Martin The use of typography, symbols, ... Graphic Design for User Interfaces.
Read more