arrow-left
Go Back
ShutterScout
2024.01
Project overview
I took on the roles of UX/UI Designer and Co-developer for the ShutterScout app, working closely with a partner to share the coding duties. In just two weeks, we developed ShutterScout using Figma for design and Kotlin for development under Android's Material Design 3 guidelines. The goal was to create a functional app that helps photographers by allowing them to save their favorite spots and alerting them when the weather is ideal for photography.
Approach and Process
The main challenge was to develop an intuitive app that lets photographers track and receive alerts for the best photography conditions. With only two weeks for design and development, I needed a streamlined and focused approach to make this happen.
User-Centric Design
I started by talking to photographers to understand their needs, which helped shape the app's features. This ensured that the features we were adding were what photographers actually needed.
Low-Fidelity Design
I started the design phase with low-fidelity sketches to outline the basic features and user flow. These sketches were crucial for iterating on ideas quickly and identifying potential usability issues from the outset. At this stage, I was sketching on paper and whiteboards, rapidly modifying layouts and elements based on initial thoughts and discussions. This approach allowed us to explore various design solutions without committing significant time to each one. The low-fidelity sketches helped clarify the app’s structure and main features, setting a solid foundation for more detailed design work.
Wireframe design on paper
After solidifying the basic structure and user flow with low-fidelity sketches, I moved on to grayscale wireframes. This stage was about refining the user interface and layout without the influence of color, which could distract from focusing on spacing, alignment, and the overall usability of the interface. Using Figma, I developed these wireframes to detail the placement of text, buttons, and other UI elements.
Grayscale Design
Grayscale wireframes made it easier to evaluate the usability and effectiveness of the design. It allowed me to focus on spacing and the user's journey through the app, ensuring that the layout was intuitive and logical. At this point, feedback was gathered to tweak and adjust the wireframes, ensuring every screen was optimized for user experience before any visual styling was applied.
Lo Fi Wireframes
High-Fidelity Design
After solidifying the basic structure and user flow with low-fidelity sketches, I moved on to grayscale wireframes. This stage was about refining the user interface and layout without the influence of color, which could distract from focusing on spacing, alignment, and the overall usability of the interface. Using Figma, I developed these wireframes to detail the placement of text, buttons, and other UI elements.
Hi FI designs v1
In Figma, I translated the grayscale wireframes into high-fidelity designs, applying color, typography, and other stylistic enhancements. This stage included detailed work on the interaction design, ensuring that animations and transitions were smooth and contributed to a pleasant user experience. The high-fidelity prototypes were then tested with a small group of photographers to gather feedback, leading to two rounds of revisions. These iterations helped polish the design, making sure that ShutterScout was not only functional but also visually compelling and easy to navigate.
Hi FI designs v2
Development and Collaboration
After finalizing the design, I translated the high-fidelity prototypes into Kotlin code using Jetpack Compose, aiming for pixel-perfect accuracy. My development partner and I shared the workload to keep the project on track and meet our tight deadline.
Outcome and Reflections
ShutterScout was well received by its initial users, praised for its straightforward functionality and design. This project was a valuable lesson in fast-paced development and integrating user feedback effectively. It reinforced the importance of a clear workflow and in-depth knowledge of Android development, particularly Kotlin and Jetpack Compose, to efficiently transform designs into functional products.
Conclusion
Working on ShutterScout improved my skills in managing quick development cycles and producing designs that balance user needs with technical constraints. This experience highlighted the importance of adaptability, user-focused design, and teamwork in successfully creating applications within tight deadlines.
Project files