<aside> 💡 Design a profile creation flow for a networking app for entrepreneurs ‣

</aside>

Empathize and Define

Responsive web Design

• Allows the design to change according to the size of the device

<aside> 💡 The aim is to provide a similar experience on both a desktop and a mobile. → users should be able to interact with the website in the same way on all devices

</aside>

It is very important to be flexible as a designer

Empathize

‣

• You’ll create empathy maps, based on interviews you conduct, which highlight what a user or group of users says, does, thinks, and feels.
• You’ll craft personas, which are fictional users whose goals and characteristics represent the needs of a larger group of users.
• You’ll develop user stories, which are stories told from the persona’s unique perspective. User stories include three parts: a who (type of user), a what (the desired action), and a why (the benefit for the user).
• You’ll build user journey maps, which are visual representations of the actions a user takes to achieve a goal.

Ideate

Information Architecture

Common Website Structures/Site Structures:

• Hierarchical: top-down approach→ starts with broader categories (parent) then move to more detailed areas (child) → organizing the content by importance

  

• Sequential: leads users to a step-by-step process

  

• Matrix: allows users to follow their own path as the content is linked in several ways → users can access all other pages from any page like in a news page

  

• Database: mixes a database with search functionality → provides advanced filtering and searching capabilities like in a social media website

  

Wireframes and Low-Fidelity

Common Website Layouts

1. Single Column Layout: like Medium→ entire article is within a single column

   Elements are usually stacked in a vertical column: navigation at top, then content then footer. Most useful in mobiles

2. Multi-column layouts: having multiple vertical columns

   Focal Point: a specific and distinct area of website that captures the user's attention, Eg: images and supported content are displayed parallelly in multiple columns → supported content usually cover 25-45% of the page

   <aside> 💡 On many multicolumn websites, one column of content on the far left or right is used for ad space.

   </aside>