Hopes and Dreams

Hopes and Dreams is a social platform designed to help users collaborate, share and plan their hopes, aspirations, dreams and goals. The site is designed as a collaborative space through which, with a little luck and a little help, those dreams might come true.

UX - Strategy

(back to top)

1) Research

My research ahead of this project has involved looking at existing social platforms and analyzing what makes them work (or otherwise) and interviewing friends, colleagues and family to understand what they do and don't like about them. I am also lucky to be able to draw on 20 years of experience working in online advertising and marketing. On reviewing the information I have been able to gather, I have settled on a number of key points which, through the establishment of developer goals and user stories, will be important in a social platform as intimate as this.

2) Project Goal

Hopes and Dreams intends to be a place to realise positive aspirations. In spite of this, I intend to avoid the sort of language that exists around setting goals. Whilst planning tools can be part of the process (either as part of the MVP or part of the evolution of the project) this platform is about encouraging blue skies thinking. The intention is that a community will develop to support people in pursuit of their dreams, at which point they might even become goals, rather than interaction with the site be a goal-setting exercise in itself. The aspiration is almost as important as the realisation, as such creating and sharing a dream with the community will be intended as a journey of discovery rather than a chore. Dreams are meant to be shared and celebrated almost as much as they are meant to be realised.

The main goal of the project then, is to develop this community and bring people together, through a UI which makes the site a pleasure to use. It's about having people put their dreams and ideas in writing and find like-minded people. On an MVP level this will simply be about matching dreams to users, creating a 'feed of dreams' containing a variety of fascinating hopes and aspirations, hopefully some of which will motivate the user to positively engage - whether this engagement means offering advice, the benefit of experience or even practical assistance. The site will also act as a more conventional social platform, where you can actively search for and follow individuals or their aspirations and receive updates about how things are going for them.

3) Developer Goals

Build portfolio: I want this project to display originality which will make it stand out from the crowd and provide value for users.
Develop technical skills: I would like to make use of JQuery on this occasion to simplify the Javascript, along with more advanced CSS techniques to create a feast for the eyes. The way the database is indexed will be very important and I think I will learn a lot duriung this project, probably the hard way!
Extensibility: Using Mongo DB as a DBMS combined with a modular plan for the design means there is huge scope for future development and monetisation.

4) Site Owner - User Stories

Based on my project research I have identified the following key areas.

Brand Identity: The branding needs to be strong and clear from page one.
Site purpose: The site mission and purpose needs to be clearly stated to encourage sign-up. It needs to inspire people.
Simple sign-up: I want as much site interaction as possible as quickly as possible and users need a simple sign-up process just as soon as they hit the homepage.
Clean UI: I want the UI to be a stripped down and simple as possible so that it functions as well on mobile as it does on desktop, and looks great on both. I want it to look so great people can't wait to click or tap on things.
Clear User Journey: From the minute the user clicks the sign-up button, they need to be hand-held through the process. This is a new concept and signing up is the most important part of that journey. As soon as they have signed up and land in the site for the first time, the question 'what do I do now' needs to be answered.
Organic feed: No edge weighting, all content has an equal chance on the general feed. No compulsary marketing on any feed. Logic for displaying dreams must be clean and effective.

5) Site Visitor - User Stories

This site should be for everyone, from any walk of life. As such the user stories focus on UI, engagement and provision of compelling content.

Reasons to stay: The homepage needs to give users instant motivation to sign up, through brand imagery and a clear concept.
Clean user journey: The user journey needs to be interesting, but not too long, particularly through the sign-up phase.
Quick and intuitive UI: to avoid drop-outs the user should not be hunting for anything.
Customisable look and feel: People like to be able to make their corner of the web their own.
Access to content: Feeds need to reflect what people are following and the things they have interest in, and searches need to deliver relevant results.
Safe Space: Users need to feel their data is safe, that any data they provide is provided for a good reason, and that they have control over comments and content they see.

UX - Scope

(back to top)

It is important to make clear at that the below is the scope envisaged at the beginning of the project, and that there was always anticipated to be an evolutionary process in producing an MVP. For a full overview of specification changes in the finished MVP, please click HERE.

Technology

The technology used will be HTML/CSS and JavaScript/JQuery, using Python with the Flask framework as a templating language and MongoDB to store data.

I have chosen to use MongoDB over PostgreSQL for a number of reasons (in order of importance):

