-
Notifications
You must be signed in to change notification settings - Fork 1
Expand file tree
/
Copy pathindex.html
More file actions
124 lines (112 loc) · 6.01 KB
/
index.html
File metadata and controls
124 lines (112 loc) · 6.01 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
---
layout: default
title: Martina Tan, UX designer
---
<body>
<div class="container">
<div class="color-bg">
<div class="section-container grid">
<div id="landing-text">
<h1><img src="/assets/images/lace-flourish.svg" class="flourish"></img> Hi, I'm Martina! <img src="/assets/images/lace-flourish.svg" class="flourish"></img></h1>
<p>I’m a <strong>UX designer</strong> who thrives at the intersection of storytelling, social impact, and service transformation.</p>
<p>Since receiving my <strong>Master of Human-Computer Interaction</strong> at Carnegie Mellon University, I have been working at MO Studio to make the U.S. government more <strong>sustainable and human-centered</strong>.</p>
<div class="button-wrap"><a href="/about"><button class="button clickable">learn more about me <span class="arrow-right"></span></button></a></div>
</div>
</div>
</div>
<div class="section-container grid" id="work">
<h2 class="section-title">selected work <img src="/assets/images/lace-flourish.svg" class="flourish"></img></h2>
<div class="work-preview flex" id="note">
<p><i><b>Note:</b> I've been busy and haven't taken time to fully update this site! Stay tuned for case studies about my work with the U.S. Department of State and U.S. Dept. of Veterans Affairs. Contact me for more details. Thank you!</i></p>
</div>
<div class="work-preview flex" id="fame">
<div class="preview-img flex-col-50 figure-wrap clickable">
<a href="/dei-explorer/">
<figure class="thumbnail">
<img src="/assets/images/fame-thumbnail.png" alt="Preview of the DEI Explorer prototype against a blurred photo of people at a whiteboard, with the FAME and CMU HCII logos" loading="lazy" />
</figure>
</a>
</div>
<div class="preview-text flex-col-50">
<h4>DEI Explorer</h4>
<h3>Building a web-based service for increasing transparency into DEI policy at schools</h3>
<h5>UX and service design / UX research / product management</h5>
<div class="button-wrap"><a href="/dei-explorer/"><button class="button clickable">view project page <span class="arrow-right"></span></button></a></div>
</div>
</div>
<!-- <div class="work-preview flex" id="project-your-future">
<div class="preview-img flex-col-50 figure-wrap">
<figure class="thumbnail">
<img src="/assets/images/cmnh-thumbnail3.png" alt="Four sketches from an experience map, set against a blurred interface, with CMNH logo in the corner" loading="lazy" />
</figure>
</div>
<div class="preview-text flex-col-50">
<h4>Project Your Future</h4>
<h3>Teaching Carnegie Museum visitors to reflect on their role in Earth’s climate future</h3>
<h5>UX research / interactive exhibition design</h5>
<div class="button-wrap"><a href="/#work"><button class="button">coming soon</button></a></div>
</div>
</div> -->
<div class="work-preview flex" id="pennmac">
<div class="preview-img flex-col-50 figure-wrap">
<a href="/penn-mac/">
<figure class="thumbnail">
<img src="/assets/images/pennmac-thumbnail1.png" alt="A drawing of Nonna's Secret Recipes shelf idea, against a blurred photo of a grocery interior, with Pennsylvania Macaroni logo" loading="lazy"/>
</figure>
</a>
</div>
<div class="preview-text flex-col-50">
<h4>Nonna's Secret Recipes</h4>
<h3>Engaging Penn Mac shoppers with authentic Italian cuisine through community member expertise</h3>
<h5>service design / UX research / video production</h5>
<div class="button-wrap"><a href="/penn-mac"><button class="button clickable">view project page <span class="arrow-right"></span></button></a></div>
</div>
</div>
<div class="work-preview flex" id="scratchjr">
<div class="preview-img flex-col-50 figure-wrap clickable">
<a href="/scratch-jr-connect/">
<figure class="thumbnail">
<img src="/assets/images/sjr-thumbnail.png" alt="Preview of ScratchJr Connect interface at different stages, against a blurred group picture, with DevTech logo in the corner" loading="lazy"/>
</figure>
</a>
</div>
<div class="preview-text flex-col-50">
<h4>ScratchJr Connect</h4>
<h3>Compiling curated ScratchJr teaching materials for parents and educators</h3>
<h5>UX design / project management / web development</h5>
<div class="button-wrap"><a href="/scratch-jr-connect/"><button class="button clickable">view project page <span class="arrow-right"></span></button></a></div>
</div>
</div>
<div class="work-preview flex" id="tems">
<div class="preview-img flex-col-50 figure-wrap clickable">
<a href="/tems-shift-tracker/">
<figure class="thumbnail">
<img src="/assets/images/tems-thumbnail.png" alt="Preview of 3 screens of the TEMS Shift Tracker interface, against a blurred sketch page, with Tufts EMS logo in the corner" loading="lazy"/>
</figure>
</a>
</div>
<div class="preview-text flex-col-50">
<h4>TEMS Shift Tracker</h4>
<h3>Centralizing schedule management for a roster of Emergency Medical Technicians</h3>
<h5>mobile UI design / prototyping / usability testing</h5>
<div class="button-wrap"><a href="/tems-shift-tracker/"><button class="button clickable">view project page <span class="arrow-right"></span></button></a></div>
</div>
</div>
<div class="work-preview flex" id="misc">
<div class="preview-img flex-col-50 figure-wrap clickable">
<a href="/other/">
<figure class="thumbnail">
<img src="/assets/images/other-thumbnail.png" alt="Three visuals of a tech logo design, an industrial design sketch page, and a colored pencil portrait" loading="lazy"/>
</figure>
</a>
</div>
<div class="preview-text flex-col-50">
<h4>Other</h4>
<h3>Check out other things I've made!</h3>
<h5>visual design / print / studio art</h5>
<div class="button-wrap"><a href="/other"><button class="button clickable">go to gallery <span class="arrow-right"></span></button></a></div>
</div>
</div>
</div>
</div>
</body>