Technology Used:
Figma, Storybook, React. Sass, TypeScript
My Role:
As the Senior UI/UX Designer, I was provided with the tech specs to translate into multiple views and showcase different experiences and user journeys. All of these views were made up of previously designed and developed components from the Willow UI project, so all designs were made with keeping Storybook, React, Sass, and TypeScript in mind for development purposes.
The Designs:
All designs were built in Figma based on common UI/UX principles and data collected from user surveys and interviews.
Login Page
![](https://cdn.myportfolio.com/8637b0c6-8c9c-4504-91a7-be6130ec6b05/7e08ec7d-56bb-4e5a-b0e0-3df29f73fad2_rw_1920.png?h=239a193d32a71e5ba85f3bac6cbf0c56)
Dashboard
![](https://cdn.myportfolio.com/8637b0c6-8c9c-4504-91a7-be6130ec6b05/ee4927ed-5f3e-4da5-a3c1-fd00d291576b_rw_1920.png?h=0ba1bd746e75fc258aaaa89ecb300210)
Header/Navigation Component
![](https://cdn.myportfolio.com/8637b0c6-8c9c-4504-91a7-be6130ec6b05/b49b80df-e0d4-4b08-9c6a-072d74ce5df8_rw_1920.png?h=4ed111c65a7c118159a9508d7a8527b6)
Menu Components
![](https://cdn.myportfolio.com/8637b0c6-8c9c-4504-91a7-be6130ec6b05/a2519e63-8dea-47bc-9d44-699451de3506_rw_600.png?h=5eb85ab2e6368f8dba771b0f05dc9bfe)
![](https://cdn.myportfolio.com/8637b0c6-8c9c-4504-91a7-be6130ec6b05/20c3a920-a64d-43a1-90ae-5f227e0ba710_rw_600.png?h=1a17371adf376e98ce66495990f46376)
![](https://cdn.myportfolio.com/8637b0c6-8c9c-4504-91a7-be6130ec6b05/728c1422-8aa4-4431-bd34-4d829b3fdbcc_rw_1200.png?h=784f181bac3ccfc77e8d95ed1bbe2f98)
Settings: General Settings
![](https://cdn.myportfolio.com/8637b0c6-8c9c-4504-91a7-be6130ec6b05/448d6e53-5634-4629-85bd-869d532266d9_rw_1920.png?h=21f3ebc21cbfffa6576b61de73b93948)
Settings: User Permissions
![](https://cdn.myportfolio.com/8637b0c6-8c9c-4504-91a7-be6130ec6b05/18fbb918-e1ee-411d-ad2c-dc89cb812ba5_rw_1920.png?h=01a98945ea817ab3b9d518ca4f1b6623)
Settings: Notifications
![](https://cdn.myportfolio.com/8637b0c6-8c9c-4504-91a7-be6130ec6b05/141ad0b0-2f67-4f17-b6ef-164ef31e4bae_rw_1920.png?h=a3f269531991ef0372da66a6ed40b49b)
Settings: Company Information
![](https://cdn.myportfolio.com/8637b0c6-8c9c-4504-91a7-be6130ec6b05/88cd6159-fed5-4bee-8dd1-56aa5b8c9852_rw_1920.png?h=836332efefce4fd16c148cb7810be3fd)
Settings: Store Information
![](https://cdn.myportfolio.com/8637b0c6-8c9c-4504-91a7-be6130ec6b05/b69f84d2-21c8-45e2-aadf-65d9f72bd4f7_rw_1920.png?h=4a3fc80a05c5a5ec920b6d070221552e)
Settings: Integrations
![](https://cdn.myportfolio.com/8637b0c6-8c9c-4504-91a7-be6130ec6b05/6e78dc94-e57e-4d9d-83a5-f0d6f8fd65ea_rw_1920.png?h=887d92d5f749bfbce718dee064b03e0d)
General Shell for Existing Products
![](https://cdn.myportfolio.com/8637b0c6-8c9c-4504-91a7-be6130ec6b05/a1c88f13-3f62-4d93-a2c6-2f0bb6c93496_rw_1920.png?h=3cbc45573000f8d703901d24a1d8e7e8)
Mobile Design Examples
![](https://cdn.myportfolio.com/8637b0c6-8c9c-4504-91a7-be6130ec6b05/c06de081-f648-43af-868a-7f704fd033aa_rw_1200.png?h=f53b6c195f9952f2fedc58ade3d8fcaf)
![](https://cdn.myportfolio.com/8637b0c6-8c9c-4504-91a7-be6130ec6b05/605b74a8-96a3-4262-91fb-f9d53623515f_rw_1200.png?h=7bb832dedae370d1ad6e75bbbdafb563)
![](https://cdn.myportfolio.com/8637b0c6-8c9c-4504-91a7-be6130ec6b05/73b9ce77-7f66-4049-bdd9-7ea2181a6d49_rw_1200.png?h=86c4e90c436eb22061abf30968a82ce7)
![](https://cdn.myportfolio.com/8637b0c6-8c9c-4504-91a7-be6130ec6b05/c9ad0309-fcdd-46d0-9170-f62857a43b13_rw_1200.png?h=729b1269ceb2776dee6a3096a058ab19)
![](https://cdn.myportfolio.com/8637b0c6-8c9c-4504-91a7-be6130ec6b05/626462ec-d60d-4100-b27a-87df1b7a212f_rw_1200.png?h=3c7c61497edd7636aeb7281fb7066531)
![](https://cdn.myportfolio.com/8637b0c6-8c9c-4504-91a7-be6130ec6b05/1624358f-f4a2-46d8-8176-9b9b766d206c_rw_1200.png?h=73a55e3550789997fee9bd2aef06cd8a)
![](https://cdn.myportfolio.com/8637b0c6-8c9c-4504-91a7-be6130ec6b05/fd12eb96-bc6c-488e-88cd-5de2b5c3c614_rw_1200.png?h=2ade2bf135b29de2b4d07d594e120929)