Shana HadiHello! I'm Shana :)
Designer, Developer, Storyteller.
I am dedicated to understanding user needs, creating effective solutions, and engineering all aspects of the user experience and interface. Let's talk!
Designer
I apply human-centered design thinking to create intuitable and purposeful products.
Skillsets
- Needfinding
- Concept models & mapping
- Rapid prototyping
- Digital interface design (UI, UX, Figma wireframes!)
- RITE usability testing
- Data visualization
- Game design
- 3D CAD modeling, laser cutting, & more!
Developer
I bring ideas to life with modular and well-tested code.
Favorite Tools
- JavaScript (React, Node, Angular, D3)
- HTML & CSS
- Python (Django)
- AWS (DynamoDB, S3) & Google Firebase (Cloud Firestore)
- Game engines (Twine, Ren'Py, Unity)
- Git (GitHub, GitLab)
- Whatever I need, I can learn!
Storyteller
I see the world through stories, and I love telling them too.
Interest Areas
- Creative writing (speculative fiction)
- Narrative-driven games (ludonarrative harmony!)
- Character design & worldbuilding
- User journey maps & design docs
- Data analysis & journalism
- Reviews & reflections
- And so much more!
My Projects
Overgrowth: a serious game on sustainable urban development
In a three-week sprint, my team and I created a cooperative systems board game that teaches players about the challenges urban planners face when designing sustainable cities. We extensively prototyped, playtested, and iterated, with special attention to the information design in our rule sheet and onboarding to support our players' understanding of the game and key concepts!
You and two other players are tasked by the state governor to create a "pioneer city" with net negative carbon emissions, reimagining a future where we work together to help resolve the climate crisis and live in harmony with nature. Use tactile pieces and build a model city before your eyes, see the short-term and long-term consequences of your urban planning, and get in the mindset (and heed the call to action!) of balancing human needs with the limits of the environment!
Read our case study here, which documents our design process, Figma-fied instruction sheets, and "collector's edition"!
with what eyes: an interactive speculative fiction on cyborgs, generative language models, and ethics
In three weeks, I created a narrative-based game, and prequel to my thesis e.l.i.z.a., that examines the impact of human augmentation and generative language on politics, especially with our preexisting human biases in perception toward queer and feminine figures.
You play as Eliza, a self-effacing former Silicon Valley tech worker, who is hired to create a compelling persona for Ada, a lawyer and cyborg celebrity who hopes to run for office and distance herself from the shadow of her extremely wealthy husband. Eliza and Ada embody very different notions of the "cyborg" (a networked being), and while the game begins as an adversarial interview, it progreses into an "understanding" of how every body is a battleground.
“With what eyes" do we claim to see?
corporate vision: a serious game on surveillance capitalism
In a two-week sprint, my team and I created a competitive social game that teaches how corporations can use customers’ digital footprints to construct personas for more accurate targeted advertisements, contributing to the rise of what Professor Shoshana Zuboff calls “surveillance capitalism.” Players take turns as corporations that pitch ads based on "digital footprint" cards (like old receipts) to a customer who judges which advertisment would pique their interest.
We aimed to raise awareness on corporate data-mining, model the predictive algorithmic system for "speculation on human futures," and inspire conversations on digital surveillance and its inextricable ties to capitalism.
ARCH: a Unity VR "thin slice" game for education, with Meta R&D
In under twenty weeks, partnering with Meta's Virtual Reality (VR) R&D lab (Global Historical Archive), my team and I explored how we could use the emerging medium of VR to facillitate long-lasting appreciation of and respect for world heritage sites. I immersed myself in the breadth of needfinding, ideation, prototyping, development, and product management.
We created a Unity 3D “thin slice” proof-of-concept prototype at Stonehenge, with a dose of magical realism as "artifacts have stories." Some of our major user insights include how to "design for delight" and reward exploration within a scalable game loop, and solidifying a lofi to hifi prototyping framework for speedy VR development.
We won first place at the 2022 Stanford Senior Software Project Demo Day! :)
Read our case study here, which documents our extensive human-centered design process and key insights!
The History of You: an interactive explainer on intergenerational trauma
Within ten weeks of designing / developing interactive explainers about mental health (with a focus on intergenerational trauma) in autumn 2021, I immersed myself in the breadth of UI/UX research, prototyping, and web development. This project took place in 3 stages:
1) First, I conducted several user interviews, designed the information flow and interactive elements, and wrote the overarching narrative and details for the interactive explainer (an interactive fiction in Twine, told in second-person across 3 generations). Part 1 write-up!
2) Second, we researched 30+ supporting academic articles and collated these resources through a website we "hand-coded" from scratch without outside libraries using React.js, HTML/CSS. Part 2 write-up!
3) Lastly, we designed, prototyped, playtested, and finalized a print-and-play healing-centric board game "From Roots to Shoots" that facillitated building interpersonal connections and enacted the process of healing from trauma through removing "trauma rocks" and growing flowers. Part 3 write-up!
With our brand emphasis on grassroots and healing, we sought to center diverse second-generation immigrant perspectives in our research, choosing to use our own handmade, nature-oriented branding that we polished on Figma.
Go to the final website here, which has the interactive story and print-and-play board game!
Civic Digital Fellowship at the U.S. Census Bureau
Over ten weeks, plus a six-week part-time contract extension, I solo designed and developed a full-stack automated program to load in census survey data and process tabulations for the project’s deliverable with Django, Angular, HTML/CSS. A full expansion of this foundational code that helps process the allocation of 300+ million dollars to state and local governments will reduce analysts' manual work by 60-70%.
Wanderlust: explore a new route with whimsy
Over eight weeks of designing / developing with three teammates in spring 2021, we created Wanderlust, an iOS app that offers a unique outdoor exercise experience encouraging you to explore your local area. The app accepts a user's location and a desired distance, and will generate a semi-random route for the user to take for their run or bike ride! The app will also keep track of your past activities as well as the routes of other community members, while providing insightful statistics about the routes and your habits.
We implemented our app with React Native and Firebase, with the Google Maps and Directions API to support our novel route generation "8-segmented legs algorithm" (map 8 possible vectors of 1/4 distance from the origin, divide each vector with 7 waypoints, assign a score based on length, and return the best vector and the best orthogonal vector leading from the origin; connect their two non-origin endpoints in the final route for a loop).
ArtWIP: Hue are you? A journey through abstract paintings
Over four weeks of designing / prototyping / testing with four other teammates in spring 2021, we created a narrative-based walking simulator game that challenges the standard way to experience an abstract art painting, in which the player navigates the world of the canvas. Inspired by art movements such as Abstract Expressionism and De Stijl, we intend to emphasize the experience of being and moving within a space.
With art pieces such as Kandinsky's "Several Circles," the soothing soundtrack and narrative fragments further cohere the game and encourage player self-reflection and reexamination of types of space as they journey through the painting as a tiny blob. We hope art enthusiasts and casual gamers alike would regard this game as a novel, digital way to explore abstract paintings and the meditative emotions the original artworks evoke.
Check out our final case study write-up here, which describes our ideating / prototyping / playtesting!
Play the prototype demo here, implemented in Unity!
VocabRacer: an immersive, image-based language-learning app
Over ten weeks of rapid-fire user research and lofi, medfi, and hifi prototyping with three teammates in winter 2021, we designed and prototyped an immersive language-learning app where you can upload photos, and the app will use AI-powered image recognition to tag parts of the photo with vocab words in your target language. You can create units, play image-based games with friends, and set goals for yourself to improve over time!
We created paper and Figma wireframes for the lofi and medfi prototypes of the mobile app. We used React Native and Expo to implement the hifi prototype in conjunction with Google's Cloud Vision APIs for object recognition, object tagging, and Spanish-English translation.
Check out our final case study write-up, which describes the course of our design journey with user research and prototypes!
Election 2020 with The Washington Post's newsroom engineering team
Headline: an amazing learning opportunity in summer-fall-winter 2020-2021, during a truly unconventional election season!
Frontend: Collaborated with Post designers and engineers and implemented / updated several visual components in React, such as a vote estimate header, voting results status table, state polling averages table, ranked races tables, state page links, and more.
Backend: One super cool thing = diving into AWS to prototype and implement a race call Lambda in Python that would be activated upon vote provider updates to our DynamoDB table via streams; other steps included connecting it with and contributing to a text-generation repo, ultimately pushing updates to a Slack ElectionResultsBot webhook. I also wrote scripts to update DynamoDB entries and send processed data to the rendering engine... This came in quite handy during Election WEEK with race call updates for the central slack channel.
While the main page spread has since changed, check out one of the state pages!
austenmania: D3 data visualizations with NLP
Jane Austen (1775-1817) was an English novelist known for her wry wit, social commentary, and marriage plots, and she is one of my favorite authors. With my grounding in CS and English, I sought to implement a series of reader-led interactive data visualizations that would allow for a digitally "novel" way of reading her 700k+ words body of work.
I processed data via writing my own Python scripts with the nltk library, designed the article to draw from computational literary analysis strategies and my own close readings of the novels, and implemented the visualizations using JS/HTML/CSS and D3 (which I am continuing to learn)! This current article is a lightweight version, with more updates forthcoming.
Visualizations so far: 1) multi-novel paragraph chart, to view the novel shape as a glance and for word frequency searches across all 6 novels, along with a chapter-viewer for context. 2) diverging bar chart for topic (and theme) modeling comparisons between novels and the corpus as a whole. 3) line chart for main character mentions and their co-occurrences (i.e. the pattern of love interests and the foils) through "novel time."
Read the article and interact with the data viz!
Check out my code on github, which has D3 implementations + data-processing Python scripts!
NY Museum of Modern Art at a glance: exploratory data analysis
I have always wanted to visit the New York Museum of Modern Art, and I wondered what the metadata can reveal about the collection at a glance. I used the MuseumofModernArt github repo that I filtered down to 130,000 artworks, with a subset of 2366 paintings, during fall 2020.
Guiding questions: 1) Which years are represented by artwork, and what is the delay for the MoMA acquiring pieces? 2) Who are the painters with the most work at MoMA, what is their nationality and gender breakdown, and has female representation changed across time? 3) Lastly, how has modern art’s dedication to experimentation manifested in formal elements like width and height?
Major insights: Since the early 2000s, MoMA acquires more paintings per year than there are collection paintings created in that year. Approximately 49% of paintings are created by Americans; meanwhile, 87% of signed, non-group paintings are created by men as compared to 13% by women, which is slowly changing. Also, MoMA paintings tend to be wider than taller, even the grander ones.
I used Trifacta Wrangler to clean extraneous symbols and organize attributes, and visualized my results in Tableau.
poetricks: visualizing election results as poetry, "Rupi Kaur Race Calls"
Experimental project in React exploring how to use text-only poetic techniques, such as alignment, indentation, and repetition, to visualize election results, inspired from the work of poet Rupi Kaur and visual artist Christopher Wool, and my internship and mentors at The Washington Post.
Rupi Kaur Race Calls: Instapoetry is meant to be accessible and easy to read, and similarly, I used AP's 2018 House results to experiment with indentation (left: DEM win, right: GOP win) and streamlined the presentation of information with indented, widely-spaced lines so viewers could quickly tell which party won the seat.
Black Box Big Board: I drew from Christopher Wool's work with framed bold, large text and repeated elements to present 2016 presidential results as a mapping of 20 DEM states against 30 GOP states, with indented states (left: called for DEM, right: called for GOP) for a quick look at the nation at a glance.
Great reads (and star ratings) with Goodreads: exploratory data analysis with SQL and ML
Interested in how online, user-sourced book reviews can signal what is a "popular" book, I chose to explore what correlates with a higher # of ratings (as a placeholder for popularity, instead of skewed ratings values), using a forked dataset of Goodreads top 10k most-read books up until late 2017. Submitted for a final open-ended project for CS145 (Data Systems and Data Management) in fall 2019.
Insights: An affirmation that author names, established book tags, and # of users that mark the work to-reads correlate with popular books. The proportion of n-star ratings to all ratings also resulted in a lovely visual spread, but were at most suggestive that popular books have a higher proportion of 4-star and 5-star ratings.
I used Google Cloud Platform to run SQL queries and a machine learning logistic regression model for predicting the # of ratings, and I visualized results with Python and matplotlib.
Hugo and Nebula short stories: exploratory data analysis with NLP
Continuing from my research internship at Literary Lab in summer 2019, I had the opportunity to lead my own mini computational literary criticism study. I searched for changes in themes within 20 years (1999-2018) of Hugo- and Nebula-nominated short stories (corpus of 925k words), which could reflect the evolving composition of the voting population and their literary values (Hugo: voted on by fans, Nebula: by authors).
Major insight: Nebula short stories were more likely to use female-specific pronouns, suggesting a greater range of female-identifying characters, and perhaps the greater inclusivity of these awards (unlike the Hugos, with their Rabid Puppies scandal).
I scraped and cleaned the data with Python, ran several NLP topic models with Mallet, and visualized my results in Tableau.
Opposites Attract: prototype for a social platform promoting conversations across borders
As part of a UI/UX design project with two other teammates, I designed, prototyped, and ran user testing to create a social platform that connects pairs of Stanford students across the political spectrum to have an anonymous and respectful discussion of their beliefs. Submitted as a final open-ended group project for CS278 (Social Computing) in spring 2019.
This was made with "social bricolage," which means we pieced together a functional set-up from existing platforms, such as Google Forms, Google Docs, anonymous Facebook accounts, and Messenger chats in order to test the real crux of the matter: how can we intentionally design to foster bipartisan political conversations?
Stanford Daily Mobile App: frontend redesign for user engagement
I helped redesign The Stanford Daily mobile app during my CS independent study for fall-winter 2018-2019, working with faculty advisor Ann Grimes, the emerging Daily tech team, and Daily editors.
I prototyped and implemented a section navigation bar depicting active published writers, and also contributed to user profiles, push notifications, and geo-tagged articles map display.
Raspberry Pi A+: bare-metal plant protection program in C
Using the Raspberry Pi A+ and bare-metal compatible sensors, I explored a question that still boggles me, how can we remember to water our plants? I wrangled low-level hardware manuals and implemented a library in C to use soil moisture / temperature / water sensors to output information onto a mini-lcd display. Submitted as a final open-ended project for CS107e (Systems from the Ground Up) in fall 2018.
For nitty-gritty details, this involved writing in near-binary with bit manipulations, as the lcd display was turned on / off in sets of 8 Pi GPIO pins, with timer delays (such as 500 microseconds to signal data transfer).
Check out my code on github, as well as my bare-metal operating system modules. I will forever be astonished at implementing the function printf()!
shanaeh.github.io!
I designed and built this site with React.js and HTML/CSS, along with accompanying tools such as Webpack, Babel, and Express.
More projects are coming soon, and you can check out a few of my projects on github.
Until then, Casper the Corgi wishes you a refreshing day. :)