Login   Register  
PHP Classes
elePHPant
Icontem

5 Steps to Build Perfect Web Sites using the Design Thinking Process - PHP Classes blog

Recommend this page to a friend!
Stumble It! Stumble It! Bookmark in del.icio.us Bookmark in del.icio.us
  Blog PHP Classes blog   RSS 1.0 feed RSS 2.0 feed   Blog 5 Steps to Build Perf...   Post a comment Post a comment   See comments See comments (20)   Trackbacks (0)  
<< Previous: 7 Reasons Why TDD Fai...>> Next: To TDD or Not TDD? - ...

Author: Manuel Lemos

Posted on:

Categories: PHP Tutorials, New site features, Web site design

The PHP Classes site is launching a new design for the package pages. The Design Thinking process was applied to determine exactly what needed to be added or improved to make it perfectly address the users needs.

Read this article or watch the demonstration video to learn how the Design Thinking process was used to create this new design and upcoming features that will address other users needs that no other site is satisfying.




Contents

A New Design Celebrating 15 Years of PHP Classes

10 New Great Features of the Package Pages

1. Tab Based User Interface

2. Logical Grouping of Information

3. Most Important Information First

4. View a Usage Example Right Away

5. Live Demos of a Package in Action

6. A Screenshot Picture is Worth a Thousand Words of Code

7. Fast Package File Browsing without Leaving the Same Page

8. Dowloading a Package at  Distance of One Click

9. Learn More About The Package Reputation

10. User Centered Design Approach

5 Steps to Build Perfect Web Sites Using the Design Thinking Process

What is the Design Thinking Process?

You Think You Know How to Solve Users' Problems but You Can't Do It Alone

The Lean Methodology Is not the Correct Way to Start

The Apple Case

Now the Steps

1. Empathy and Immersion

2. Define the Problems You want To Solve

3. Come Up with Ideas to Solve User Problems

4. Create Prototypes of Products to Solve the Users' Problems

5. Test the Products with your Users

Conclusion


A New Design Celebrating 15 Years of PHP Classes

The PHP Classes site just completed 15 years since it was created in 1999. Last year I announced that this year there would be a redesign of the package pages to provide faster navigation.

I will write a separate article about the present and the future of the site soon. For now let me focus on this redesign.

The redesign that is now finally being announced is much more than just a way to make the navigation faster. I have applied the Design Thinking process and the result was that many features were implemented to address other needs of the users.

10 New Great Features of the Package Pages

Below I explain better how the design thinking process was applied. First let me tell you more about the new features of the package pages that were implemented after carefully listening to a group of users that volunteered to provide feedback.

You may want to watch the demonstration video as well read the summary of the new features below.

1. Tab Based User Interface

One of the main things that several users complained about the old design is that you would need to scroll a lot to find information that used to appear below in the pages.

With a tab based layout, the users can simply click on a tab and make the information they want appear at the top immediately.

This addresses an old pain of users that hate to have to scroll the pages a lot. For users with tablets or other touch based devices, the pain was even worse because after a while you get irritated with rubbing your fingers so much on the screen.

2. Logical Grouping of Information

Previously the information about a package was scattered without much logic. That was the result of many years adding information related with new site features without a good sense of organization.

Now, related information in grouped in tabs. Each tab contains only information that makes sense to be together. That helps the user to anticipate what information will be found on each tab way before the tab is opened.

3. Most Important Information First

Some types of information are more important than others. The users told me that most important information is what helps them to decide if a package is worth trying or not. Therefore that information is on the first tab, the information tab.

The users told me that they wanted to know first what the package does, when it was last updated to see if the author has been maintaining it recently, view the package ratings and the download popularity to see if other users that have tried it liked the package.

The information page also contains buttons to rate the package because the rating information will be used to let others know if a package is good enough or not.

4. View a Usage Example Right Away

Some users told me that one of the first things they wanted to do after they figure a package seems to do what they need, is to see an example of usage of the package code.

They want to know if the package is simple to use or not. Some users also want to know if the coding style of the author is good enough to understand what the code does, just in case they need to fix any issues without depending on the author.

Therefore, now there is a new section called Usage that shows a file of the package that is usually the best example script or documentation file.

The Usage section will not appear for all packages. It depends on the author to pick the right example or documentation to show there.

