GitHub - rosiethesupergeek/Project1J-RBookClub

Jean and Rose BookClub

Jean&Rose is a book club founded on connecting older and younger generations in the UK. By proxy this also lends itself to fighting the loneliness pandemic too! We do this by connecting young and old through a love of reading to stimulate the mind, generate conversations and create understanding and friendship.

When you sign up to Jean&Rose through our webpage we take a few details such as your age and then call you back to ask further questions to find out what your reading level is and your interests. We then pair you with someone of a different generation with whom we think you will connect. One of you picks a book to read, you both read it and speak over the phone once a week (or more or less regularly depending on your preference). Once the first book is finished, then the person who didn't pick the book last time, picks the book this time!

The idea is that different generations will pick different reading material to each other. As different generations can find it hard to find common ground and to understand each other the idea of Jean&Rose is that open minded individuals will learn about each other theough reading the same material. This should generate interesting topics of conversation, friendship and connection. We do ask that individuals be open to reading something that they might not have picked themselves and be willing to listen to other people's perspectives and opinions with grace. We want people to be able to voice their thoughts and opinions but know that they are doing so to an open minded audience and also be willing to hear opinions that may be very different to their own.

Jean& Rose is for open minded individuals who want to connect.

User Experience (UX)

User Stories

I took the following personas in order to help inspire the design process and content creation. These personas helped me to develop empathy for the site users and understand their needs.

Primary Goal

Jean&Rose aims to connect different generations in order to: generate friendship, connection, common ground, relieve loneliness and improve overall wellbeing of it's target audience. The target audience for Jean&Rose is anyone who enjoys reading, would like to connect with someone of a different generation and would like to improve loneliness and wellbeing either for themselves or for their wider community and the UK as a whole.

Visitor Goals

With this in mind, Jean&Rose needed to connect with the older generation as well as young people. Considering that the over 65 age group are not always tech savvy and feel apprehensive when using the internet, the site was designed to use calming colours, have very obvious navigation buttons and a "no-tech" way to access and join the bookclub if needed. The site therefore has large icons and everything can be reached within 3 clicks. The green colour palette and large images are there to evoke feelings of calm. Throughout the site there are reminders amongst the content that explain that anyone who would like to join but struggles with using the online world can call the number at the top of the page in order to access the site via the "no-tech" pathway.

Research on my target audience showed that older people who do use the internet have three main areas of concern: security (especially when concerned with financial details being shared), fear of doing something wrong, and a preference to visit somewhere in person. Jean&Rose aims to put some of these concerns to rest by making navigation very easy, by having a "no-tech" option and by having a page dedicated to Safety&Security advice.

All pages are fully responsive so that the site can be viewed on devices of any size.

First Time Visitor

Users can access all areas of the site within 3 clicks. This will avoid cognitive overload.
On a desktop, users can see all navigation buttons and the phone number. This means they can access everywhere within one click.
On a small screen users can see the "Home" page, "What is J&R" page and "Member's Stories" and "More info" dropdown menu. Once this moves to an extra smaller screen, the Home page icon disappears and the other 3 remain. As J&R is a new idea, I decided it was important to keep the "What is J&R?" as this is something that needs to be explained as soon as possible to the user.
On a desktop users can see content hints before the fold of the page. With a tiny scroll they can see what J&R is and how to sign-up.
The hero image on the homepage has a quote that talks about books and friendship immediately, so the user will immediately have an idea what the site is about.
The icons help the user to understand without thinking exactly what each page is for.

Returning Visitor

Users can login either via the login button that is visible on the header on a desktop page, or via the dropdown menu on a smaller device.
Users can search for a book via the "search library" bar at the top of the header.
If a user would like to get in touch they can do so via the phone number at the top of the page.
Users can connect with J&R on social media via the clickable social links in the footer of the page.

Frequent Visitor

Again, users can login either via the login button that is visible on the header on a desktop page, or via the dropdown menu on a smaller device.
A user can report any concerns via getting in touch with the phone number at the top of the page.

Creation Process

1. Strategy

I aimed to develop a simple and easy to use website that gives the public information on what J&R is, why they should join it, how to join it and how it will help to fight loneliness and promote friendship and understanding between different generations.
The site needed to explain what J&R was and how to join immediately.
Business goals and value for the users and creators are explained below:

Business goals:

Increase awareness of the brand and existence of the product/service: must be SEO friendly in order to be easily found.
Marketing and sales: the process of signing up must be simple, intuitive and easy. Marketing wise the materials on the page must get across the value of joining J&R by showing the benefits for the user themselves and other users. These must include: stimulation of the mind, purpose, easily generated conversation topics, fighting loneliness, new friendships, better understanding of people of different ages and ultimately as a result, a better more connected world and community.
USP: This has not been done by anyone else, so the idea itself is unique. But there are other activities that will fight loneliness and these will be alternatives to people. USPs other than the service itself include: that you don’t need to leave your house, you will see things from another person’s point of view, you will use your brain, you won’t have to hold awkward conversations with people because the conversations will be generated by the books you have read. We will provide a list of questions you can ask about each book and people will be able to submit their lists of questions that they asked about books they shared with their buddy.
Safety: You talk over the phone about the book at a set time each week. You don’t ever have to meet your person, but if you do then we recommend coming to one of our pre-organised events for the first meet. These are held by our voluntary hosts around the country. Once you have met in person if you feel safe then you can meet outside of these events too.
Security: Need to have several logos and ticks that generate trust and reassurance. Also online safety guidance and safety guidance for meeting up.
Audience: young people are tech savvy, but older generation not so. Must be a simple website and must have an option somewhere that says “know someone who would benefit from Jean&Rose who isn’t online?” Need to have a phone number so that people who are not online can get in touch.

Value:

For users:

J&R is a platform to generate friendship, connection and understanding of different ages through reading. It also provides purpose and stimulation of the mind. It is accessible, secure and safe to use. Have a library of titles already included that people can access.

For the creators:

Subscription fee will cover costs, but is a non for profit organisation that was created to fight loneliness and promote a healthier community. This will give the creator the satisfaction of knowing they have contributed to a better world by promoting understanding, friendship and inter-generational connection.

Importance vs Feasibility:

I put together an importance vs feasibility test for the site's first release that took into account my skills as a developer, the time available and the "slow wow" idea behind the service.

Importance vs Feasibility: Feature/opportunity Importance Feasibility Library of titles 3 1 Security info 5 5 Safety info 5 5 Subscription fee 3 2 Loneliness information 5 5 What is J&R 5 5 Clickable phone number 5 5 In person events 2 1 Blog 3 1 Testimonials/Peoples’ stories 5 4 Total 41 34

From this I concluded which features should be included in the first release and which would come later. Please see the Scope section below for further details.

2. Scope

Functional features on first release:

Signing up:

Sign-up button and form. This must be easy to use and access.
It must be clear that you sign up, then hear from a representative of the organisation who call you back and take more details.
Phone number for "no-tech" or "reluctant-tech" audience.
Clean, simple design with calming colour palette that relate to older population but also with a dash of youth.
Responsive design for all screen sizes.

Content requirements for J&R (informational stuff mainly):

Diagram of how it works included on homepage.
The benefits of joining.
What is J&R page.
Combatting Loneliness page.
Member's Stories page.
Safety & security page.
FAQs page.
Sign up form page.
Thank you (for signing up) page.
Content should be image heavy with quotes about friendship, connection and having an open mind.

Features to be included at LATER release:

In person events tab: These will be retro events…1940s themed afternoon tea with conversation starters, inter-generational games etc.
Library of titles (will include the button on first release for the sake of demonstrating my skills for this project)
Subscription fee (will tell people it’s free at the moment but won’t be forever)
Blog (in order to talk about the ways J&R can benefit communities)

3. Structural

The main aim with structure was to be: clear, consistent and easy to navigate. I have achieved this by:
Navigation: linear narrative is used because it is not necessarily made for the tech savvy so needs to be easy to follow. It takes no more than three clicks to get anywhere.
Consistent: colour palette, background will consistently be the same colour, buttons the same colour and will turn to the same different colour when hovering over them.
The site follows a consistent structure too, with the same header and footer appearing on each page. There is also consistency in the use of a large image at the top of each page. Consistency conveys familiarity and trust. It's important to garner this in my users as some of them may view online services with a distinct lack of trust and therefore need to be reassured in as many ways as possible.
A "back to top" button is present on every page in order to save the user scrolling. This site is quite text heavy, so the information is organised into cards, boxes and uses the Bootstrap grid system in order to keep information together and displayed in a logical, easy to follow way. I did consider allowing a maximum amount of text, but considering that this is aimed at an audience who like to read, I anticipate that they will like to read quite a lot about something before joining and did not want to stunt the amount of information they could read on the site.
There is no need for a "back" button anywhere on the site because the navigation bar appears on every page and means the user can easily come back to it and access any other page on the site with one click.

4. Skeleton

The J&R site was developed to be consistent, trustworthy and easy to navigate.