Type of Application: From the reading I've done it seems MongoDB is a great option for unstructured data the likes of which you find on social media platforms, and is being widely adopted by 'big-tech' companies.
Development Cycle: The lack of requirement for a rigid schema will suit the ongoing development of this project, with its potential for expansion and growth (both to MVP level and beyond). I feel like the application could see significant evolution as I develop it and encounter new challenges.
Data storage capacity: ElephantSQL only provides 25MB storage with the base package, which is extremely low headroom for this sort of application, whilst MongoDB Atlas provides 512MB which should be more than enough.
MongoDB Atlas: Atlas is a slick platform with a superb UI and great documentation, making it a pleasure to use.
Personal Development: Because my fourth project will involve using the Django framework with a relational database and being familiar with MySQL from the past, I feel like using MongoDB here will add a very useful string to my bow and further my professional development.
Obselescence: This relates to course material, where the PostgreSQL module is far lower in quality than the MongoDB content. Whilst both contain deprecated code, only minor changes were required to update PyMongo functionality to be compatible with latest package versions and therefore make the code viable for use in a brand-new real-world application. The SQLAlchemy methodology I have been taught caused all sorts of problems and required very specific package versions to function whilst leaving out key concepts such as search functionality and user authentication; it would need a lot of additional learning to fill these gaps in my knowledge which I don't have time for in the context of this course.

Core Elements (MVP)

Structure

Landing Page: features logo, brief site description and sign up / sign in option. All about branding the site.
New User Journey: On clicking Sign Up will begin a user journey.
Base Elements: Once signed in each page will have title/logo and menu with four core elements, plus a search.
Feed (default page): The main site feed is divided into two elements, Dreamscape (default) and Personal
Profile: Consists of an overview of your profile and options to update info divided into 2 sections, account or personal settings.
Dreams: This page will list the user's current Hopes and Dreams.
Dreambuilder: This is a walkthrough process for creating a new dream.
Update Dream Page: Page will consist of a description, and underneath icons representing each aspect of a dream. Where an available module doesn't exist there will be the option to create it.
View dream page: here the user can review your dream as others see it, and view, rate and respond to any offers of help, comments or encouragement that other users have provided.

Features

NB This MVP feature list represents this site as I currently envisage it, and will be subject to change (probably quite a lot of it!)

Detailed step-by-step user journey planner to introduce them to the world of hopes and dreams, which not only gets them signed up to the site but introduces the site concept in small bites. Unfolds in stages over multiple pages with strong brand imagery based around default theme. A bare minimum of the personal profile settings will be set compulsararily here for initial discovery (to avoid an empty feed after signup!).
Multiple feeds - one just to follow and/or assist with dreams and one to follow people and dreams you know or are interested in.
Dreamscape feed is a 'feed of dreams' consisting of dreams from other users that appear based on the user's interests/skills and also personal settings. The user can choose to comment, offer advice or offer a service (based on dream requirements). Alternatively users can just enjoy reading other peoples hopes and dreams.
Personal feed will consist of actions from people or dreams you follow, reactions to your comments, comments on your own dreams or any other modules (beyond the MVP)
Step-by-step Dreambuilder wizard to walk the user through the process of building their dream. Only a name, description and keywords are compulsary fields, the rest can be added later, or not added at all. The intention is dreams should be quite freeform.
Optional modular elements for your dream, the core of which will be the dream diary, dream requirements and a dream planner.
Each dream will be listed with a brief description if any exist, and the option to view the dream, update it, or undream it. If you have no dreams a tutorial message will appear below the Dreambuilder inviting you to share your hopes and dreams.
Opportunities to update skills and interests to ensure the user only sees what they are intererested in. Account and personal settings which allow the user to customize their experience.Account settings will include Name, Profile Pic, e-mail address, Location (optional), notifications/privacy settings (if included). Personal settings inlcude Skills/Experiences/Interests, projects, open to (which may be rolled into the privacy settings).
Users may comment on a dream to offer advice or encouragement, or offer specific help or services. They may also follow a specific dream in their personal feed.
Users may rate comments, and have the option to filter users with very low scores (which indicates spam, trolling or other destructive behaviour).
Search facility to find friends or chase specific dreams.
3 user levels, admin, moderator or user. The single admin (ie me) will be able to create other moderators and both will be able to remove users and content deemded to be in breach of the Terms of Use Policy.
Basic themes - dreams and indeed profiles can be tailored with basic color themes.
Image handling - all user supplied images converted and compressed appropriately to the platform. I will also need to work out somewhere to put them when using a Heroku deployment.

Optional Features