Authors need to edit the package settings to pick a file. Then it will be subject of approval by the moderator, so the usage file will always be the best to present to the user.

Now the site also supports rendering files in the Markdown format by request of some authors. It is recommended that authors specify usage files in the Markdown format because they can be more readable than plain text code.

Right now, not all constructs of the Markdown format are supported, but they will be soon. If you want to know what Markdown syntax is supported, follow the releases of this Markdown parser package.

5. Live Demos of a Package in Action

Some users expressed great interest to see the package in action immediately, so they would not have to download and install the package to see if it is interesting enough for them.

Some users even suggested to have some kind of interpreter to run the PHP code of the packages. That would not be such a great idea because you never know what the code does that could compromise the site server security.

It is safer to show pages of other sites that demonstrate the package running. However, the users do not really want to leave the site.

Therefore, the implemented solution is to show demo pages inside the package page as iframes. This way the users do not need to leave the package page, and it is a safe solution to see the package code in action.

The only requirement is that the demo pages design integrate well with the site design. Therefore, authors can submit demo pages for their packages but the users will only see it after the moderator approves them. In general, the main requirement is that demo pages have a white background color.

6. A Screenshot Picture is Worth a Thousand Words of Code

When the author did not make any demo pages available, seeing screenshots of the package output may also be useful.

When the author provides screenshot images, they appear in a dedicated tab. That tab may also show YouTube or Vimeo tutorial videos, as well slide presentations from Slideshare.

Screenshots, videos and slide presentations are always shown inside the screenshots tab, thus without requiring that the user leaves the package page.

7. Fast Package File Browsing without Leaving the Same Page

Previously, each file of a package was on a separated page. This was very frustrating for the users because they needed to go back and forth to other pages to see the file contents, thus losing the context of the package page.

The View files tab lets the users actually browse the contents of the package files. All package files are loaded dynamically using AJAX to avoid leaving the package page.

Notice that every time the site shows a different file, the page URL changes. You can use the respective file URL to share it with other users. When they open that URL in their browsers, the page opens showing the specified file right away.

8. Dowloading a Package at  Distance of One Click

Users that decided that they want to download a package can now do it immediately with just one click. There is a dedicated tab for downloading a package, but if a user wants to download it in the ZIP format, there is a direct download link right in the tab label.

When necessary, the download tab also shows a list of other packages that the current package may need to work properly.

Experienced users that prefer to install packages using the Composer tool can also do it by clicking a button that says Install with Composer.

Since last year the PHP Classes site can act as a Composer repository. This means you can install any package in the site, as well its dependencies, using the Composer tool.

The site shows you a sample configuration file with directives for you to insert in your project composer.json file.

9. Learn More About The Package Reputation

Some users expressed interest in knowing how other users have appreciated or not a package to decide if it is really worth trying. Now the Reputation tab shows in a single place all package details that relate with the package reputation.

It shows the number of packages that are reusing the current package, if any, the number of unique users that downloaded the package so far, and even the number of users that found the package searching for it in Google.

If the package was already rated by other users, the reputation tab also shows detailed ratings information on the several aspects that the users may rate a package, like utility, consistency, documentation, examples, tests and tutorials.

In case there were any public comments from users that rated a package, the list of comments is also shown there next to the ratings.

Packages nominated for the PHP Programming Innovation Award will also be noted in the Reputation tab along with the nomination comment made by the moderator.

Any additional information related with the package that is on separate pages or is in other sites, is listed in the links section, or has direct links to the package blog or the forum to ask for support about the current package on the PHP Classes site.

10. User Centered Design Approach

In this redesign I tried to follow as much as possible the User Centered Design approach. This means that everything on pages should be self explanatory, so the users will not be required to have prior training to discover how to use the new features. For instance, most buttons and links have tooltip information about their function.

However, for features that may not be very evident, the package pages use animated visual effects to hint the users on how to use it more efficiently.

For instance, if you click on the ratings link, the page uses animation effects to highlight the buttons you can use to go straight to where the information you want to see is located in the reputation tab.

The same goes for the Reuses link in the reputation tab. Clicking on it, highlights the Links tab and the section that lists other packages that reuse this package.

5 Steps to Build Perfect Web Sites Using the Design Thinking Process

What is the Design Thinking Process?

Before I explain how you can apply the Design Thinking Process to build your own Web sites, it is important to define it.

