For project one in my Web Design class at The University of Alabama at Birmingham, we were given the task of re-creating a pre-existing app of our choosing. I decided to re-create the Alabama WIC app. In this assignment, we used Adobe XD, a vector design tool for web and mobile applications. This is a multi-part assignment that included the following tasks:

1.) Creating an annotated sketch with a partner trade of the Alabama WIC app

2.) Developing our first low-fidelity wire frame for the Alabama WIC app 

3.) developing our first High-fidelity wire frame for the Alabama WIC app

4.) Prototyping a completed and accurate re-created High-fidelity wire frame of the Alabama WIC app

My process can be viewed below. 

The three images placed below are screenshots from the original WIC app that I used as a reference for this project.

The images below are my sketches of the three pages chosen for re-creation. I also have included my notes on the application that aided me in accurately creating my Low-Fi wireframe. These sketches were also used in a smaller assignment where students in my class traded sketches to test the accuracy of our partner's annotated sketches

After completing our annotated sketches we were given the challenge of using Adobe XD to create Lo-Fi wire frames for the Alabama WIC app. These wireframes are meant to be extremely simple, similar to the "skeleton" of the app. 

Below you may view my completed High-Fi wireframes made in Adobe XD. The challenge for this part of our assignment is to create wireframes that are identical to the original app. 

The final challenge in this assignment was to prototype the interactivity in the home page, profile page, and food brochure page in the Alabama WIC application. Feel free to test the interactivity between the three pages required for this assignment.