Additional Services module for dreams. Will allow companies to offer their services (eg if your dream is to be a web developer, you might be offered courses). Would allow for targeted, entirely optional monetisation without weakening the platform.
Organisations module for dreams. If added would provide details of organisations that may be able to help via an API.
Extended notification and privacy settings for each feed, in order to make them highly customisable.
The ability to have an advanced range of search options and more advanced requirement gathering, allowing dreams to feature according to multple categories. This is highly unlikely to feature in the MVP; although there may well be multple categories for users/dreams it is likely they will be grouped together when indexing each side of the search for discovery purposes.
Advanced/custom themes: The ability to select from multiple advanced themes when setting up dreams and accounts, including images. The ability to create custom themes. Whilst I view this as a lot more important than just a nice to have given the feedback from some of my research, I'm not sure I'll have time to include it in the MVP for this project as well as providing the basic functionality it needs to be a working real-world application.
Suggest people to follow by connecting with other social apps via API. Could also use to invite new users to the service. Useful growth tool.
Infinite scrolling on feeds.

Hopes and Dreams
Hopes and Dreams mobile app, with full site integration.
Integration with other social APIs to enable users to add friends and share content.

UX - Structure

(back to top)

As with the Scope, it is important to make clear at that the below is the structure envisaged at the beginning of the project, and that there was always anticipated to be an evolutionary process in producing an MVP. For a full overview of specification changes in the finished MVP, please click HERE.

The data structure for the submitted MPV can be found HERE.

Site pages and elements

Header and Site Navigation

The homepage navigation will simply be a sign up/sign in button prominently placed, which leads either to the sign-up user journey or the Dreamscape feed by default on signing in.

Once logged in the main navigation will be in the form of bold icons indicating the function of each page, and a logo will appear either alongside or above the navigation.

Feeds
Profile
Dreams

Furthermore search functionality will also be included on all pages. This will take either the form of a search bar with a radial offering the option to search for people or dreams, or an additional icon which would open a more detailed search page. The choice of concept here will likely evolve along with the site design.

My philosophy is to simplify navigation and avoid the need for additional pop-up/drop-down menus on mobile which impair site feel and are largely un-necessary if navigation is well designed.

Footer

If I view any social site there is no main footer as such, and indeed Facebook does not include one either - this seems to be for two reasons; one is infinite scroll, the other is space being limited on a mobile screen. Any important information (copyright, terms of service) can be located elsewhere; with this in mind I'm not sure what a footer would add so I won't be including one.

Sign-up user journey

This will consist of a series of pages requesting use information to complete the sign-up process. The intention is not only to gather the information required for the site to be functional, but to introduce the user to key site concepts, build anticipation about site content and encourage exploration once signed up.

Feed pages

The feed pages will consist of a scrollable list of items in the feed, along with options to interact at the bottom of each item. This will include like buttons, and the ability to follow, unfollow, expand the comments section or leave a new comment. Where dreams are concerned users will also be able to access full details about the dream and the user who created it from the feed.

The feed will take two forms - one is a personal feed which will show the latest from all the content and people the user is following. the other is the Dreamscape feed where the user can browse the dreams that others have created.

Dreams page

The dreams page will list Dreams and descriptions of them, with latest comments. You can also expand them to view various modules and comments therein, or open them in the Dream Editor page. At the top of the page will also be the Dream Builder button which initiates the user journey for building a dream.

Dream Editor

Large icons will represent the various dream modules if present, otherwise there is an icon to create them. Here you can also enter various modules to edit and update them.

Dream Builder

The Dream Builder icon initiates the user journey to create a dream, walking the user through each stage of the process. Not all modules are compulsary but each dream will require a name, description and some category tags so people can discover it.

Profile Page

The user will be faced with two options - it defaults to personal which allows them to update skills, interests, projects and experience to tailor what they see in their Dreamscape feed. The user can also access Account Settings from this page to update their personal info and privacy/notification settings.

Core Data Structure

Please note that this section represents the initial design phase for the database schema, and as I outlined below it was always going to be subject to change. The data structure for the completed MVP can be found HERE.

Using Mongo DB and a modular approach to building key elements of the site means I have opted for an extremely flat structure, creating new collections where possible to make data easily accessible and speeding up the process of removing data. This data structure has been put together with two major provisos - one is that this is my first MongoDB project and I do not yet know how this structure will evolve in practice. It may well be that I need to merge, nest or separate various collections as the requirements of the platform become clearer.

Users Collection

This will include basic user data, key settings for discovery of dreams and notification/privacy settings.

Dream Collection

This is the collection for base dream data. It includes all the data to be included in feeds and discovery, and is linked to a user by the user's ID. Comments will be enabled on dreams.

