![](https://pro2-bar-s3-cdn-cf1.myportfolio.com/f5035239-84a3-430e-a665-ad62b0a340b3/267a1428-2d38-48da-88bf-c8c6a0cc47d7_rw_1920.jpg?h=8db6dfa63fa8bb847c0966267ce896e2)
Planning
![](https://pro2-bar-s3-cdn-cf4.myportfolio.com/f5035239-84a3-430e-a665-ad62b0a340b3/5428c59a-e4e1-4e80-bbc0-7bcd4e70217e_rw_1920.png?h=91841207ed1c7db3e5863f65633d4691)
Elements of the website were identified and basic grids were developed.
I then created different block diagrams using the defined blocks. Sarah picked which ones she wanted to develop.
![](https://pro2-bar-s3-cdn-cf3.myportfolio.com/f5035239-84a3-430e-a665-ad62b0a340b3/4c745b63-b534-4c72-ac59-3892c31df6c6_rw_1200.jpg?h=79ac7aa5043b7f123b0788dfb56429e9)
![](https://pro2-bar-s3-cdn-cf3.myportfolio.com/f5035239-84a3-430e-a665-ad62b0a340b3/40cbfb5e-d5bb-41e6-8f94-9a2fbf0ac995_rw_1920.png?h=9fbcd6437b19003e1935f955618ba974)
I produced a couple of visuals to compare the different viewports.
They decided to concentrate on the mobile version.
Visual Design
First-sprint iterations for transitioning the GetMembers product from desktop to mobile and tablet.
![](https://pro2-bar-s3-cdn-cf6.myportfolio.com/f5035239-84a3-430e-a665-ad62b0a340b3/0e492c99-8096-4dd0-b578-24129bfc3f79_rw_600.jpg?h=c6e29a2a034746850c17bd8955a5793e)
![](https://pro2-bar-s3-cdn-cf6.myportfolio.com/f5035239-84a3-430e-a665-ad62b0a340b3/7dfc959e-4d4a-411f-aba6-e0600affd900_rw_600.jpg?h=7bd70c63df818790731e6f6a0b386e82)
![](https://pro2-bar-s3-cdn-cf4.myportfolio.com/f5035239-84a3-430e-a665-ad62b0a340b3/509085a7-8493-46de-88ba-17e7f1cb3abc_rw_600.jpg?h=041c0913ef2026718fd8b5e8bbe23e80)