Site Requirements | Web Design Project Documentation


This is a series of web development logs for a local meditation group. The series consists of:

  1. User research
  2. Site requirements
  3. Conceptual design
  4. Visual design
  5. Prototype: Constructing and Styling
  6. Prototype: Adding Functionality and Animation
  7. Test and evaluation

This page is documentation for 2. Site requirements.

Consists of 3 competitor analysis and requirements catalogue to list up all the requirements for this project.

Link: Prototype

 

3 Competitor Analysis

Bodhi Tree Brighton

bodhi-tree-brighton-1

Top page screenshot: Bodhi tree Brighton

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

 

Navigation

Their navigation has 8 sections and one link to SNS:

  • HOME
  • ABOUT US
  • GROUPS
  • RESOURCES
  • AUDIO
  • DONATE
  • CONTACT US
  • NEWSLETTER SIGN-UP

 

Pros

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.

 

bodhi-tree-brighton-2

Screenshot: mobile size

 

+ responsive layout

+ responsive navigation

+ informative

 

Cons

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®

transcendental-meditation-1

Screenshot: Transcendental Meditation

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

 

Navigation

Their navigation consists of 7 section of links.

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

 

Pros

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

 

Cons

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.

 

Navigation

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

 

Pros

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

 

Cons

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

 


About Aiko Ohakoda

I'm a graphic designer and front-end developer. Love kawaii stuff and yummy cakes. Can't live without coffee or soy sauce.