Memeorable

UI/UX, Web Development

Memeorable is a social media platform for users to view memes, and for creators to upload templates and share their creations with others. The project was created for the ‘Introduction to Software Engineering’ course at the University of Toronto. The course provided us an opportunity to create a full-stack project from scratch while managing its development progress using the agile/SCRUM methodology taught in the course.

Role

UX Designer
Lead Frontend Developer

Team Members

Jonathan Ho
Lukasz Dworakowski
Daniel Salazar
Yuchi (Agnes) Lin
Lance Santiago
Brendan Doyle
Ahmed Quarmout

Resources Used

HTML/CSS
Bootstrap
MongoDB
AngularJS
NodeJS/Express.JS

Timeline

4 months
(January 2019 – April 2019)

Key Features

  • Personalized feed displaying posts created by users you follow

  • Discovery which users can explore content, organized by templates, posted on the platform

  • Custom Editor for users to upload and use templates to create their memes with editable text functionality

  • Search functionality to find users, templates and posts

  • Share posts feature to share creations on third-party sites

Overall Design

The platform was designed to simulate a feed-driven site, similar to many popular social media platforms such as Facebook and Instagram, using the content created/uploaded to our site. The design focused on having an accessible and user-friendly interface for users, while ensuring content is delivered and viewed easily and effectively on the platform.

As a team, we decided that our platform required 4 main screens/functionalities: A home page personalized feed, A “discover” posts page, a profile page and an upload/editing page. From there, we looked at various designs of these screens on existing social media sites such as Instagram and Pinterest to draft a design that could be ideal to presenting the content uploaded and created on our platform. Once we drafted some possible user interface designs for our platform, we looked into the user experience of the site, whether or not it is simple and intuitive to all users on all devices.

Development Tools

The site is built using HTML5, CSS3 and Bootstrap 4 to provide a responsive framework, and NodeJS and MongoDB to provide a seamless integration with our API calls and database storage.

Frontend Development Tools

  • HTML5

  • CSS3

  • Bootstrap CSS – Provides a responsive site experience
  • AngularJS – Provide a seamless visual site experience

Backend Development Tools

  • MongoDB – Database program to store site data and content

  • NodeJS and Express.js – Server framework to process APIs

Process

The project was managed using the Agile Scrum methodology consisting of 5 two-week sprints. With a large project team, the team was organized into smaller sub-teams with some members floating between the different sub-teams. One sub-team focused on the front end design while the others sub-teams worked on the core functionalities and features in the back end. All team members were involved in testing the features and ensure the feature meets the project’s expectations.

Process Highlights

  • User stories, tasks and sprint progress were tracked using Pivotal Tracker, an agile project management tool

  • 24/7 Online communication and 2 weekly meetings for updates

  • Using GitHub to manage development files and file version control

  • Live GitHub logs which provides live notifications on any development updates, changes and bugs.

Sprint 1

  • ‘My Feed’ posting
  • Uploading/Creating memes

Sprint 2

  • Creating/Uploading Templates
  • Account Settings
  • Login/Registration
  • Dark Mode

Sprint 3

  • Discovery Feed
  • Mobile Responsiveness
  • Profile Page
  • Set ‘Favourite’ template

Sprint 4

  • Changelog
  • Search
  • Follower/Following
  • Posts Explorer
  • Tags
  • Comments
  • Upvote/Downvote
  • Preloading

Sprint 5

  • Sharing Posts
  • Public Pages
  • Notifications System

Challenges

Throughout the project, we encountered a couple challenges/obstacles that affected the progress of our project development:

  • Technical Challenges – Learning curve for new tools, systems and components we were using, and ensuring the various tools we were using worked seamlessly together

  • Systematic Challenges – Consisted of communication issues, inconsistency of information given from one team to another, different views on the project direction and intention, conflicts with different teams developing simultaneously

  • Too large of scope – Initially wanted to implement more than what was feasible given the strict timelines

To overcome all the challenges we encountered throughout the project, we ensured:

  • Focused on the task at hand given the tight timeframes

  • Clear communication with the team

  • Weekly Meetings

  • Maintain teamwork and provide assistance when needed

Release Screenshots