User Research, UX Design, Visual Design

Screen Shot 2016-06-08 at 11.14.26 PM

Our aim for this project was to design website for a young audience. After a review of current websites and getting a quick pulse on our audience, we decided to design an education focused yet fun website to educate children aged between 11 and 13 years on the seven natural wonders of the world.

Tools Used: Visio, UX Pin, WordPress

Team Size: 4

Research & User Interviews

 

We prepared a simple user survey and usability testing study that could guide us while interacting with our audience. We showed the kids the competitor websites and sought their explicit inputs as well as observed their habits. We also asked a few in-depth questions. User Interviews were conducted with kids from 10-13 age group. The interview focused at understanding demographics, attitudes, preferences, habits, traits and interests of these kids.

Persona

 

During the competitive analysis, some limitations of the current websites that popped up most significantly were:

  • The content was neither simple nor comprehensive
  • The navigation was confusing and it required several clicks to reach their desired pages
  • There was considerable clutter on the page further confusing the kids
  • Visual attraction was low and it was not engaging enough
  • The language was neither simple nor engaging

The research and interviews highlighted some features that caught attention were:

  • Bright colors,
  • Simple navigation,
  • Easy-to-read font styles,
  • Simple text,
  • Images and Videos

 

User Modeling

 

Taxonomy

Taxonomy – category Strategy
  • Parent category for pages
  • Parent category for posts

Taxonomy – Tagging Strategy

  • Organic growth of tags- From one to many
  • Planned serendipity

Content Planning

The content was borrowed from authentic websites and books. The main task was to read through the content and reword/paraphrase without losing the facts or intent and make the content kid-friendly. The content needed to be appropriate and related to project goal.
Content_Planning

User Flow

Site Map

The home page and all of the other “static” pages are blue and represented in a tree format, while posts are shown in orange and represented in comb format. There could potentially be many, many more sub-categories added under posts as the site grows.

Site_Map

Wire Frames

In the mobile homepage, the main navigation denoted by a hamburger icon was replaced by thumbnail photos and buttons for each natural wonder. This reduced the number of clicks and immediately showed the user the pages available on the site, while also providing a small descriptive photo.

Color Palette

A palette of bright color, with high-value contrast, made the most sense for something entertaining and engaging. We started with blues and yellows which are bright and sunny but the appeal of images were getting lost. We realized that we needed a ground or field of color to work on, rather than the default white or the blue and yellow, to give a contrast for the bright images. So we chose a dark background and a contrasting bright font color that created a neutral ground color which was slightly cool, but not cold.

Usability Testing

We had four participates for the usability test. They were kids between the age range of 10-15 years. Some of the key findings from the usability test are:

Positive Comments:

(1) All users agreed that by looking and browsing the website they could understand that the website was designed to give information about the seven natural wonders of the world and other related content such as animals, and times to visit et cetera

(2) All users agreed that in their opinion the website was designed for kids or pre-teens. The content was simple and easy to read and understand. Also, the use of labels such as ‘Awesome Pictures’, and ‘Amazing Animals’ helped them form the above mentioned opinion.

(3) All three users found the website very easy and simple to use. They also felt that the use of images made the site fun and exciting to use and explore.

Need Improvement:

(1) Users were also of the opinion that the website’s consistency can be improved. This will give them a better user experience. One user also felt that the website wasn’t very intuitive to use at the first time. As per the user, the website can have better content organization and more intuitive navigation.

(2) One user also felt the need to have a navigation map on the website along with the seven wonders. This would give the users an idea of the actual location of the wonder and how to reach there.

(3) Users also commented that it would be good if there were respective picture galleries for each of the wonders. This would allow them to read and look at the wonders together and get a better understanding.

Functional Usability Testing

Functional testing was performed on the Wonder Quest website to ensure that all links and other functionality worked as expected. As the website is content heavy and has lots of textual content and images, functional testing mainly focused on checking the formatting and layout of the same among other things.

We performed the functional testing of our website on the following platforms –

  • Operation Systems – Windows, Android, iOS
  • Device – Desktop, Laptop, Tablets
  • Browser – Google Chrome, Mozilla Firefox, Internet Explorer 11, Safari

We did in-depth testing of the home page where we tested the following aspects –

(1) Navigation bar links
(2) Search Functionality
(3) Logo
(4) Slider
(5) Sub-sections such as ‘Amazing Animals’ etc.
(6) Widgets

Observations: We found that the website didn’t have much functional defects. The layout was consistent and the links didn’t break too much. However, there were some formatting issues found in the website where the label names were not consistent, label colors and text colors were also not consistent. We plan to resolve all such formatting issues before final delivery of the website and make the website more consistent and easy to use.

Related Projects