![](https://static.wixstatic.com/media/155a68_d5aaf8fcbb484ff9a5218dde2b0af410~mv2.jpg/v1/fill/w_1920,h_1440,al_c,q_90,usm_0.66_1.00_0.01,enc_avif,quality_auto/155a68_d5aaf8fcbb484ff9a5218dde2b0af410~mv2.jpg)
UXUI Revamp ––– 2018
Jebsen & Jessen
Role
Design Lead (Visual Design)
Tools Used
Sketch, Adobe Photoshop,
InVision, Jira, Miro
Summary
MHE-Demag required a B2B eCommerce experience that would grow brand awareness and enable their customers to self-serve as they lacked an online presence, missing opportunity to both educate users and encourage increased orders of their services and products.
![mhe-insitu.png](https://static.wixstatic.com/media/155a68_6b88a26766b145c8870f22d2c72b8858~mv2.png/v1/crop/x_0,y_620,w_4000,h_1584/fill/w_980,h_388,al_c,q_90,usm_0.66_1.00_0.01,enc_avif,quality_auto/mhe-insitu.png)
Awards
-
Finalist - eCommerce B2B Fulfilment
Asia eCommerce Award 2018
The Process
Discovery
-
Site Audit
-
Competitor Landscape
-
Goals & Ambitions
-
User Journey
-
Creative Exploration
Delivery
-
Wireframe
-
Visual Design
-
UAT
-
Style Guide
Creative Digital Exploration & Direction
Consists of selected designs and components at their exploratory stage.
![mhe Typography1.jpg](https://static.wixstatic.com/media/155a68_87d6985d83f64c23ac8f532549167127~mv2.jpg/v1/fill/w_965,h_543,al_c,q_85,usm_0.66_1.00_0.01,enc_avif,quality_auto/mhe%20Typography1.jpg)
![mhe Typography2.jpg](https://static.wixstatic.com/media/155a68_6d6aaad112f54c24a00c67dfd589e0f6~mv2.jpg/v1/crop/x_0,y_186,w_2880,h_1284/fill/w_978,h_436,al_c,q_85,usm_0.66_1.00_0.01,enc_avif,quality_auto/mhe%20Typography2.jpg)
![mhe Color Palette.jpg](https://static.wixstatic.com/media/155a68_209f399ab33143ba9b2984aadee0f42a~mv2.jpg/v1/crop/x_200,y_243,w_2450,h_1210/fill/w_907,h_448,al_c,q_85,usm_0.66_1.00_0.01,enc_avif,quality_auto/mhe%20Color%20Palette.jpg)
![mhe UI Component.jpg](https://static.wixstatic.com/media/155a68_b4ad8d8e8c85486aa95f0bf1862ad09a~mv2.jpg/v1/crop/x_24,y_0,w_2661,h_1614/fill/w_987,h_599,al_c,q_85,usm_0.66_1.00_0.01,enc_avif,quality_auto/mhe%20UI%20Component.jpg)
Modular Development
Design flexible modules that help cater to MHE-Demag huge catalouge of different requirements without reinventing the entire website.
![vds-home-mhe.png](https://static.wixstatic.com/media/155a68_e1fa298e56a049aa84be2e13de960b0d~mv2.png/v1/crop/x_0,y_3,w_1440,h_5262/fill/w_981,h_3585,al_c,q_95,usm_0.66_1.00_0.01,enc_avif,quality_auto/vds-home-mhe.png)
Mobile First Approach
![mobiles.png](https://static.wixstatic.com/media/155a68_c5a38850fd444e04b953654cf0ed392a~mv2.png/v1/crop/x_14,y_0,w_1319,h_2289/fill/w_945,h_1640,al_c,q_90,usm_0.66_1.00_0.01,enc_avif,quality_auto/mobiles.png)
Digital Transformation
Built with traditional B2C functionalities as well as specific B2B features. Users can view their online and offline order history, manage internal multi-step purchase approval processes, and use a quick order functionality to select numerous products at once.
![vds-dt-mhe.png](https://static.wixstatic.com/media/155a68_5fd80974b15a45d69f44e17176edfeee~mv2.png/v1/crop/x_0,y_10,w_1440,h_3544/fill/w_974,h_2398,al_c,q_95,usm_0.66_1.00_0.01,enc_avif,quality_auto/vds-dt-mhe.png)