Apple's Online Store offers customers to view and purchase their entire product line from the web. When a product is purchased, communication via email is sent to the customer during several key points in the transaction lifecycle.
Overview
Transaction emails have evolved through the years but never were they designed to be responsive. Customers viewing their emails on mobile devices resulted in pinch-zooming, scrolling, and resizing. The experience was far from Apple's key standards, therefore it was paramount to restructure and redesign the various emails to adapt to the various devices and multiple viewports.
![](https://cdn.myportfolio.com/e7430b21-b93b-46ae-99e8-b8c29d87855c/4448ff1b-ac91-41ab-85ed-85324dfe5314_rw_1920.png?h=55efb16a5e6a20abbfeae24eda034e97)
Break it down.... and rebuild
There are countless variations of transactional emails sent to customers on a global scale. By doing a heuristic analysis, identifying common key components, subcomponents and consolidating custom modules and unique patterns, I was able to systemize a framework for a clean, harmonious, responsive design to adapt to all devices universally.
![](https://cdn.myportfolio.com/e7430b21-b93b-46ae-99e8-b8c29d87855c/48a8b3c4-c94c-466d-ab76-bc0277d90dba_rw_1920.png?h=acfd14baad1c9704e0600bd4689bb5e9)
AUDIT : Consolidating and Systemizing
![](https://cdn.myportfolio.com/e7430b21-b93b-46ae-99e8-b8c29d87855c/fdd4ed84-318b-4d79-a8d1-decdbb18f982_rw_1920.png?h=2e625d2bcd01cce08cbe88cbde7b45f1)
![](https://cdn.myportfolio.com/e7430b21-b93b-46ae-99e8-b8c29d87855c/f3a7e8d0-2448-4e82-a494-b31a9fb2c5e0_rw_1920.png?h=71ff3fa8e347aeafa7f92fe3a0f947e3)
![](https://cdn.myportfolio.com/e7430b21-b93b-46ae-99e8-b8c29d87855c/478ce587-e958-404e-9094-7eaa88719533_rw_1920.png?h=80a55ac27719b7b4f286bdba830da114)
![](https://cdn.myportfolio.com/e7430b21-b93b-46ae-99e8-b8c29d87855c/b8f0e88c-4692-4501-848c-9f72c2731fce_rw_1920.png?h=26d925162b81cee820f26ddac8320b40)
![](https://cdn.myportfolio.com/e7430b21-b93b-46ae-99e8-b8c29d87855c/399602e7-bc90-4a57-80ab-97e30a9e5a6b_rw_1920.png?h=b5482c49f559cdb1c09e236598aa7f43)
![](https://cdn.myportfolio.com/e7430b21-b93b-46ae-99e8-b8c29d87855c/d26e8d52-b372-40af-8ce0-e13af166fa03_rw_1920.png?h=8ea1c0c60b751f41ef380f09eedfae8a)
![](https://cdn.myportfolio.com/e7430b21-b93b-46ae-99e8-b8c29d87855c/92b5bfd2-a9a9-4fc8-905d-ad94ff830df2_rw_1920.png?h=976ec04f36d7d9efaab2d7cd66169e63)
The Hand off: Designer to Developer
Detailed specifications and clear communication are paramount when delivering final designs to developers. It is the key component the successful development of the design.
![](https://cdn.myportfolio.com/e7430b21-b93b-46ae-99e8-b8c29d87855c/e2f1388a-5006-4ec3-807c-e39b1fe4b173_rw_1920.png?h=44ba72dfcb89f338aceb57c7e277fe9a)
![](https://cdn.myportfolio.com/e7430b21-b93b-46ae-99e8-b8c29d87855c/8c746d2c-98a3-4628-8722-3519c2164c70_rw_1920.png?h=1d66f52c4fc3dd4dceb23bb029c6dd79)
Better Purchasing Experience
The new designs were successfully injected into Apple’s Standards Guidelines and resinated the Apple brand currently releasing globally.
![](https://cdn.myportfolio.com/e7430b21-b93b-46ae-99e8-b8c29d87855c/be1e5f73-f591-4397-8e9b-f58d0537d131_rw_1920.png?h=7d5f0ac92d38e7c79bb8843c9d5d1dba)
![](https://cdn.myportfolio.com/e7430b21-b93b-46ae-99e8-b8c29d87855c/62b833d0-337b-4a0d-90c8-c84a2e793d0f_rw_1200.png?h=41f1c1053775c28896a5110d433cba63)