INTRO
This hypothetical mobile app was designed as part of a creative exercise to further my understanding of design principles and Figma tools.
ROLE
Sole UX/UI Designer
DURATION
1.5 weeks
In this case study, I cover my design thinking, the app's prototypes, and redlines.
First Steps
I began by researching existing event management apps to understand how Pigeon should look and feel. Following a mobile-first approach, I drafted wireframes for mobile before moving on to tablet, ensuring all necessary information was included in the smallest screen size.
Atomic Design
After moving my wireframes into Figma, I began designing the UI's atoms - individual design tokens/buttons. The atoms were then combined into molecules, molecules into organisms, organisms into templates, and templates into pages.
To this end, I made great use of Figma’s auto layout and nested component functionality.
PROTOTYPES
Each screen of the app was designed with Figma's auto layout and made to be scalable. Thanks to this, converting a layout from mobile to tablet was seamless.
​
Additionally, I created a prototype showcasing breakpoints between mobile and tablet screen sizes to demonstrate the app's responsive design.
I wanted to take the prototype’s functionality to the next level by creating an interactive Watchlist screen and Profile page, the latter of which tracks events followed and events added to the user's watchlist.
Utilizing Figma's components and variables enabled me to make all of my frames update dynamically according to user inputs. This meant I only needed one frame for each app screen.
Breakdown of Process
My first step in designing the Watchlist screen's dynamics was to create a group of variables for different events.
Second, I assigned each event's variables to its respective event card. By doing this, I could toggle each event card's layer visibility based off of the "Watchlist" boolean variable (shown above).
Third, I added an interaction to the watchlist button on each event card. Upon tapping/clicking the button, it sets the value of the "Watchlist" boolean variable to "true", thus making the card visible.
For other screens that dynamically update, such as the Profile page, I followed a similar process.
REDLINES
Lastly, I prepared redlines for a hypothetical handoff to engineers. The redlines double as an illustration of my dedication to detail and consistent spacing in line with industry standards for the content of each frame.
​
Below is an example of the homepage.
Takeaways
Following atomic design principles in creating the app's UI was an incredible improvement to my workflow, making me more conscious of how I approached designing each component of the interface.
Similarly, adopting a mobile-first approach (in contrast to the desktop-first approach I took in another case study, RetroInfinite) forced me to understand what was essential to fulfilling the intended user experience of the app before making additional design decisions.
Furthermore, both design methodologies streamlined the process of refining my designs and editing them.
​
Overall, through this creative exercise, I gained a greater understanding of responsive design and a greater comprehension of Figma's toolset.