Det Litterära Stockholm (2022)
UI design • Branding • Interaction design • User testing
Scope
The assignment was to develop a mobile application in Figma that would work as an educational platform while gathering and presenting all literary signs in Stockholm (known as "Det litterära Stockholm"). The app would allow users to learn more about the literary signs and Stockholm's literary history while also letting them participate in guided tours based on various themes.
The goal of the project was to create a digital platform for these literary signs, allowing users to deepen their knowledge of Swedish literature while exploring the sights from the literature in person.
01. Research & Planning
We began the project by gaining an understanding of the literary signs in Stockholm. We then analyzed similar apps and websites to gather inspiration and understand best practices. We also researched the app’s target audience to ensure that the design and flow of the app matched the users' needs and wants.
02. Wireframes
In this phase, we sketched a basic layout by hand (a shitty first draft), where we mapped out the components and features that would be featured in the prototype. This method allowed us to quickly and efficiently create an overview of the app's different parts and structure that we could later develop into a functioning prototype.
03. Creating the design system
The third step was to create the app's branding. Since the app is intended for outdoor use, we chose colors and design elements that resemble those found in nature. The app strives to be inclusive and accessible, so we chose an easy-to-read typeface. The typeface, mixed with the colors gave the app a modern feeling.
Primary text
#000000
Colors
Modern, nature inspired & clean
Secondary text
#9D9D9D
Primary background
#F1F1EC
Secondary background
#FFFFFF
Accent color
#BA7A38
Accent color
#6F8049
Typography
Contemporary, readable & classic
04. Hi-fi Prototyping
We proceeded to create detailed and clickable prototypes in Figma. These prototypes enabled us to visualize and interactively explore user flows, ensuring that the app's design and functionality remained consistent and user-friendly throughout the interface. We tried to make the prototype as real as possible to insure the best results in the next step: user testing.
05. User testing
Users tested the clickable prototype for the first time, and insights were gathered from guerrilla testing and interviews. This feedback was crucial for identifying user needs and improving the app's user experience.
06. Completion
We implemented changes based on the results from user testing to enhance the app's user experience and ensure that it meets users' needs and expectations to the best possible extent.
Lessons learned
This project has helped me grow as a UX/UI designer, here is three resons why.
User-centered design
That users' insights and needs are crucial for successful product development.Testing & feedback
It is easy to become blind to flaws when you have designed something yourself. That is why it is beneficial to have an external party test the product.Teamwork
Effective communication and collaboration are the keys to success.