Modular Components Data Structure

The below represent modular components of dreams. The key concept among these components is the Diary Module, which will form part of the MVP - the rest may not all be included in the MVP depending on timescales and viability, however it is intended that they should be.

Diary Collection

The diary is a modular component of a dream, and is linked to a dream by the dream's ID. Comments will be enabled for diary entries.

Goals Collection

Goals are a modular component of a dream, and are linked to a dream by the dream ID. Comments will be enabled for goals.

Planner Collection

The Planner collection will be created on the same basis as other dream modules and will have comments enabled. Each plan within the planner will have an associated task, which can include any number of steps.

Requests Collection

The requests module of a dream allows a user to request any number of specific skills or assistance within the skills required section. This can then be associated with users offering their services.

UX - Skeleton

(back to top)

As with the Scope and Structure, it is important to make clear at that the below is the Skeleton envisaged at the beginning of the project, and that there was always anticipated to be an evolutionary process in producing an MVP. This said the guiding principles set out here for the design of the platform have been adhered to throughout, if not the specifics. For a full overview of specification changes in the finished MVP, please click HERE.

Design Choices

Landing page aside, I have kept the menu system consistently placed throughout the site according to the platform on which it is being viewed.
Menu icons will be consistently placed, and where possible will include a description of what the icon does for clarity, in consideration of older or less 'web-savvy' users.
On smaller screen sizes, to avoid clutter, I will move the search facility to a seperate page. This is also an option for the desktop site, and may end up being the most desirable option in order to keep the user experience consistent across platforms.
Search results pages will use the exact layout of the feed pages.
Although the dreams menu icon is still available from the Dream Editor and can be clicked, I have chosen to include a button to return to the Dreamscape feed, for user clarity.
All content is consistently sited in a central scrolling area. Feeds MAY use an infinite scroll depending on time and technical constraints.
When clicking to expand a dream the user will be able to view all modular components.
The dream editor is only available to the owner of a dream. When one of the modular components is selected the user will be able to edit all the components of that section in a seperate page with form input. If the plus sign is selected to add a component it will take the user on a new user journey though the build process.
It is envisaged that the dream-builder button and the sign up button walk the user through a highly intuitive, staged sign-up / build process. This will include walk-throughs explaining the data required and what it does, and with luck some really nice visuals. During the initial build this will be a simple form in both cases; at a push these forms could also serve as a viable MVP.
The profile page is divided into two distinct sections for user clarity - one to update their skills, interests and experiences, which influences the content they are exposed to, and one to update basic profile details and, eventually, more advanced privacy and notification settings.
The site logo and branding will vary in prominence depending on the platform on which the site is viewed, to maximise the space available for content.
The objective throughout the site is the user should be no more than two clicks from the information they require, that the locations of various site features should be obvious, and users aren't overwhelmed by scores of icons which do not have an obvious purpose.
As I would expect there to be a fairly even split between mobile and desktop, the intention is to build the site using CSS Flexbox. The flow of the pages are designed accomodate the responsiveness that has been built into the site from the outset.

Wireframes

Please find the wireframes HERE.

UX - Surface

(back to top)

Color Palate

Color Names

black - background for all pages.\ red - warning, delete and fail messages. Also used as activated/mousover color for buttons which cancel, abandon or unfollow. Used to indicate user has liked something already.\ green - success messages. Also used as activated/mousover color for buttons which submit or follow. Used to indicate user has liked something already. Green background indicates a category is selected.\ orange - user for edit confirmation messages, or non-critical alerts.\ grey - initial background for category buttons.\ white - color for text and borders (except in situations where higher contrast was required).

RGB

rgb(34, 34, 34) - secondary background for Dreamscape.\ rgb(0, 145, 255) - main color theme for dreams icon, all dreams, view dream and dream creation pages. Also used for highlighting icons and form fields.\ rgb(6, 28, 46) - secondary color theme for dreams.\ rgb(255, 221, 71) - main color theme for the Dreamscape feed and icons. Also used for highlighting icons and form fields.\ rgb(59, 49, 0) - secondary color theme for the Dreamscape.\ rgb(248, 72, 69) - main color theme for profile icon and all profile related activities including signup and the profile page. Also used for highlighting icons and form fields.\ rgb(77, 28, 27) - secondary color theme for the profile pages.\ rgb(49, 7, 7) - follow, unfollow, cancel and abandon buttons background color.\ rgb(58, 73, 69) - submit and confirm buttons.\ rgb(139, 247, 139) - mouseover color for like button.\ rgb(250, 144, 144) - mouseover color for unlike button.\ rgb(0, 80, 0) - mouseover color for unlike button.\ rgb(133, 0, 0) - mouseover color for undislike button.

