Introduction:
It is true that you can’t build a great building on a weak foundation. I strongly believe that every 5-star gourmet meal starts with a detailed recipe, and every successful app begins with a well-designed information architecture.
However, unlike a chef or a constructor, in designing a website or an app, you get to step into the user’s shoes at early stages. A lot of effort goes into tasting the meal before it is even cooked. This is the beauty in a nutshell of user stories, a unique and essential role in app design.
User stories, scenarios, cases, flows – What’s it all about?
First, let’s define a few terms before diving into this journey.
User stories:
A user story is a brief statement or abstract that identifies the user and their needs or goals. It defines who the user is, what they require, and why they need it. Usually, it is written in the structure: “As a (Type of user), I want (action), so that (benefit).
User scenario:
User scenarios are narrative descriptions that tell the story of a user’s interaction with a product. They provide more detailed context than user stories, including the user’s motivations, actions, and the overall flow of interaction with the product.
User cases:
User cases illustrate how they engage with a system to accomplish specific goals. Their purpose is to provide a thorough understanding of system functionality and user interaction.
User flows:
The path a user follows on an app or website to complete a task from start to finish. It is illustrated by flowcharts or diagrams that show how users may interact with the product.
Utilizing those design tools requires stepping into the user’s shoes, which is easier said than done. The designer adopts a psychological mindset of empathy, sometimes even drawing on their previous experiences with similar apps or scenarios. Similar to an actor stepping into the role of a character, we may find ourselves considering the user, their needs, target points, technological proficiency, background, environment, and the context in which they use the app. All of these factors establish a specific user experience that can be represented through text or images.
Can user stories impact the information architecture?
Unlike the relationship between floor plans or recipes and the final products, user stories can theoretically lead to changes in the information architecture (IA). In fact, the impact of user stories can be bidirectional, affecting both preceding and following elements. After analyzing user stories, you may want to adjust the fundamental IA (such as reorganizing menus or creating shortcuts) to improve user experience. Additionally, you may want to consider the following steps, such as the layout of the screen and app navigation.
However, this impact should be moderated and sometimes restrained. We cannot allow one user’s experience to completely alter the foundations of the app.
I find this interaction between user stories and IA fascinating. To demonstrate and further analyze this interaction, I will create those tools for the New Haven Adult School app.
Users of the New Haven Adult & Continuing Education Center Companion app
The New Haven Adult Continuing Education Center is a nonprofit organization dedicated to assisting adult learners through a variety of educational programs. These include English as a Second Language, High School Credit courses, the General Educational Development Program, the National External Diploma Program, and many others.
The target audience for the Adult Education Center NH app will consist of current and prospective school students. This primarily includes students for whom English is not their first language and who usually lack a strong academic background.
The purpose of the app is to provide institutional services, academic support, and communication for students. The app offers convenient methods for conducting scholarly work, managing courses, paying tuition, and receiving real-time updates on school activities.
For this assignment, I created four user stories and flow charts, which I selected from the spectrum of the app’s target audience. Ricardo is a new student with a hectic lifestyle who wants to register for evening English classes. Liz is a registered student who wants to pay her tuition using her secure mobile wallet. Aisha is eager to find out if the school is closed today due to a snowstorm to avoid an unnecessary drive to school. Lastly, Matthew, a full-time student, wants to submit his homework through the school portal and receive feedback on his work.
This presentation encloses the full user stories and flow charts:
The impact of user stories on my app design
Case 1: Ricardo
The first case involves a new student who signs up for the app and registers for a course. Considering that he is not fluent in English and lacks an academic background, I designed this process to be as simple as possible.
First, this case highlights the complexity of signing up as a new user. How does one obtain a user ID ? How does the school verify that you are a legitimate student? How would Ricardo understand that he needs to sign up and fill in information to receive a password through his email ? While some of these features are beyond the scope of this assignment, this case illuminates the challenges of this process.
As Ricardo is a new user, I have limited the number of options on each screen: one screen for choosing the program, another for the course, and another for the time. This approach will help him feel more confident in his choices at each step, even though it may lengthen the registration process.
When Ricardo launches the app, he has one task in mind – registration. If he had attempted this through the website, he would have encountered significant duplications – one menu for course overview and another for course registration. My app IA eliminated this duplication, creating a better user experience for him.
Lastly, I have added a confirmation email step at the end, as Ricardo may feel more secure knowing he has completed the registration process correctly.
Case 2: Liz
The second case involves a registered student at the school who logs in to pay her tuition, which can often be one of the most stressful online activities. Stepping into Liz’s shoes, I imagined her worrying whether the payment was secured and the online process successful.
As Liz is a student with a very busy schedule, I designed the navigation straightforwardly, avoiding any struggle with numerous payment options. First, to do this, I ensured that the payment feature was clearly visible on the app’s home screen, as defined in the app’s IA.
Then I faced an interesting dilemma: whether to display the student’s balance on the first payment screen or to bury it deep in a “check balance” submenu. Considering busy Liz and what most students are interested in, I decided to bring the balance to the forefront. This decision can be further evaluated in later usability studies.
Thinking about Liz, who works in a grocery store and might not be able to pay her full tuition, I added an option to specify the amount you’d like to pay. This was not something I had considered in my original IA design.
Lastly, the app will send a payment confirmation via email and display it on the screen, providing Liz with clear validation that her payment was completed successfully.
Case 3: Aisha
This third case involves a current student wanting real-time alerts about schedule changes.
While this task is very straightforward, this story made me question my original app’s IA. Currently, all news and updates are routed to a specific section that can be accessed from the home screen. However, many apps bring real-time alerts to the forefront of the home screen. I didn’t see the value of doing so here for two reasons. First, I believe most app users are not interested in this feature. As a former student of this school, I can attest that schedule changes are infrequent. Second, alerts are very accessible from the home screen and are not hidden in any submenu.
Therefore, I decided not to modify my original IA. However, I would like to design a notification feature that allows users to receive real-time alerts outside of the app environment.
Case 4: Matthew
This case involves a student who wishes to submit his homework and receive feedback through the app’s school portal.
Stepping into Matthew’s shoes, I realized that my original IA lacked the numerous options this section entails: submitting homework, taking online exams, reading external educational links, receiving immediate online grades or later teacher feedback, attaching documents, entering recorded or live lectures, and much more. My original design completely missed how all those features would be utilized in a structured and organized way.
Accessing the student portal in its current design and submitting homework is relatively easy, and I don’t anticipate Matthew will have any difficulty with this process. However, this issue raised a potential separation of the student portal from the home screen- an idea that I’ll need to explore further later on.
Conclusion:
Stepping into the user’s shoes through user stories, scenarios, and flows is an essential component of web and app design. Its interaction with the preceding and following components is valuable and provides a better user experience. Careful analysis of user stories often leads to adjustments in information architecture and lays the ground for the efficient development of low-fidelity prototypes.
Credits: All the ilustrations are created by the author.
