Short Case Study:
FlyLetter UX/UI Design
Crafting FlyLetter
Overview
FlyLetter is a messenger app that allows people to chat with each other – one on one or in groups.
This project was an exercise on using reusable UI components and crafting app screens in a very short time. This project took around 4 hours from the first sketches to the submitted fully designed screens.
Contents
Click on the keyword to get to this part of the case study directly.
Low-Fidelity WireframesMid-Fidelity WireframesHigh-Fidelity WireframesMockupsInteraction
Purpose and Context
The project was completed as part of the CareerFoundry UI Design course.
Design Brief
The task was to design a messenger app with the help of reusable UI components. The app was designed for iOS with the Apple Human Interface Guidelines in mind.
Tools
The project was engaged with the help of the following tools:
- Sketch (Wireframing, Icons, Final design & Mockups)
- Protopie (Interactions)
Low-Fidelity Wireframes
The project started out with low-fidelity wireframes on paper to get ideas out as quickly as possible. The final three screens sketched already hinted at the reusable components.

Mid-Fidelity Wireframes
The next stage were mid-fidelity wireframes that would prepare for the final designs and already consider Apple’s Human User Interface Guidelines. The level of detail was kept a bit higher than usual for mid-fidelity wireframes as the time frame of the project was short but the number of screens was as well. This allowed me to explore edge cases like very long names or time stamps in this stage and therefore prevent delays in the next stage.
High-Fidelity Wireframes
Mockups
Interaction
To make handoff to development easier, a short demonstration of an interaction inside the app was also created with the help of ProtoPie.