Responsive website

Case study

INTRODUCTION

1. DISCOVER

1.1 Understanding the Users

1.2 What is Currently Out There

1.3 Identify the best way to make the website user friendly

2. DEVELOP

3.1 Idea generation

3.2 Testing initial ideas

3.3 Iterative evolution

5. DELIVER

INTRODUCTION

INTRODUCTION     Top 

Hello Khoa Do, how are you? Here on this page you will understand the work we will do with your website. Me and you, we are a small team of two people. A product owner (you) a UX Designer (me). We work remotely. We have an open channel of communication.  Here you can see the first piece of work I did on the first hour.  The objective of my work is to create an interactive prototype of desktop website. 

Image 1 – Mobile version

Image 2 – Example of desktop version

1. DISCOVER

1. DISCOVER     Top 

During this stage I conducted the research. I looked at website common rules and interviewed people.

1.1 Understanding the Users

1.1 Understanding the Users     Top 

Methods: user interviews

During the research I conducted interviews and user tests to gain insight into what people experience when using the website:

Image 2 – Example of desktop version

 

The user doesn’t understand the mission and the possibilities of the website.

There are three important places on the page where we expect to find explicit statements of what the site is about. A) The tagline: it is a phrase that’s visually connected to the site ID, it is a description of the whole site. B) The welcome blurb: a terse description of the site, displayed usually on a prominent block on the top left of the home page. C) The “Learn more”. Innovative products tend to require a fair amount of explanation. People have become accustomed to watching short videos on their computer and mobile devices.

Image 3 – How to make it clearImage 4 – Examples of taglines

Image 5 – Welcome blurb

1.2 What is Currently Out There

1.2 What is Currently Out There     Top 

Whenever we enter a new site, after a quick look around the Home page we should be able to say with confidence:

Here is where to start if I want to search,

Here is where to start if I want to browse,

Here is where to start if I want to sample their best stuff.

Image 6 – Where do I start?

1.3 Identify the best way to make the website user friendly

1.3 Identify the best way to make the website user friendly     Top 

Steve Krug, on the book “Don’t make me think”, says it is useful to imagine that every time the user enters a website he starts out with a reservoir of goodwill. Each problem the user encounters on the site lowers the level of that reservoir.

Image 7 – New user questions

It is important to have an effective home page, it is like the North Star. Being able to click on the home page gives you a fresh start. It is also where we will have the first impression of your website. We expect to go to the home page when we click on the company logo on the top.

The home page should accommodate: site identity and mission, site hierarchy, search, teases, content promos, feature promos, timely content, deals, shortcuts, registration.

The home page has to show the user where to start. It also has to establish credibility and trust.

The home page has to answer the four questions the user has in his head: What is this? What do they have here? What can I do here? Why should I be here – and not somewhere else?

3. DEVELOP

3. DEVELOP     Top 

3.1 Idea generation

3.1 Idea generation     Top 

Methods: design studio

I brainstorm ideas around such topics as how to make the best site design. I test the current website with users and identify usability problems.

3.2 Testing initial ideas

3.2 Testing initial ideas     Top 

Methods: rapid paper prototypes, user testing

Based on the ideas generated during the brainstorm, I created rapid paper prototypes that I test with users. I go through several rounds of iterations to ensure that users could complete the tasks and understand the functionality behind the features.

3.3 Iterative evolution

3.3 Iterative evolution     Top 

Methods: paper prototypes, digital wireframing, user testing, clickable prototyping in InVision

Simple paper prototypes evolve into more detailed and high fidelity wireframes that are tested and adjusted along the way.

4. DELIVER

4. DELIVER     Top 

I will create a clickable prototype of the website and make the files (Sketch, jpt, png) available on Dropbox.