Web Development Log | Mantra Meditation Brighton
Mantra Meditation Brighton is a local meditation group in Brighton Hollingdean area. I developed their website and filmed the group’s meeting. This post is a web development log that shows:
- User Research: Personas and Scenarios
- Site Requirements: Competitor Analysis
- Conceptual Design: Sketches
- Visual Design
- Testing and Evaluation
(*** the group changed their name and currently website is not available 15/Nov/2019)
User Research: Personas and Scenarios
I produced 4 personas to try to understand a user’s needs, motivation and behaviour. Persona’s age is ranged from mid 20 to early 40. All of them are in workforce. 2 males and 2 females.
Oliver (24) | Junior UI designer
Oliver works for a fast paced environment, a digital solution company. He is outwardly expressive but looking to gain more self-confidence. He wants to gain more social confidence within himself and is aware that the external self can only offer so much and is interested to investigate what lies belief.
He has been looking online for classes which enable him to focus on himself rather than entertaining others. He found a website of a local meditation group and decided to attend a trial as it is very close to his place.
Evie (27) | Admin
Evie is amiable and wants to add something to already active lifestyle. She is regular gym and social out goer and constantly works on her external self which she feels gives her control over her life. She is aware that this is a bit exhausting but has no idea why.
Evie was asked her colleague Charlotte to go to a trial session for mantra meditation as her plus one. She was encouraged to have a look for the group’s website. She looked through it briefly and reply to Charlotte that she’s going.
Charlotte (37) | HR
Charlotte works at human resource section in the council, always busy to deal with other workers requirements and sort it out. While she works for stressful environment, she wants to know more about the inner self. She is interested in mindfulness, mantra based meditation and mysticism.
She has tried many different types of yoga and meditation and has heard of local meditation group and done a bit of google research and wants to know more about it. She asked to go for a trial session for her colleague Evie, who seemed to be seeking the ways to know more about inner self.
George (43) | owner of a small retail store
George is divorced recently and is struggling to keep his current job as the economy changes. He wants to improve his inner self since his outer self is a mess and one which he appears to have no control over and is attempting to control his inner demons.
George went to a pub for a drink after his hard day at work. He saw a poster about a local meditation club in the lobby advertising a meeting. The poster was clean and welcoming which attracted him as it might give him chance to sort out his problems. He quickly search the group’s website and contact them via website’s contact form.
These persona give ideas of a user’s needs, motivation and behaviour that affect UI design. For example:
Oliver knows about digital design, which makes him critical to the design. If the website has bad UI, it can be very destructive to him. While a bad design doesn’t matter too much for other personas, it is bad enough for him to lose interest.
Evie likes going out and happy to find something interesting. Therefore, she doesn’t mind too much about UI design or information. For her, overall impression can be more important factor to make her a decision. She might not read all the contents but quickly picks up keywords which draw her attention.
For Charlotte, information about the club is very important since she is interested in meditation. She is a person who look through all the pages and contents to decide if it worth for her to go.
George is desperately seeking some sort of mental support. He saw the group’s poster, which draw him to come to the website. He’s motivation can be very high, he might look through the website carefully, or briefly, or go straight to the contact form.
Site Requirements: 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.
- 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.
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 Howquestions.
- 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.
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
List of 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.
- 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
Conceptual Design: Sketches
I can draw but can’t write. Text written on sketches might not be readable. My client understood it because I explained it while sketching this on my laptop.
This sketch was produced over the meeting with the client, when we discuss about site requirements. I used PowerPoint to sketch our discussion to summarise it. This is the last sketch (as it was made to summarise discussion) that shows basic ideas of layout and some functionality which the client can expect to have for their website.
Sections and layout
There are 5 sections that are; home, about, class, teacher and testimonial. Contact section and footer were excluded due to lack of the space.
Home has a navigation and header title and video background which footage were taken for film making project for Time Based Media. Other pages have a h2 headline, YouTube video, h3 headline and paragraphs.
There is a wiggling object on the right top corner of some sections, which is a lotus flower (this idea was scrapped later).
The page is a single column layout, therefore, it will not change by size of devices. Navigation changes its form as; horizontal bar for large and landscape screen, tab for smaller portrait screen.
Shortcut link to the top
The shortcut link appears as a user scrolls down the page. It is only available when a horizontal navigation is available.
Gruppo and Poiret One are both decorative fonts which looks good for logos and headlines.
Open Sans and Lato are both modern sans-serif fonts which work well for any occasions. Last year, my favourite font for the main texts was Open Sans, but this year’s favourite is Lato. I use it a lot and suggest to use it a lot too.
Niconne is a handwriting type font which gives slightly playful impression.
After a quick chat with the client, we selected fonts; Poiret One for headlines and Lato for the rest.
Colours were also selected according to the client’s preferences.
Mock-up Designs for Mobiles
Top Page and Navigation
Top page has a hamburger menu, H1 title and a video for the background.
Navigation links will slide down when a user presses a menu. I am planning to make a whole row to be hotspot for the menu to make it easier to press.
About Us and Class Section
About us has white background with a slight transparency to see the video. This is to create the connection to the top page and about us which has relations to each others (greeting and introduction).
On the other hand, class, the next section, has light green background. Class section is about displaying what they do and when the club is available to attend. For above reason, I selected light green that wakes up a user’s mind to quickly grab their attention.
Teacher and Testimonial
Class to teacher, teacher to testimonial and testimonial to contact, the background colours keep changing since they are different sections and subjects.
Mock-up Designs for PCs
The layout for PCs is almost identical to mobile version; they are both single column since they do not have much contents.
Difference between mobile version and PC version are; PC version has a horizontal navigation and a link to the top.
Top Page and Navigation
Constructing Prototype with HTML
Add elements/links to head
- important meta tags: charset, viewport, description, keywords and title
- link to google fonts
- link to jQuery
- link to CSS file
2. Construct bone structure inside body tag.
First of all, I constructed bone structure inside body tag, as according to sketches and visual designs.
Div container is placed immediately after body tag, which holds header, main and footer tags. This tag is simply used to hold all the tags and to maintain their position.
Header tag often holds a website name, a logo, links to SNS and a site navigation. In this project, header hosts only a navigation and a tab bar.
Main holds 6 sections, home, about, class, testimo and contact. Main tag is used to clear the site structure and is not used to maintain style with CSS. Therefore, the website works perfectly without having main tag.
Each section tag hold h1/h2/h3 headings, video and/or text contents depend on the section.
- home: h1 site title and background video
- about and class: h2 heading, YouTube video and text contents
- teacher and testimo: h2 heading, YouTube video, h3 heading to state a name of a person in the video and text contents
- contact: contact form
It consists of copyright and a link to Facebook page.
3. Div tags for styling purpose
maintains background video
gives padding to section contents
maintain YouTube videos
maintain text contents
4. Div tags for functions
is used to create a hamburger navigation
is used to create a scroll up button
Styling Prototype with CSS
- Typo General
- Typo Portrait
- Typo Landscape
- Nav General
- Nav Portrait
- Nav Landscape
- Layout General
- Layout Portrait
- Layout Landscape
0. General, Portrait and Landscape
General settings hold shareable settings for any occasions, for example;
- h1: colour white
- h2: uppercase
Above settings will not affected by devices, screen size or view port. These setting are shareable, so they can be set in general setting.
- h1: position
Above setting will be different between portrait and landscape; therefore, they are set in media query.
Resetting some elements to normalize their behaviours.
Idea was inspired by Eric Meyer’s “Reset CSS” and Nicolas Gallagher’s “Normalize.css"
2. Setting fonts
Setting font family according to mock-up designs, which were agreed by the client.
- Poiret One: headings and submit button
- Lato Bold: Strong
- Lato Italic: emphasis
- Lato Regular: the rest
3. Viewport Height and Viewport Width
I used viewport height (vh) and viewport width (vw) for many cases such as font size, layout, paddings. This is not always the case, but I use vh when I decide margin top/bottom, but vw is it is left/right.
4. Layout and positions
Header position is:
- fixed for mobiles: it stays on top page
- absolute for PCs: is not stay top page
Min height is set to 100vh; it will give minimum 100% height and stretches if it needs more space.
Footer stays the end of the page.
5. Style embedded YouTube video
Screenshot for current state of prototype. Some videos are missing since they weren’t ready. Footer section isn’t styled (I forgotten).
Prototype 1 for Mobile
Prototype 1 for PC
Title Animation with CSS3
I applied fade in and slide down to in animation to h1 title. Animation-fill-mode is set to forwards to keep state of element the same as when animation ends.
Ref: CSS Animations
Apply jQuery to Navigation Bar
Enabling open and close navigation tab. Condition (height > width) is set In order to make it work only for portrait. It only works when height is larger than width.
Add Smooth Scrolling Function
Applied smooth scrolling to the page. Code was simply copy and pasted from w3schools’ sample code.
Create pre-next Buttons for Testimonial
jQuery on click event is applied to previous(<) and next(>) buttons for testimonials by using jQuery. This function is to create a slider for testimonials.
Fade in Go to Top Button
Go to top button appears when a user scroll down. Once it appears, will stay its position. This function is only available to PC.
Ref: jQuery Scroll Top
Contact form is just about working. It seems some emails (often sent from mobile) go into junk mail. No validation process is applied yet.
Testing and Evaluation
Testing on my phone
Before the meeting with a client and members of the meditation group, I tested the prototype on my phone, which is Windows phone Nokia Lumia 520. My phone couldn’t load the page since it was too heavy.
The prototype holds a background video and 4-5 YouTube videos which required so much memory.
Background video was replaced with slideshow and YouTube videos were replaced with cover images which trigger on click event to load the video.
COULDN’T LOAD THE PAGE!
- Replaced background video to slideshow for mobiles.
- Replaced YouTube videos to cover images and applied functions: if a user presses a cover image, on click event will be triggered and loads YouTube video.
Testing with Users
Prototype was tested by 6 members of the meditation group, 2 males and 4 females. Age ranges are not clear as I didn’t ask but I assume it is over 30 to mid 50. One of them have some knowledge about HTML/CSS as he maintains his business online. Other members are moderate users of mobile devices such as smartphones, tablets and laptops.
- iPhone SE (x2)
- iPhone 7 (x1)
- Samsung Galaxy S7 (x1)
- android (x2) (I for got to keep the phone models)
- laptop (x2)
It worked on all devices.
Small devices with landscape load a background video which might be better to replace with slideshow with appropriate image size (currently image size is portrait friendly).
Overall impression was good and members were very happy with selected fonts and colours. They enjoyed smooth scrolling effect and impressed by background video on laptop.
Prototype was review by a teacher and co-students at presentation. I received some crucial feedback from the teacher.
1. Horizontal Navigation
I was suggested to have a fixed navigation to make it easier for a user to access to other pages.
This is fixed. I also added text “Mantra Meditation Brighton" to the navigation, which has been replaced to “MMB" as the former seemed too long and over dominating.
2. Contact form Validation
Suggestions were given to validate contact form, and I selected to use “focus" method. It validates input value when a user moves away from input field.
Outlines colour change to notify a user if there are errors before submit. Submit button is disabled until all the input fields are completed and validated.
Outline colour changes as:
- focus: light green
- error: red
- in active/validation true: purple
3. Spacing for Header Title
Originally the title had margin on left side, which creates uneven spacing to the other side and looked uncomfortable. I wanted to create larger space on the left side (not by using text-align), but I couldn’t get the effect I wanted, so it became simpler.
4. Adding Quote to Testimonials
Testimonial holds a video and a name of interviewer. I was suggested to add a quote.
It is good idea to have some text that related to the video for better usability.
Ref: CSS content Property
Things need to be Developed
Better Design and Usability for Small Landscape
Some elements are not very user-friendly for a small landscape.
- goto top button is too big
- YouTube videos are too big
- background video might be better as slideshow
Contact Form validation
Validation applied to the form is very simple and have some problems which require further development.
- name can be “a"
- email can be “email@example.com"
- message can be “a"
- need to outfocus all input fields to enable submit button
Prepare for Testing with Users
Previous user testing was run without setting tasks, which seemed not effective to collect data. I should have set tasks and questions.