Fonts

All fonts found on fontspace or google. The title font has been chosen because I feel it is evocative or the theme. The main font is chosen to marry with this but also for its clarity and versatility. I originally wanted to use a font called ClearSans by Intel but this was throwing errors in the console so I had to abandon it for the purposes of a graded project.

Titles/some buttons

CfDavesDreamPersonalRegular-WyAGn.ttf

Main font

OpenSans-Regular.ttf

Images

Site Theme

I deided at the start of the project that any assets would have to be simple to product, yet also very striking in design. The plan was to use simple line drawings of cute animals throughout the project. In the end I had very limited time for asset creation so I have used the themes and assets from the landing page and navigation throughout.

User Avatars

The user avatars came about because I wanted to simplify signup (nobody wants to upload an image right away), provide users with a really simple customisation option and because it fits the site theme. I also wanted every user to have an image they could use alongside comments, as such users are randomly allocated an avatar on signup.

The idea stems, interestingly, from a football forum I use where users rarely change their avatars. Users on Hopes and Dreams can have fun randomising their avatar to see what is out there, whilst they are still able to upload their own image to use if they want. As an admin I can continue adding more avatars to add interest and variety.

User Avatars were all created using Bing Image creator.

Navigation

Navigation was always intended to be a site feature rather than simply be functional, with very bold and memorable icons. The choices are intended to be evocative of the destination but also include a text prompt which I know from experience is key with a new site.

Elsewhere on the site I have used clear, recognisable icons for edit and delete processes, as well as viewing dreams. The show/hide comments carat also includes a text prompt.

Where key actions can be performed I have provided outsize buttons in the site theme with the intention that the user should never be hunting for anything. Where users return no results from a search they are prompted to take action to get better results next time, or in the case of the dreams page create a dream. These large, clear buttons throughout are a theme which helps the site be extremely accessible on mobile.

In the feed the user is always routed back to the content they were viewing when they take an action (adding/editing/deleting comments, following/unfollowing users or dreams, like/disliking comments). Everything is designed to be in the flow of the user's interaction.

The objective is a site which should be a pleasure to use.

Alerts

Customised alerts are provided as a user safety net if they take any delete actions, whether that be a comment or a dream. All other user CRUD operations receive a clear confirmation, either via a flash message or (on signup or dream creation) a seperate page. The custom alerts are designed to retain the site theme and avoid users feeling like they are being railroaded - I have kept such pop-ups to a bare minimum.

Responsiveness

The site is very simple in terms of navigation and design, and this is with mobile in mind. Although designed on a 1920px screen width, mobile was at the forefront of my thoughts throughout. Anything below 1920px uses a 'max-size' media query, anything above a 'min-size' From wireframe onwards the CSS flexbox page structure was designed to be easily adjusted to other screen widths.

Most of the difficulties were in scaling textboxes to work effectively on different screen sizes without overflowing the page, and in ensuring that users never have to scroll when entering data. The was ultimately achieved using Javascript.

I worked to specific break points in order to keep the development overhead to a minimum. I've been strict with myself to avoid any custom break-points for specific cases - for such a complex site this could easily get out of hand! The break-points are as follows:

max-width: 359px (for very very small phones)\ max width: 450px (the main break point for converting to smaller mobile format)\ max-width: 650px (the main break point for converting to a mobile format)\ max width: 920px (for large tablets or people viewing in smaller windows)\ max width: 1200px (to accommodate smaller laptop screens)\ max width: 1400px (to accommodate laptop screens)

The MVP

Specification Changes

(back to top)

As Donald Rumsfeld memorably said:

"There are known knowns. These are things we know that we know. There are known unknowns. That is to say, there are things that we know we don't know. But there are also unknown unknowns. There are things we don't know we don't know."

The majority of work required for this project definitely fell into the 'unknown unknowns' category. As such although the MVP is true to the core concepts of the original design there have been significant modifications to the feature list and schema and some elements of the initial design as laid out in the UX Design section.

Developer Goals

"I would like to make use of JQuery on this occasion to simplify the Javascript"\ My own reading and research has led me to believe that JQuery is identical in functionality to Javascript. As such I decided against using it for multiple reasons:

It does not offer anything that Javascript doesn't.
By all accounts it's not really worth investing time in learning it if you alredy know Javascript.
I did not have time to learn it.