Beacon | Mental Health Success Stories Website | Adam Reed

Tags: 2016, 2017, Adam Reed, Beacon, Brighton, Brighton University, CI301, Computing Project, Digital Media, Mental Health, Mental Illness

Beacon is an online resource for finding and sharing positive experiences relating to overcoming mental health struggles. 

About Me

Name: Adam Reed

Course: Digital Media BA

Project: Web Design and Development for a Mental Health Discussion Website



Project Focus

- Marketing
- Web design & development planning
- Database management
- UX
- Front and back end development (HTML, CSS, jQuery, PHP, mySQLi)
- Digital Design



Beacon Home Page



Beacon is prototype for an online resource that collects mental health success stories. These stories are created and uploaded by the users of the website - they are not curated or sourced by the administration. Stories are sorted into categories (the most common mental illnesses and mental health conditions) and are searchable by keywords. If a user is looking for some inspiration from someone who has overcome anxiety troubles, they can filter the available stories by the anxiety category, or, if they are looking more specifically to hear about someone's anxieties with public speaking, they could use the search tool to find all stories with the phrase “public speaking”. Using these methods, users can find the stories that most closely relate to what they are interested in, whether they are looking for a broad category or something more specific to their experience. The stories can be sorted either by time (the most recent upload being the first result) or by popularity which is calculated using a voting system similar to Facebook “likes”.


Users can register for a Beacon account. You must be logged in to your account inorder to submit, comment on, or like a story. You receive a notification if another user comments on one of your stories. Another significant feature is the ability to post anonymously. This option hides your username so others cannot see who has written the story.

Mobile Friendly

The majority of web browsing is now done on mobiles, so making sure that a website functions well on mobiles is a priority. Beacon has a fully responsive design, meaning that the same web page is accessed on all devices, but the elements on the page have adaptable positions and sizes.


Mobile Design


Development Process

The website prototype was built without using a development tool or content management system like WordPress. The source code is almost entirely original and was written from scratch by myself using HTML5, CSS3, JavaScript/jQuery, PHP and MySQLi.  The exception to the this is my use of tinymce (a plug-in text editor so that users could do basic formatting on their posts).


I first developed the main features of the website, resulting in a very basic working prototype, that did not resemble my design mock-ups and was not intuitive to first time users, but all of the necessary functions worked, such as posting, searching and filtering stories, logging in and out, moderating and more. The website uses a CMS (content management system) in order to display, upload, change and delete the stories.

I created database tables that stored the information necessary for the site to work, including one each for storing the stories (their content, the user who posted it, the number of comments it has, the date and time it was submitted, the category of the story etc.), the users (their usernames, passwords, email addresses etc.), comments (their content, the story it was posted on, the user who wrote it etc.), “likes” and notifications. When a user submits a story, that stories information is inserted into the story database table, which is then retrieved by other users when they visit the website. A similar process is used for the majority of the website's features.


The next stage of development was to display the information in an intuitive and user friendly way. Once the functionality of the site way completed, I could then focus on making the layout match that of my design mock-ups. The layout of the Stories page, which displays previews of all the stories, is simplistic, and should feel familiar to users as it resembles a common layout used for forums and discussion websites, including Reddit. This is because I wanted it to be as intuitive as possible, and this kind of layout is standard because of its ease of use. I positioned the categories on the side of the page so that it is clearly visible. I wanted to make sure that any first-time users are aware that they can filter by category, and can easily find the one the best fits the kind of content they are looking for. For each story preview on the Stories page, I made sure certain pieces of information about each story was visible, including the story title, the user who posted it, the number of likes it has received, the number of comments, and the first 500 characters.

On the Write page, where users can submit their own story when logged in, I decided to make the layout of the submission form resemble the way the story would look to other users as much as possible. This means that that the option to select category, the title input, and text input, are all in the same position they will appear when it is submitted.


The final stage of development was to implement the aesthetic of the website, which was informed by my research into the target users. Some of the attributes I identified as being key for a look and feel of a website suitable for mental health discussion include:

Welcoming and casual - The design should feel friendly and welcoming to new users. This is why I chose the light blue and pinkish red colours for the main colour scheme as they evoked a casual and pleasant feeling without being too bright and contrasted. Also, I chose a thick, rounded font which gives the text a more friendly and light tone.

Clean and simple - It was important that the site was not too cluttered or too overwhelming for users. Because of this, I chose to go with a “flat” design (solid colour backgrounds). For the same reason, I did not include any images. In addition, I wanted the website to feel inclusive, and so non-specific to a particular mental health condition or perception of mental health. This meant not including photos or imagery pertaining to a mental health condition like depression or anxiety.


Moderation fig.1


Moderation fig.2



The moderation area was created to address user concerns about the way in which other users might engage with the website and each other. My survey results indicated that there was concern about poor advice or malicious comments not being policed in any way. Moderation is a commonly used solution to this problem. It involves certain users, not necessarily administrators of the website/company, being given the ability to disapprove of posts if they are found to not adhere to the policy/rules/ethics of the website/community. My moderation area can only be accessed by users who have been given the status of “moderator”. 

The Moderation Area displays all new stories that are yet to be assessed and approved. They are displayed with the oldest at the top, so that the oldest posts are assessed first, which prevents them from going too long without being either approved or disapproved. The stories are displayed in their entirety, and are followed by a short form in which the moderator selects to either approve or disapprove the story.

After the approve buttons is a text entry form. Currently, when the form is submitted the notes are stored in the database as an explanation for the approval or disapproval. One way in which this could be further developed is to have the notes sent to the user who posted the story to inform them why their story has been removed.