Consistent visual features included on every page were to be: the navigation bar, footer and a large background image.
Navigation bar: users can access everything from this within 2 clicks. This is regardless of the size of the screen. The current page icon and page name remain highlighted in lime green so that the user always knows where they are on the site.
Navigation on a desktop: the main navigation links are all situated- in accompaniment of their respective icons- to the right of the page, on every page. The J&R logo is always situated on the far left of the page. This is because people read from left to right, so this makes visual sense for the user. The "enter book title" is situated underneath the logo but inline with it. the background colour is different in order to create some contrast and make the "enter book title" stand out. The phone number, "login" and "sign-up" buttons are situated underneath the main navigation buttons on the right. They are on the same contrasting background colour as the "enter book title" feature, which makes them easy to find for the user.

Homepage

The homepage has a large image that spans the width of the whole page and is overlaid with a quote. The image is of a cosy library, which looks warm and inviting. The quote talks about how people who connect over books become good friends. This image is just below the header, and just below the image you can see hints about the content below the fold.
Scrolling just below the image reveals the 4 steps needed to sign-up and benefit from J&R Bookclub. This is accompanied on desktop screens with a large circular central image which shows people talking in a library setting, conveying the idea that they are connecting over books.
The page ends with the footer which contains the tagline "For open minded individuals who want to connect". It then has clickable links to 3 social media sites: Instagram, Facebook and Pinterest. These sites were chosen because older audiences use Facebook and Pinterest more than any other social media sites. Younger people use Instagram more, and the use of an image site such as Instagram provides a way for the J&R organisation to further reinforce a positive view of the use of books to connect, stimulate the mind and educate oneself.
Each social link in the footer opens in a new window, removing the need for a back button and helping the user to navigate their browser experience more easily.

What is J&R page

Navigation and footer remain as before in order to be consistent and allow easy page navigation.
Between these are: a hero image overlaid with a quote. Then there are 3 cards which hold information on: where the idea for J&R came from, the aim of the organisation and the outcome. These are each accompanied by an image which relates to their content.
There is then a "back to top" button making navigation of the page easy.

Member's Stories page

Navigation and footer remain as before in order to be consistant and allow easy page navigation.
Between these are: a hero image overlaid with a quote. Then there are 4 cards which hold a testimonial from a happy customer and an accompanying image.
There is then a "back to top" button making navigation of the page easy.

Combatting Loneliness page

Navigation and footer remain as before in order to be consistant and allow easy page navigation.
Between these are: a hero image overlaid with a quote. There then follows are article about loneliness and how bookclubs such as J&R can help. There are 2 images amongst the text to break the article down visually and also to help to convey the messages of the text.
There is then a "back to top" button making navigation of the page easy.

Safety & Security page

Navigation and footer remain as before in order to be consistant and allow easy page navigation.
Between these are: a hero image overlaid with the words "Safety & Security". These words are to the left of the page in order to make them visible against the hero image.
There then follows 3 cards with accompanying relevant information on safety in person, online and over the phone. The cards give a little summary of the type of information to expect and each has a button which when clicked takes the user to the relevant part of the page with more information.
There is then a "back to top" button making navigation of the page easy.

FAQs page

Navigation and footer remain as before in order to be consistant and allow easy page navigation.
Between these are: a hero image that has a post it note that says "Questions" on it. There is therefore no need to display any overlying text because the image explains exactly what the page is about.
There then follows an accordian with common questions. The accordian allows a large amount of text to be present without taking up lots of room on the page. It also makes it easy for the user to navigate and find the answer to their question.
There is then a "back to top" button making navigation of the page easy.

Form page

Navigation and footer remain as before in order to be consistant and allow easy page navigation.
Between these is the sign-up form with a back-ground image of books.

Thank you page

Navigation and footer remain as before in order to be consistant and allow easy page navigation.
Between these is a message that says thank you for joining and to expect a phone call from a J&R representative within a certain number of days.

Wireframes

Wireframe-sitemap

Wireframe - Homepage Desktop & Mobile

Wireframe - What is J&R page Desktop

Wireframe - What is J&R page Mobile

Wireframe - Member's Stories page Desktop

Wireframe - Member's Stories page Mobile

Wireframe - Combatting Loneliness page Desktop

Wireframe - Combatting Loneliness page Mobile

Wireframe - Safety & Security page Desktop

Wireframe - Safety & Security page Mobile

Wireframe - FAQs page Desktop

Wireframe - FAQs page Mobile

Wireframe - Form page Desktop

Wireframe - Form page Mobile

5. Surface

