Published
October 12, 2019
Category
Development \ Design \ Branding
client
Ulties

CASE STUDY

UPTIME MONITOR

Engagement

Front End Development

Back End Development

Design

Payment System Integration.

 

Frameworks

Vue

Laravel

 

Challenges

Infrastructure

SERVICES

  • Development
  • Branding
  • Logo Design
  • Landing Page Design
  • Dashboard Design
  • CRM Development
  • Corporate Identity Development

DELIVERABLES

  • 40+ Pages
  • 80 Modules
  • Illustrations
  • Icons
  • Styleguide
  • Presentation Showcase
  • Landing Page

OTHER

  • UX Research
  • UX Psychology Development
  • General Competition Research
  • Identity and Brand Research

01. About the Project

U

Uptime monitor is a small and nifty tool that helps companies, small businesses, and individuals track their website’s online activity. The tool aims to monitor the general health of a website, covering a wide range of checks and providing plenty of features to the end-user. Everything was designed and developed with a priority placed on user accessibility and ease of use. We were aiming to create an everlasting tool that is technically and visually satisfying to use.

We’ve focused on creating something that is cheaper than any other alternative on the market but at the same time has even more to offer as a service. We achieved this by doing a really in depth analyses on competitors and what they were bringing to the market.

One great bonus to the project is that once we finish and launch the product we will be offering it to all our existing clients and future clients that would like to work with us as a free bonus and intensive.

The Task

The general task was to create a user-friendly tool that provides a wide range of features in a package that is easy to be used by companies and individuals alike.

Framework

Our framework of choice was Vue and Laravel. The general aim was to select frameworks with expressive and elegant syntax.

02. Development

Development wise, we wanted to focus on long term sustainability and also have a solid ecosystem that allows ease of upgrade and maintenance. With that in mind, we went for Vue and Laravel, aiming to create something that can easily be modified by professionals and moderate level developers. We wanted to have the most user-friendly foundation that allows us to quickly modify things without going through an extensive hassled process.

Before choosing the framework, we made sure that it would be able to keep up ease of upgrade for a long duration. This simplifies both the maintenance and upgrading of the application.

Vue

Vue is a progressive framework for building user interfaces. It is designed from the ground, and can easily be a library and a framework depending on general goals.


In our perspective, Vue has the best features of other libraries such as templating syntax, two-way data binding and directives from Angular, virtual DOM implementation from React. The setup is quite simple. All that makes using Vue.js very comfortable.

Laravel

As a PHP framework, Laravel is an open-source web development platform.

We chose it due to its expressive and elegant syntax that has been designed to ease and speed up the web development process. The platform has a vibrant developers community support and powerful features too. Described below are 6 Reasons to Choose Laravel PHP Framework for Web Development

Sustainability

As a PHP framework, Laravel is an open-source web development platform.

We chose it due to its expressive and elegant syntax that has been designed to ease and speed up the web development process. The platform has a vibrant developers community support and powerful features too. Described below are 6 Reasons to Choose Laravel PHP Framework for Web Development

02. Design

One SEO component called off-site SEO ensures that users of external pages or of social media can find your website. Being optimized for SEO increases the site’s potential to draw customers from other platforms other than the search engine. For instance, when you post content and links to your page on Facebook or Twitter, you are able to promote your website and attract more customers. One of the main goals of SEO is to attract the targeted audience through organic searches. The number of visitors to your site influences your sales and subscriptions. It also promotes the marketing of your products and services. Increased inbound traffic is always good for business because it equates to more conversion opportunities.

Some SEO-related tools such as the Google Keyword Planner and Google Analytics provide quantitative data to help you understand your market, analyze the trends, and know your competitors’ standings. It helps you identify popular and valuable keywords so you can decide how to structure or revise your content.

Color Choices

#F1F5F8

#A1A1A1

#69A5FF

#FF5D5D

#FFFFF

SUPER CLEAN

Module Design

Function wise, everything was designed to be separate and modular, providing amazing long terms design and development upgradability management and support.

DASHBOARD

Dashboard Design

We figured that the project had to be aimed at speed function and stability, meaning that the dashboard had to be super minimal and clean. The overall design of it was stripped to bare minimum, even color wise, we decided that having small color accents would best suit the design language in order not to divert user attention away from functionality. Future updates also provide a Dark Mode for eye ease.

SALES PAGE

Landing Page

Every product needs a first impressions sales page, hence we designed a clean and reliable page that convoy’s the general design language of the App itself and speaks visually to the end user.

BRANDING

Logo Design

One thing that typically consumes a lot of time and energy is hitting the right branding that represents the software or app accordingly. 

The Uptime logo design came out relatively fast and without much thought. The Software aimed to be fast stable and flexible, hence  we came up with the two arches design that represents all of ht aforementioned aspirations in a simple representation, followed by a clean typography using the Nunito Sans font. 

 

FONT CHOICE

Typography Choice

For typography we chose Nunito Sans, which is an amazing free font family that provides all necessary font weights to get the job done.

Nunito is a well balanced sans serif typeface superfamily, with 2 versions: The project began with Nunito, created by Vernon Adams as a rounded terminal sans serif for display typography. Jacques Le Bailly extended it to a full set of weights, and an accompanying regular non-rounded terminal version, Nunito Sans.