Wireframe Invisalign
IronHack Project #2
In this project I decided to choose the Invisalign App to practice creating wireframes. I downloaded the Figma IronHack Wireframe kit which was very helpful in creating a very close comparison of the app itself. Throughout the process of the creating the app I found it difficult to decide what exactly needed to be detailed. For example, do I need the exact same calendar picker? Or just the one that was in the kit. I decided on the later as the point of a wireframe of this fidelity is just to get the main points across.
I enjoyed this project a lot, and found it funny that many of the icons were an exact match to that used in the app itself. I did have issues with finding how to scroll which I will continue to explore. I decided to duplicate the inital frame 5 times once it was completed so that the bottom bar would remain intact, as it was common throughout the app.
Here is my user journey:
This is the frame you would find after entering an optional pin when entering the app. The user can tell which aligner they are on, how many days they have left, and a timer for whenever they remove it. In this journey, they decide to take a photo to show their progress, leading to the next frame. (Center bottom camera button).
In this second frame, the user can play previous photos, at the top. They can also see their photo gallery and the date that the photo was taken. During this journey the user decides to tap on “add new photo”, as they are showing their most up to date progress.
In the 3rd step, the user would see a front camera view of themselves, with instructions and a white box outline showing them how to fit to pose. The white circle button they would then click to capture the photo.
Next, they would be able to see their photo and decide to retake or save the photo. This user decides to save the photo.
Normally, they would be redirected to the “Smile Gallery” but I decided to use the 5th frame of the wireframes to show their final step in the app. They would’ve clicked on the bottom right calendar icon which would lead them to this page. They can see the calendar picker, and there most recent activity which was “Added selfie to smile gallery”. The user is happy and then exits the app.
I chose this user journey as it showed various kinds of slides, and utilized all three bottom buttons. This way I was able to practice the use of wireframes, and displaying the different portions of the app. By the end I was able to limit down the detail to the most important aspects.
