This is a series of web development logs for a local meditation group. The series consists of:
- User research
- Site requirements
- Conceptual design
- Visual design
- Prototype: Constructing and Styling
- Prototype: Adding Functionality and Animation
- 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.
3 Competitor Analysis
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:
- ABOUT US
- CONTACT US
- NEWSLETTER SIGN-UP
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.
+ responsive layout
+ responsive navigation
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.
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 (TM) is a type of technique to maintain a healthy mind.
Their navigation consists of 7 section of links.
- What is TM
- How to Learn, Fees
- Introductory Talks
- About Us
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.
+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.
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.
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
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
- 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.
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
+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.
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
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.
- 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
- about us section to introducing the club
- smooth scroll
- animated title
- YouTube videos for interview and testimonials
- contact form