Web Manage

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

View Figma Prototype
View Brand Guidelines (.pdf)
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 a ‘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 was 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 a responsive marketing website that is easy to navigate 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 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

Low-fidelity Wireframes

I started sketching low-fidelity screens so I could capture my ideas by pen and paper quickly by sketching. It also enabled 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 helped me to 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

I was responsible for creating the brand guidelines as well as designing the marketing website and logo. 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 ensure people stay on brand when designing the website.

View Brand Guidelines (.pdf)
OK!