Site Requirements | MMB Project Log 2

Web DevelopmentProject Log, Website

3 Competitor Analysis

Bodhi Tree Brighton

Top page screenshot: Bodhi tree Brighton

Bodhi Tree Brighton is a unique group that offers, Dharma practice from ancient traditions to modern creative forms.


Their navigation has 8 sections and one link to SNS:

  • HOME


The website is responsive, multi columns are smoothly transform to be a single column. It has a hamburger navigation for small devices and a horizontal navigation for larger devices. The website provides information about other resources and audio for meditation and learning.

Screenshot: mobile size

+ responsive layout

+ responsive navigation

+ informative


The biggest problem I noticed in the website is, the contents of “newsletter sign-up"; the page is accessible from navigation but its content appears in the end of home, a middle of about us page, middle of the list in resources page and in the end of donate page. It appears inconsistently and is displayed in incompleted form in resources page. Excessive duplication of contents can irritate a user unless it has a style such as side widgets and footer widget that appears selected pages in a consistent manner.

Screenshot: duplicated content

A link to “upcoming events", on the left side of a header image, takes a user to an empty content page.

Text aligns are also inconsistent. Using different alignment can create a great effect is it is carefully done. However, these are rather random and make a user difficult to focus on reading texts.

– an inconsistent content duplication

– unnecessary break between the lists

– a link not working

– inconsistent text align and spacing

Transcendental Meditation®

Screenshot: Transcendental Meditation

Transcendental Meditation (TM) is a type of technique to maintain a healthy mind.


Their navigation consists of 7 section of links.

  • Home
  • What is TM
  • Benefits
  • How to Learn, Fees
  • Introductory Talks
  • About Us
  • FAQ


TM’s website is consistent, has a clear rule that can make a user comfortable to explore. It has a main column and side column for all the pages except F&Q page.

Sidebar displays different contents in different pages with a consistent manner. In “what is" and “about us" page have extra contents, contact details, on top of testimonial. It makes sense, as priority between contact details and testimonials change in  “what is" and “about us" page and other pages.

Main column has mix of (A) full width rows and (B) rows with 1/3 of image and 2/3 of text contents. Since the placement of these rows are consistent, a user can follow changes of layout smoothly. It provides plenty information about TM.

Screenshot; mix of A & B rows
Screenshot; mix of A & B rows

+consistent layout

+has clear rule

+plenty of information


The page is not responsive!!! This is so bad and sad. If access to the page from mobile, a user receive a notice “page is not existed". The website is designed for Brighton, and has a parent page for UK which is responsive.

Screenshot: page not exist
Screenshot: page not exist

Title text is a part of header image, not html tag. It is ok for a pc user, but not good for a mobile user. It is also bad for SEO and gives a developer pain when they maintain the website.

Screenshot: header image with merged text

I worked for some companies to maintain and update their website. They used images for all the headlines which had background with patterns and used very special font which I couldn’t find alternatives. I had to manipulate the background and create the text that looked like similar to original font by Photoshop. They didn’t want replace to HTML tags since it was only a page they wanted to change and it cost them a lot more than their budget if they agreed to replace image to html tags.

– not responsive

– mobile site don’t exist

– title text is not html tag

Zen Brighton

Screenshot: Zen Brighton

The Brighton Soto Zen offers zazen, zen meditation, twice a week.


Zen Brighton has three parent sections and child sections for their navigation.

  • About us
    • About us
    • Contact us
    • Links
  • When & where
  • About the practice
    • About Zazen
    • In the dojo
    • Understanding a posture
    • Understanding Kinhin
    • Hand positions
    • chant & translation


This is the type of design which my client is looking for. A single page website with a minimum, simple and clean design which is accessible from smaller devices.

Their child element of navigation appears on hover for the large devices, which disappears if mouse is left from the hotpoint. This can be a problem for the mobile devices but they provide a trick for it; child element of navigation stays open until a link is pressed for the smaller devices.

Screenshot: child element of navigation for mobiles
Screenshot: child element of navigation for mobiles

Compare to previous two websites, Zen Brighton provides much less contents. However, it seems enough of information since they answer the Five Ws and How questions.

+suitable for the client’s requirements

+responsive navigation

+states the answers for Five Ws and How


There is a confusion for their name of organisation. the website says “Zen Brighton" and they state their organisation as “The Brighton Soto Zen Group". This is acceptable but they also state “An Raku Do" in kanji (Chinese letters for Japanese forms). I assume it is a name for their dojo as “Do" represents a place. But it may not, as they didn’t provide translation, it is possible that they display kanji as a decoration.

Screenshot: An Raku Do
Screenshot: An Raku Do

While they provide good solution for navigation for a mobile user, they are missing options for a quick access to other menu. The navigation is positioned on top of the page, which requires a user to go back to the top of the page. However, they didn’t provide a link to top page.

– unclear use text logo

– lack of a shortcut link to the top page

Site Requirements

I listed site requirements after gone through 3 competitor analysis and discussion with a client. These site requirements are evaluated and agreed by the client. The lists of requirements are grouped by priorities; must have, should have and can have. The lists include part of contents and keywords for elements which required by the client.

Must have

  • fluent responsiveness
  • suitable form of navigation for different devices
  • home, interview, testimonial and contact sections
  • shortcut link to the top
  • images that show beauty of the nature
  • clean and bright impression
  • link to Facebook page
  • contact details
  • no complication

Should have

  • about us section to introducing the club

Can have

  • smooth scroll
  • animated title
  • slideshows
  • YouTube videos for interview and testimonials
  • contact form

Posted by Aiko Ohakoda