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:
Easily create and browse invoices, and generate reports from any device.
Setting up multiple business accounts on the cloud in a simple way...
Create professional looking invoices, and easily deliver them to the clients.
Generate monthly and yearly statements, income and expenditure summaries.
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.
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?
Customer interaction points.
Scenarios describe a sequence of events, such as creating a new invoice or generating a report.
What the customer is doing, thinking, and feeling during his journey.
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.