Web Development Log | Mantra Meditation Brighton

Web DevelopmentProject Log, UX UI, Website

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:

  1. User Research: Personas and Scenarios
  2. Site Requirements: Competitor Analysis
  3. Conceptual Design: Sketches
  4. Visual Design
  5. Prototyping
  6. 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

Image from: pixabay.com

Persona

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.

Scenario

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

Image from: pixabay.com

Persona

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.

Scenario

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

Image from: pixabay.com

Persona

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.

Scenario

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

Image credit: pixabay.com

Persona

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.

Scenario

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.

User Analysis

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-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 Howquestions.

  • 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

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.

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

Conceptual Design: Sketches

sketch
Click to enlarge

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).

Navigation

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.

Visual Design

Font Ideas

logo-font-ideas

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.

Style Tiles

style-tiles

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

visual-design-01

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

visual-design-02

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.

Contact

visual-design-04

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

HOME

About Us

ABOUT

Other pages

4pages

Prototyping

Constructing Prototype with HTML

1. Preparation

Add elements/links to head

  1. important meta tags: charset, viewport, description, keywords and title
  2. link to google fonts
  3. link to jQuery
  4. link to CSS file
  5. link to JavaScript 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.

structure-outline.

Container:

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

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

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.

Section

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

Footer

It consists of copyright and a link to Facebook page.

3. Div tags for styling purpose

op-box

maintains background video

display

gives padding to section contents

video-wrapper

maintain YouTube videos

text-wrapper

maintain text contents

div-tags

4. Div tags for functions

navbar

is used to create a hamburger navigation

goto-top

is used to create a scroll up button

Styling Prototype with CSS

CSS outlines

Reset

Typo

  • Typo General
  • Typo Portrait
  • Typo Landscape

Navigation

  • Nav General
  • Nav Portrait
  • Nav Landscape

Layout

  • Layout General
  • Layout Portrait
  • Layout Landscape

Input area

Video elements

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.

1. Resetting

Resetting some elements to normalize their behaviours.

Idea was inspired by Eric Meyer’s “Reset CSS” and Nicolas Gallagher’s “Normalize.css"

Reset CSS

Normalize.css

2. Setting fonts

Font family

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

Header position is:

  • fixed for mobiles: it stays on top page
  • absolute for PCs: is not stay top page

Sections

Min height is set to 100vh; it will give minimum 100% height and stretches if it needs more space.

Footer

Footer stays the end of the page.

5. Style embedded YouTube video

Ref: Pure CSS solution for embed videos with an aspect ratio of 16:9

Result Screenshots

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

proto1 mobile size
Click to see whole design

Prototype 1 for PC

Proto 1 for PC
Click to see whole design

Title Animation with CSS3

Title animation gif
Title animation gif

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.

Ref: innerHeight()

Ref: innerWidth()

Add Smooth Scrolling Function

Smooth scrolling
Smooth scrolling

Applied smooth scrolling to the page. Code was simply copy and pasted from w3schools’ sample code.

Ref: w3schools

Create pre-next Buttons for Testimonial 

Pre next buttons
Pre next buttons

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

Button appears
Button appears

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: w3schools

Ref: jQuery Scroll Top

Contact Form

Contact form

Contact form is just about working. It seems some emails (often sent from mobile) go into junk mail. No validation process is applied yet.

Ref: php.net

Ref: w3school

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.

Problems

COULDN’T LOAD THE PAGE!

Solutions

  1. Replaced background video to slideshow for mobiles.
  2. 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.

Ref: Simple Auto-Playing Slideshow

Ref: Play iFrame embedded YouTube Video on click

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.

Devices

  • iPhone SE (x2)
  • iPhone 7 (x1)
  • Samsung Galaxy S7 (x1)
  • android (x2) (I for got to keep the phone models)
  • laptop (x2)

Result

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.

Expert Review

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.

header-background
Fixed header nav

Ref: Jquery – fixed background color change in each section

Ref: api.jquery.com

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.

form-validation
Form Validation

Outline colour changes as:

  • focus: light green
  • error: red
  • in active/validation true: purple

Ref: jQuery focusout() Method

Ref: Trim to remove white space

Ref: Super simple email validation with javascript

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.

Original | Click to enlarge
Modified | click to enlarge

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.

testimo-quote
testimo-quote

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 “aa@aa.aa"
  • 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.

W3Schools Validation

html-validation
HTML Validation
CSS Validation
CSS Validation

Posted by Aiko Ohakoda