The developer worked on the annotated wireframes and from there I developed high fidelity prototypes that we could use for user testing.
![](https://pro2-bar-s3-cdn-cf3.myportfolio.com/dafa4f64bb560f22ca16bb4e07332344/401b048a-bbf8-489e-a6ef-e6167bb37ecd_rw_1920.png?h=4b532d69f73f8993a21154c391bbe35c)
I used prototypes that were low fidelity to flush out ideas for typography based on the wireframes from the developer.
![](https://pro2-bar-s3-cdn-cf3.myportfolio.com/dafa4f64bb560f22ca16bb4e07332344/494e4594-5305-4b0c-936c-49aafbc17364_rw_1920.png?h=90481c66ef20708c39ba0f9ebe42fd86)
Annotated wireframes were provided by the development team for the entire team to utilized to flush out any conflicts, issues or questions.
![](https://pro2-bar-s3-cdn-cf1.myportfolio.com/dafa4f64bb560f22ca16bb4e07332344/29a9cdbe-48c1-44b7-bc10-31af884cd7d6_rw_1920.png?h=bd3fc6b1acf82b4bfbdaddb419b77563)
At this point I started to create high fidelity prototypes based on the wireframes and user input. Creating the layout, color themes, iconography and style guide.
![](https://pro2-bar-s3-cdn-cf5.myportfolio.com/dafa4f64bb560f22ca16bb4e07332344/674dde9a-0d06-4e74-8271-d4412485487e_rw_1920.png?h=3038685f7ae060a5e5c28fc3b698cd59)
This is a screenshot of the site when it launched.
![](https://pro2-bar-s3-cdn-cf4.myportfolio.com/dafa4f64bb560f22ca16bb4e07332344/f933b65f-a026-4f9e-a95d-768a0299a44d_rw_1920.png?h=66c68bdf4a830f100bc7e719a1578789)
I designed the modal screens for gathering emails for the marketing funnel.
![](https://pro2-bar-s3-cdn-cf1.myportfolio.com/dafa4f64bb560f22ca16bb4e07332344/23986ae6-d374-4f0d-a640-78672a3f82f7_rw_1920.png?h=3a63b519f83a927f909f13d52b2a9cff)
My mock up for the log in screen.
![](https://pro2-bar-s3-cdn-cf6.myportfolio.com/dafa4f64bb560f22ca16bb4e07332344/7e427371-242a-4de0-96db-cb5304f7f968_rw_1920.png?h=c4596c16636463205364cde35543ffb6)
This is the log in screen from the live site after a subsequent style update but it is still close to the original concept.