Back to blog overview

August 19, 2022

Putting Together the Design Puzzle

Sunjay Armstead



UI/UX Designer and Engineer II
Louisburg, NC

The Art and Science of the Design Process

Designing web apps is both an art and a science. The process is fluid and looks different with every project. Still, there are steps we aim to repeat with nearly every project at ZEAL.

In the next few articles, we’ll break down ZEAL’s design process by using our Software Residency application as a case study. To start, let’s briefly look at each piece of the design puzzle.

User Research

All applications are built for someone to use. That’s why we find it so important to get into the minds of target users to discover their needs, pain points, barriers, and more.

UI/UX teams employ a number of strategies to conduct this research. For the Software Residency application, our team identified user groups and surveyed how they hoped the application would solve their problems. We then organized the survey results and summarized our findings to inform the next steps of our design process.

Synthesis of Research Results

Organizing research insights can be a hassle, but creating affinity maps made the process much less painful for our team. An affinity map allows UX teams to group data into like categories and arrive at informed conclusions for the needs of each user group.

Application Map

Our affinity map presented several key functions that the Software Residency application should serve. We translated the insights from the affinity map into user needs, which helped us determine key features and main sections of the app. In the information architecture phase of the project, we mapped these features out for all involved user roles and established a hierarchy for the application.

UI Flows

Our next step is to think through the different states of the app. That is, what happens when a user forgets their password, clicks a button, or visits a page for the first time? One helpful exercise for this is to create UI Flows. In the login and password reset flow, for example, we used arrows and blocks to show the steps a user should take to enter the application.

User Stories

By this point, our team is ready to write user stories to outline how their key needs can be met. Each story has a why (”in order to”), a who (the user in question), and a what (”I want to”). For example, “In order to gain access to the application (why), As a mentor (who), I want to log in (what).” In this way, writing user stories helps us build features with the user top-of-mind.

Wireframes & Prototyping

With the data from research, mapping, detailing application states, and user stories our team has plenty to work with to start creating wireframes. Generally, UI/UX teams cycle through low-fidelity, mid-fidelity, and high-fidelity wireframes. For the Software Residency app, our team focused on low- and high-fidelity frames to iterate faster.

Low-fidelity wireframes are rudimentary representations of the application. The goal is to show the overall structure and elements that may be used in the interface. High-fidelity wireframes are meant to be pixel-perfect designs that the development team will use to build the application.

Usability Testing & Lots of Iterations

The design process is often not linear, especially for Agile companies like ZEAL. We draw from the principles of continuous integration and continuous deployment (CI/CD) to ship small sets of features at a time. This helps us maintain momentum, write better tests, and stay nimble as our projects evolve. Our design team, therefore, expects to continuously iterate on flows and wireframes to help our projects increasingly improve over time.

One of the things that helps us iterate and improve applications is Usability Testing. Think-aloud usability tests with real users can provide insights that the designer is unable to see. We ask 3-5 participants to complete 2-3 tasks within an interactive Figma prototype. We also ask them to articulate any thoughts and feelings while moving through the exercise. Any feedback is helpful and gets assessed with a severity rating. According to the rating, we make recommendations and implement changes in our next iteration.

What’s Next?

As you can see, designing effective software requires expertise and a significant amount of effort. So don’t go it alone. Let’s talk about how our team can partner with yours to design quality applications for your clients.

Do you want to know what we did next? Read everything about How to understand users with User Research in the following post of this series.

More from this Series

  1. Putting Together the Design Puzzle
  2. How to understand users with User Research?
  3. How to synthesize research with Affinity Mapping
  4. How to Create an Application Map
  5. How to Create UI Flows
  6. How to Write Great User Stories
  7. How to Create Wireframes and Prototypes

Photo by Ashkan Forouzani on Unsplash

This article has been written in collaboration with Lisa Panke.

Let's Chat

Are you ready to build something brilliant? We're ready to help.

Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.
RedwoodJS Logo

for builders

Grants Pass, Oregon • September 26 - 29, 2023
View All