Design Karma Home

Unleashing design brilliance with content insights

18 May 2023

3 min read

When user needs and content requirements are clear, wireframes can be created with a focus on layout, interaction design, and information architecture. Wireframes can help designers to identify potential usability issues early in the design process, and to iterate quickly based on user feedback.

But, are wireframes really the best tool for designing digital interfaces? While they are widely used, wireframes have their drawbacks, such as the illusion of final design, killing creativity, and undermining user-centricity. A great alternative is the "content-first" approach, which focuses on solving users' problems and needs through a detailed content list that is prioritized based on relevance.

Let's take the example of designing a mobile app for a fictitious coffee shop. Here's how you can create a "content-first" design using the following steps:

Define the Goals: Before starting the design, identify the business and user goals. In this case, the business goal could be to increase the number of orders placed through the mobile app, while the user goal is to easily order coffee and pastries.

Research and Understand the User: Conduct user research to understand the user's needs and preferences. Create personas and experience maps to summarize the research findings.

Determine the Content Topics: Based on the research findings, create a list of content topics that support the user goals. For example, for the coffee shop app, the topics could be "View Menu", "Place Order", "View Order History", "Get Directions", and "Contact Us".

Prioritize the Content Topics: Based on relevance, prioritize the list of content topics from top to bottom. The most important content topic should be at the top. In the coffee shop app example, "Place Order" would be the most important content topic, followed by "View Menu", "View Order History", "Get Directions", and "Contact Us".

Create a High-Level Content List: Using the prioritized content topics, create a high-level content list that shows the hierarchy of the content. For each content topic, provide a short description of what it is and why it's important.

Create a Detailed Content List: For each content topic, create a detailed content list that includes specific information and functionalities. For example, for the "Place Order" content topic, include details such as the types of coffee and pastries available, pricing, customization options, and payment methods.

Create the Design: Using the detailed content list, the designer can now start creating the actual design of the app. By focusing on the content first, the designer can ensure that the design is user-centric and addresses the user's needs.

It's important to note that the detailed content list is not a deliverable, but rather a tool to facilitate discussion among the designers, developers, testers, and stakeholders involved in the project. The content list can be created using a digital design tool or on paper using Post-its.

The "content-first" approach, which prioritizes content based on relevance, can lead to more user-centric designs. By following the steps outlined above, designers can create effective designs that solve users' problems and needs.

↩ All Posts

We are

Design subscriptions for the complete product.

UI/UX Design, Websites, and Apps. Hire us

Design powerup pack

Rev up your design consistency and speed with our Figma library.

Try it out