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.
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.
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.
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.
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.
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.
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.
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.
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.
Photo by Ashkan Forouzani on Unsplash
This article has been written in collaboration with Lisa Panke.
Are you ready to build something brilliant? We're ready to help.
.jpg)
.jpg)
