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
In the last stage the wireframes were detailed with the last finishing touches of color, copy and images. All three screens consist of minimal components that are reusable for further screens.
Mockups
When preparing the case study for this project a splashscreen, that can be seen at the beginning of the case study, and an example of a notification in iOS, that can be seen below, was added to embed the screens into a more relatable product scenario.
Interaction
To make handoff to development easier, a short demonstration of an interaction inside the app was also created with the help of ProtoPie.
Thank you for your interest!
Do you like what you just saw?
Then let's talk!
