Dashtag is social media analytics and management tool helping small and medium businesses to grow their social media presence and gain insights into their audience. It is also designed to help social media agencies manage their clients while creating accountability for their services.
This was an end-to-end product design and development project, meaning I started with ideation and progressed through the information architecture, UX design, branding, UI design, frontend development, backend development and deployment. Being a business facing web application it incorporated SaaS like features such as pricing tiers, stripe integration and user onboarding.
After mapping out the information architecture in a notebook, I proceeded to start sketching out rough wireframes. Once these were completed I created higher fidelity wireframes in Balsamiq, this allowed me map out initial interactions between screens and test the validity of my early sketches, making changes as needed.
Once I had version one of the UX design complete, I started to brand the project. First, I had to choose a product name, I came up with ‘Dashtag’ by combining ‘dashboard’ alluding to the analytics and management, and ‘hashtag’, indicating the social aspect. The primary brand colour is blue, to signify the professional nature of the product and the greyscale was chosen as to not look out of place in a work environment, which could be the case with a dark colour scheme with vibrant accent colours. The typeface was chosen as its simple and versatile nature would not interfere with the value generated by the product, the data visualisations.
I then combined the UX design and branding to create the UI design. This was done through the Adobe suite and then exported to InVision to create an interactive prototype.
I decided to spit the front and back end development into two projects to ease development and make the final product more scalable. The frontend was built as single page web application in VueJS with each visualisation its own component which communicates with the database through a custom-built API. The styling was achieved through SCSS and webpack to compile and minimise the production files.
The backend project consisted of two main sections, the first being the API and the second a services layer that runs periodically. The API layer was built in Laravel and handles communication with the databases (MySQL and Firebase), data processing and user validation. The services layer is set up to run as a CRON job and its function is to periodically collect data and complete scheduled posts.
The project is version controlled through git, deployed through GitHub and Laravel Forge and hosted on a DigitalOcean droplet.