Design Thinking is a process based on the collaboration between the users and a product designers to determine how to solve problems that the users have.

It can be used to create new products or services, but it may as well be applied to products and services that already exist but need to be improved to address better the users' needs.

You Think You Know How to Solve Users' Problems but You Can't Do It Alone

One common mistake of traditional product designers is that think they are very smart and can figure all the solutions for the users' problems. The reality proves that often that is not the case.

If you try to guess just by yourself solutions for the users problems, chances are that you will waste time and money building solutions that are inadequate for the users needs.

You need to involve the users right from the start. Your first solution ideas are wrong and your users are the ones that can tell you that.

The Lean Methodology Is not the Correct Way to Start

The lean methodology is often used by startup companies as a means to build successful products as fast as possible with the least amount of time and money.

It is said that you should come up with a product idea, validate your product ideas with some potential users and then move on to a Build, Measure and Learn cycle.

That sounds fine but it often fails because your product ideas are often inadequate, even though you had users validating their interest for your product ideas.

The design thinking process starts from the users problems, instead of your guesses of what could be good product ideas.

Therefore the cycle should not be Build, Measure and Learn, but rather Learn from the users, Define which problems to solve, come up with many possible solution designs, and only then you start building prototypes and test the products you designed.

The Apple Case

Apple is often a company that is referred as reference of good design practices. Over time they have been practicing more and more the design thinking process, but it was not like that in the past.

When Steve Jobs returned to Apple, they decided that they were willing to make the Mac computers the center of the digital hub, i.e. as a means to control other digital devices like CD players, DVD players, etc..

That is a typical situation that demonstrates that you are pushing a solution that may not be exactly what the users need.

Later when the first flash memory music players came out, they realized that they needed to come up with their own portable music player. So they created the iPod with a 5GB hard-drive. They thought the users wanted to carry thousands of songs to listen all the time.

Only after two years they come with a solution for the real problem of the users. The users did not want to listen to a thousand songs. They just wanted to listen to 1 or 2 from each album they purchased. Often each album had 12 songs, but they only care about 1 or 2.

So the greatest solution Apple provided was the iTunes store. It allowed users to legally buy just the specific songs the users liked, not whole albums as the industry was pushing. If Apple had listened to the users with more attention, they could have gained years ahead of the competitors.

Fortunately for Apple, then the competitors also did not have a great clue about how to apply the design thinking process properly. But that was like 10 years ago.

Nowadays Apple's competitors are not clueless at all. Some of them know very well about the design thinking process. Apple is still a very innovative company but it is no longer dominant in many sectors as it used to be in the past.

Now the Steps

1. Empathy and Immersion

The first step of the design thinking process is to understand what the problems the users need that are worth investing on solutions.

Usually you have a initial idea of what are of user problems you want to dedicate to. Usually it is an area of your knowledge. That will help you to gain some time. Investing on a area that you do not quite understand may at best delay you severely.

Once you have decided on which areas you want to invest, you need go through a immersion process. You need to talk with the potential users to learn about the problems that they have.

You need to study what products exist to address the users needs, how well they address those needs or not, as well what other problems the users and maybe nobody is solving at all.

When you are building a new Web site or improving a existing site, you should interview the users to ask them how they are using the existing sites for similar purposes, what sites work well for them, what problems are not well solved with the existing sites, and what problems are not solved at all by any site.

These are just questions to be developed by the users. I mean let the users talk as much as possible. You need to be empathetic with the users' problems. Do not criticize their complaints nor suggest existing solutions for their needs. That could inhibit the users to continue to providing you useful information. 

Once they say all they think they wanted to say, ask them if they have anything else to add. They always have more to say. Often when you leave them talking after you did not expect anything more from them, it is when they remember about the greatest problems that you could solve for them.

Usually they have no clue about good solutions for problems that nobody solved. That is up to you figure. You can ask them for possible solutions, but do not expect much from them.

Always record the interviews you make with all users. If not in video, at least record the audio, so you can listen to it again later to pay closer attention to the details.

For the PHP Classes Design Thinking process, initially I listened to 5 users separately in a total of 3 hours of interview.

2. Define the Problems You want To Solve

After you have listened carefully to what the users said, you need to come up with a list of problems that the users have.

