Web Manage

Responsive website design, brand guidelines and a logo for a online SaaS product.

Wave

Project Overview

Project Scope

Create brand visuals

Tools

Figma & Adobe Illustrator

Role

UI/UX designer (research, visual design, interaction design) & digital designer (logo, illustrations, advertisements)

Team

Self-directed, with feedback from the client/web developer

Duration

3 months (ongoing)

Challenge

Web manage is an online SaaS (software as a service) that is aimed at freelance web developers and small creative agencies.

It acts as ‘Swiss Army Knife’ for its developers by providing tools that can be used to help run their business, such as: project and client management; invoicing and estimates; file sharing; online contract signing and time tracking.

The aim of web manage is to provide users with a centralised platform that consolidates features that would typically be spread across multiple services.

My challenge is to design a marketing website for the product, brand identity guidelines and a logo.


Objectives

  • Design a logo for the company that aligns with their brand value.
  • Establish and create brand guidelines.
  • Design responsive marketing website that is easy to navigate around and allows users to browse through all the different features, find out pricing and sign up.
  • Design the mobile app for web manage that is user-friendly and easy to use with a clean design.
Wave

Design Process

Step 1

Research

  1. Market research
  2. Competitor analysis
  3. Provisional persona
  4. User interview
  5. Empathy map
  6. User persona

Step 2

Strategy

  1. Product goals
  2. Product roadmap
  3. Site map

Step 3

Design

  1. Task flow
  2. User flow
  3. Wireframes
  4. Branding
  5. Responsive UI
  6. UI kit

Step 4

Prototype & Test

  1. High-fidelity prototype
  2. Usability testing
Wave

Lo-fidelity Wireframes

I started sketching low-fidelity screens. This way I can capture my ideas by pen and paper quickly by sketching. It also enables me to gather ideas before putting everything into a high-fidelity prototype.

High-fidelity Wireframes

Once I had the visual direction of the layout, I started to add more details and precisions to the sketches by turning them into high-fidelity wireframes using Figma. Creating high-fidelity wireframes help me focus on the visual consistency before applying styles. In these wireframes, I tried to incorporate the brand’s colours and existing design patterns.

Brand Visuals

Brand Guidelines

Aswell as being responsible for designing the marketing website and logo, I was also responsible for creating the brand guidelines. Brand guidelines are clearly defined rules and standards that show how your brand should be represented to the world. They help businesses ensure consistency and demonstrate what the company is and what it stands for. Brand guidelines also help people like me to stay on brand when designing the website.

View Brand Guidelines (.pdf)