web application

Shoutify - An online marketplace for buying and selling Instagram shoutouts

Introduction

Shoutfiy is an online marketplace for buying and selling Instagram shoutouts. Simply find influencers that match your brand, enter your image, caption and time and we do the hard work! Get exposure to new audiences. Browse through our network of influencers and push your brand to their followers. Finding influencers to partner with has never been so easy. Monetise your social influence. Have a high-quality engaged Instagram audience? Shoutify makes it easy for you to make money from it through paid promotional posts or ‘Shoutouts’.

Specification

Shoutify is a two-sided marketplace aimed at connecting influencers with brands. This was a side project therefore I worked on the ideation, branding, UX design, UI design, frontend development and backend development. The marketplace was constructed using Stripe’s connect feature, making the user experience as a brand or influencer as seamless as possible.

UX Design

As with all my projects I created an initial information architecture as a flow chart and then mocked it up as higher fidelity wireframes within Balsamiq, this gave me a rough prototype that was interactive and could be tested for any indiscretions.

Branding

Being a minimum viable product, the aim of the branding was to give the project a simple identity unlike that of its competitors. The logo was created in two parts, the logo type and the icon that combines the rough shapes of a speech bubble and a rocket stage. The colour scheme was chosen to make the interface look modern but also to highlight the cards, in which the valuable content is shown. In this vein the sans-serif typeface of ‘Lato’ was chosen due to its simplicity and versatility across branding and the user interface.

UI Design

The UI design combined the UX design and branding to create the final interface mockups that would be took into production. Various design patterns are used across the application from the vertical navigation to the content cards used to display and collect information.

Frontend Development

The frontend was built using Laravel’s blade templating system to create and structure the projects mark-up. CSS and JavaScript were used for styling and interactivity respectively with both being compiled and minified through Webpack.

Backend Development

The backend development was done through Laravel’s model and controller functions. The model functions were to interact with the MySQL database and Amazon S3 storage. The controller functions are used to control all the logic with the application, from the routing to data manipulation to payments integration.

Deployment

The project is version controlled through git, deployed through GitHub and Laravel Forge and hosted on a DigitalOcean droplet.