I designed the J&R site so that you can access every page with a maximum of 3 clicks in order to make the site intuitive to use and avoid cognitive overload. I also added "back to top" buttons on pages with lots of text.
I designed the site to have a balance between enough information, but not too much text in one go, using accordians, cards and images in order to break down the information. Considering that my target audience is keen readers I have more text than I would have on a site that was not for such a text keen audience.
Colour palette: I chose a mixture of greens in order to convey calm and quiet. Greens are often associated with peace and nature which is an ideal situation for reading a book. This will also to help users who aren't as confident with using the internet to have as relaxing an experience as possible. The majority of greens used cater to an older audience, but I also use a bright lime green to give the site a flair of youth! Lime green is full of zest and energy.
Images of cosy libraries and young and old people talking together were used throughout the site to demonstrate the pleasant environments and connections that joining J&R could lead to.
Font:
Corners on images used in articles were rounded in order to create a softer and more friendly feel to the site.
A circular image was used in the middle of the steps to join on the homepage as that meant it could fit more easily in the middle of the steps.

The general aim of the design was to evoke calm positive feelings about reading and connecting with others of a different generation.

Design

Color Scheme

the J&R website uses a calming palette of dark green, pastel green, lime green and off-white. These colours make me think of the 1940s and the lime green brings with it a burst of energy which I relate to being youthful.

I went through several stages of discovery before landing on the final colour palette. I started out with this retro palette:

After trying some of these colours out together on my site I found that they were a bit too garish and not very calm and this is when I put together the greens colour palette:

I used the following site to find out about colour contrast industry standards: WCAG.

I tested the icon and large text contrast for my navigation bar and they passed. Although I discovered I could not have used the same colours for small text!:

For text the results passed too:

For buttons:

I used Adobe color checker to check the contrast ratios of my colours:

Adobe Color

Imagery

I have chosen impactful images for my site that reflect the topic of each page. The images also relate the quote overlay when there is one.

Each page has a hero image, which keeps the pages consistent in format but also provides an opportunity to give the user the positive emotional response associated with viewing another lovely image. The images were chosen to reflect connection between generations, relate to any overlaying quotes and also to fit the slightly old fashioned feel of the page. For example, the black and white image on the homepage may relate to a time when only black and white photographs were available, this will be a time that older viewers will remember.

The images were all taken from canva.com where I have a pro subscription and therefore access to a wide range of imagery.

Page Features

Navbar

The nav bar is present on all pages and has large clear icons that are easily clickable. It is fully responsive, some icons go into a dropdown menu at small screen sizes in order to keep the nav bar from taking up too much of the screen. The navigation text is accompanied by large icons in order to aid intuitive use of the website. This site is also aimed at older people as well as young people, as eye sight degeneration is more common in older people, it was important to make the site navigation as clear and obvious as possible in order to avoid cognitive fatigue.

Even on small screens the "What is J&R?" and "Members Stories" stay visible because if it your first visit to the site you might want to have more details about J&R is about.

The ability to navigate between pages without using the "back" button makes for better UX and means that you can navigate to anywhere on the website with a maximum of 3 clicks.

Hero Image

Below are hero images used for each page

The hero image is different for each page to reflect the meaning of the page and to evoke a positive emotional response to beautiful images.

Home Page

Home Page Hero Image:

On the home page there is an eye-catching image of a cosy looking library with a quote overlay. I chose the library picture as this is Heaven for people who like to read, and so should evoke a positive emotional response. I chose the quote over-lay because this site is aimed at people who like to read, so they are likely to have a positive emotional response to powerful wording.

How it works section:

This section explains with the use of text and icons how J&R BookClub works. It outlines in numbered steps that are easy to follow, how to sign up and what happens once you have. This section should encourage the user to sign up because it shows how easy it is to do so and the benefits of doing so. The picture in the centre visualises the friendship and connection that may come from joining.

Back to top button:

This button makes it easy for users to navigate back to the top of the page rather than scrolling. This is a positive user experience feature because it saves people time and makes the site more convenient to navigate, especially as this site has quite a high amount of text.

The Footer:

The footer is very simple and just contains a tagline about the type of person that would enjoy J&R and links to social media for the bookclub. The social media links open in a new tab of their corresponding sites. This encourages users to stay connected with the club via social media, but is purposefully very simple. The target audience for this site is people of different generations who would like to connect. So this means that a large proportion of the audience will be the over 65 age group. This group use the internet and social media less than any other age group so it's important to not have a huge emphasis on social media. The over 65 age group are more likely to be on Facebook and Pinterest than other sites and this is why these social links have been included. The footer is fully responsive and is present on every page in order to show consistency which is reassuring to the user.