How Breathe Came to Be
As technology evolves, so does our understanding of the importance of mental well-being. With technology and work being a constant distraction, we tend to neglect our own mental well being. With this class, I fabricated a wonderful mobile app designed to cater to the needs of busy indiviusals to help them have a safe place in their busy life.
I created this app for those who make time for everything but themselves.
This is a 10-week-long project for User Interface 2, which is an upper-level credit class for the major Interaction Design at Kennesaw State University.
The Project Prompt
To create our project we had to fulfil the following requirements:
- Consider the characteristics and goals of the intended users.
- Decide on the type of interface (computer, phone, kiosk) and how users will interact with it (mouse, touchscreen, etc.).
- Design the interface to be easy to use, accessible, and efficient.
- Ensure the interface is intuitive and consistent, using features like affordances, constraints, and consistency.
- Include feedback and error handling to prevent user frustration.
- Pay attention to how users think, learn, and navigate to meet their expectations.
- Consider aesthetics, organization, layout, and user involvement to make the design visually appealing and engaging.
- Personalize the user experience.
- Consider the mental effort required and the readability of the interface.
- Continuously evaluate and gather feedback from users to make adjustments for an effective and user-friendly interface.
Bringing Ideas to Life with Pen and Paper
In class, we were given an exercise to stimulate our creativity by sketching our potential app ideas and their three key features on three "screens" using pen and paper. I began by drawing the first image in blue ink, keeping my ideas simple and quick. Surprisingly, these initial sketches ignited the right design inspiration within me.
Then came the task of designing two alternatives for the three main features of the app. This resulted in the creation of a purple page among the images. Although I didn't go too far from my original design, the exercise helped me realize that the circle breathing tool would be a better choice than the flower concept I had initially considered.
Finally, it was time to design our final lap, represented by the black and white picture. Thanks to the guidance provided by my previous drawings, I was able to create a more detailed design. This allowed me to envision the realistic functions and interactions that the app could offer on its screens.
Overall, this exercise not only allowed me to visualize my app idea but also enabled me to refine and enhance its design throughout the process, resulting in a more polished and practical concept.
First Step: Milestone 1
For Milestone 1, we were required to make a low-fidelity layout of wireframes with no prototyping based on our sketches. We were using a greyscale color scheme and basic shapes to hold where the items of the app would be. We specifically had to focus on the flow of how the 3 core functionalities would take place in our prototype. As you see to the right, there are my wireframes with principles of UI embedded in them. While this layout is simple it can hold the potential of producing complex ideas. After getting feedback from my fellow classmates, I made some minor changes and progressed to Milestone 2.
Next Step: Milestone 2
For Milestone 2, we were told to add prototyping features to our design along with the designs we created. For my project, I made a significant amount of changes from Milestone 1. I began by adding colors, designs, and images. I also incorporated some slight prototyping such as connecting the navigation buttons to the other screens, along with the back buttons.
We were also required to create a style guide, focusing on the fonts, colors, spacing, and icons. I designed my logo and decided to add that in there to incorporate my aesthetic better.
Final Step: Milestone 3
After carefully developing my prototype, I made it to the final stage. I wanted to make it look more professional, so I introduced consistent placement, measurements, and smart animation techniques. I finally added my breathing exercise feature that matches the correct breathing intervals for the user by using smart animation. I also made sure all the elements on each screen were consistent. This means making sure the nav bar is placed in the same spot on every screen, along with the back buttons on the screens that have it.
By using various animation techniques, I made the transition between screens smoother, improving the overall user experience. Moreover, I added a dynamic feature that changes the affirmation content when the user presses the quote, making it more personalized.
After receiving feedback from classmates and friends I felt that my prototype has made an exceptional product for my final design.
Journey Completed
Here is the final project of my User Interface Design 2 course, my product, Breathe. Happy Breathing :)
Conclusion
While working on this project, I encountered several challenging issues, but I'm relieved to say that I have successfully completed a phenomenal final project. I feel fortunate to have had the opportunity to have a full college journey, and I'm especially grateful to end this semester on such a high note.