Put it in a document. Sort the problems according to their importance based on the number of existing solutions for those problems that you know.

For the PHP Classes site I come up with a document with 52 ideas to address issues of many parts of the site. The initial focus was just to address issues of the package pages. Only 12 of the problems I annotated were related with the package pages.

The insights that those 5 users gave me were amazing. The plans for the next areas to focus are very exciting because I will be addressing important needs that no other site is solving at all.

3. Come Up with Ideas to Solve User Problems

Once you have decided what users problems you want to solve, you need to come up with ideas to solve those problems.

In the same document you annotated the users' problems, add a new column to propose ideas to solve those problems. Don't worry if your initial ideas are not very promising. They will get better with the next steps.

Ideally you should brainstorm about those ideas with a team of people from different areas, if you have a team behind you of course. I did not have a team with me for this task but I had users that provided me the necessary feedback to make the ideas better.

4. Create Prototypes of Products to Solve the Users' Problems

Now that you have figured some ideas of solutions for the users' problems, it is time build something to show to the users.

You should not start building real products right away. That would be very expensive because your initial ideas will not survive the first impact with the users.

Instead you should come up with non-functional prototypes. If you are building a physical product, you can create a prototype in paper, or even one using a 3D printer if you have access to one.

For Web sites you can just pick one of those visual page editors and create a non-functional site just for showing some pages to the users. I have used Sencha Architect to create non-functional prototypes of what I planed to build for the new package pages.

5. Test the Products with your Users

Once you have a product prototype ready, now it is time to show it to the users. Let them play with it for a while. Initially the prototype will not be functional, so tell the users to pretend that it is something that is working.

At this point the idea is to realize if the users understand how the product would work if it was real. If the users do not get it, try to understand why. Ask the users what they got to realize what you are missing.

Record everything as in the initial interview because you will need to listen to it later to understand the users' reactions. Repeat the same questions.

For the PHP Classes design, some users did not quite understand some messages. I needed to change the wording.

You may need to create new prototypes and repeat the test process. I built two iterations of prototypes of the package pages. Fortunately the first prototype was quite good, but the second one really nailed it. Well that is what the users told me. Whether it is really true or not, it is up to you to let me know now.

Conclusion

As you may have realized by now, the Design Thinking process is really something that everybody creating new products or improving existing ones should work now.

There is really not much more to say about it, except that you should practice a lot so you can get really good at creating Web sites or other types of products.

As for the PHP Classes site redesign, I am really curious to know what are your reactions. If you liked the redesign, great. If you didn't like it, please post a comment to this article, or send a message to info at phpclasses.org to tell me what you liked or not.

About the plans for the future site features that I realized after applying the design thinking process, I will post an article about it next week.

If you would like to apply this process to your projects but you still have questions, please post a comment as well or send me a private message to the address above in case you do not want to ask in public.


You need to be a registered user or login to post a comment

1,282,072 PHP developers registered to the PHP Classes site.
Be One of Us!

Login Immediately with your account on:

Facebook ConnectGmail or other Google Account
Hotmail or Microsoft Windows LiveStackOverflow
GitHubYahoo


Comments:

6. Missed it - Pentasis (2014-07-12 09:42)
Rethink the concept of "problem"... - 3 replies
Read the whole comment and replies

5. i cant rate without download - Josť Filipe Lopes Santos (2014-07-02 23:35)
i cant rate without download... - 5 replies
Read the whole comment and replies

3. Design Inconsistency in Tabs - Mike Ruiz (2014-06-29 10:15)
use .tab-content {border-radius: 0 !important;} to fix... - 2 replies
Read the whole comment and replies

4. two and five - Yakim (2014-06-29 09:56)
almost, but not quite... - 2 replies
Read the whole comment and replies

2. Visual design - Nikola Radovanovic (2014-06-26 02:23)
I'd like to see better visual design... - 1 reply
Read the whole comment and replies

1. Knowledge - dinesh namdev (2014-06-26 02:14)
Sharing... - 1 reply
Read the whole comment and replies


<< Previous: 7 Reasons Why TDD Fai...>> Next: To TDD or Not TDD? - ...

  Blog PHP Classes blog   RSS 1.0 feed RSS 2.0 feed   Blog 5 Steps to Build Perf...   Post a comment Post a comment   See comments See comments (20)   Trackbacks (0)