Step 1: Understanding


Identifying the product’s requirements and Business goals, by doing Stakeholder Interviews.
In this step, i usually work on identifying the project vision, who are the users of the website or application, what is the core value prop of the offering, who are the competitors, and who is the target audience.
Below is an example of product's requirements based on the stakeholder interviews for the invoicing software showcase:

Responsive Design

Easily create and browse invoices, and generate reports from any device.

Manage multiple accounts

Setting up multiple business accounts on the cloud in a simple way...

Effortless Invoicing

Create professional looking invoices, and easily deliver them to the clients.

Dynamically generated reports

Generate monthly and yearly statements, income and expenditure summaries.

Step 2 : Analysis and Research


Benchmarking and trend analysis

Research the competitors and how do they solve common problems; and identify their strengths and weaknesses, and the strategies used by each of them to achieve their objectives.

Analyzing existing user feedback from online reviews, surveys, or social media channels.

Develop User Personas; covering general demographic info, technology preferneces, likes, and interests.

Generating User Stories to define what are each persona's needs, and what functionality the application should provide to meet these needs.

Step 3: Information Architecture

I usually use "Card sorting" technique to build and organize website structure and navigation, based on the user stories created in the previous step.

In this step i also decide what to put on the home page, how many navigation levels i should use, and the most important content sections that should be placed on the website pages.


Step 4: Creating User Flows

Combining the user personas with how they will be interacting with the website structure by creating Customer Journey Maps.

What Components Does a Journey Map Include?

Touchpoints

Customer interaction points.

Scenarios

Scenarios describe a sequence of events, such as creating a new invoice or generating a report.

Actions, and emotions

What the customer is doing, thinking, and feeling during his journey.

Let's wrap it up!


The aim of the Analysis phase is to draw insights from data collected during the Research phase...and understanding end-users to confirm that any assumptions being made are valid.

All the above steps should help in understanding customer needs and point of view, and get a better sense of the impact of the design on potential users, leaving aside personal perspectives, assumptions and expectations.

Step 5: Wireframing

I usually start by drawing low-fidelity wireframes using a Sharpie pen and a piece of paper, and then i design high-fidelity wireframes on Sketch or Illustrator for better documentation and presentation purposes.
Wireframes should include details like navigation, breadcrumb, headers & footers, and body content.

After designing wireframes; i use InVision app to upload my screens and create an interactive prototype for the application or website.
It helps me to easily link pages using hotspots, write comments on the designs, and it integrates nicely with Sketch and Photoshop.

After validating my prototype through usabilty testing; i start working on visual mockups, and put more visual details, such as colors and typography.

Appreciate my work


You found the showcase interesting?...Tweet it :)