R
Rachel Nguyen
Rachel Nguyen
bio
UX + Product Designer & Developer
home
Los Angeles, CA
email
rachelnguyn@gmail.com
note
Rachel Nguyen is a UX + Product Designer and Developer at UCLA who always looks forward to work at the vanguard of emerging new technologies and aesthetics. Her ability to bridge the gap between design and development has embodied a design philosophy that centers around a balance between practicality and playfulness; function and form. She strives to optimize the user experience, while simultaneously curate solutions that are both technically feasible and visually desirable. Feel free to chat with her over a game of Tetris! :D
grounded
JAVASCRIPT
FIREBASE
ROLE
With a team, I worked as a developer to create Grounded, a mobile app, using React Native and Expo. Inspired by the Japanese concept of 'Ikigai', Grounded is aimed to be a social-media platform and journaling application geared towards nature appreciation and mindfulness. I built, refined, and finalized intuitive front-end components, as well as helped integrate Firebase to store and fetch user-generated content.
THE
HAPPINESS
FACTOR
Product Design
A data-driven narrative about the distribution of happiness across the globe.
Curating data and designing are natural allies. As the lead Web Designer for this project, I utilized innovative visualization to deliver data-oriented content by concentrating on refining styles, elements, navigation, and animations. I wanted the interface of our website to be cohesive and seamless such that information, even in large bulks, would be engaging and elegantly presented. On that note, I also wanted to make the website interactive so that our content could be both more easily detectable and intimately explored by our readers.
OVERVIEW
Problem: Clutters of Text
The aim of this project was to tell a story about data we analyzed from the 2020 World Happiness Report. The result of this was comprehensive; we had so much information to share, which is often prone to a regurgitation of text that is tiring on the eyes, disengaging, and hard to narrow down on. However, within each page, large chunks of information tie into one another, so separating them into individual pages isn't ideal. Still, each chunk discusses content in its own way, and often at extensive lengths, so it should be broken down.
Low-Fi Prototype
Solution
To maintain a smooth transition between varying, yet related chunks of information, I kept corresponding information within a single page and decided to focus on organization and typography for the best reading experience.
I first added a short description about each page below its title, so users can anticipate what information will be provided (and how all of it relates) without any ambiguity. In designing this, along with all other texts that followed, I took great care in selecting font style, color, size and creating overall balance to avoid information-overload.
I also added a “Back to Top” functionality throughout the entire site, which allows the user to scroll towards the beginning of the page, along with a second navigation bar at the foot of the page, for an effortless exit out of a long page.
On our lengthy pages, I decided to implement anchor links (e.g. scroll to..., jump to...) at the top in order to divide chapters of information. These will provide an efficient, structured path towards answers to our readers' curiosity.
Mid-Fi Prototype: Narrative
For the Narrative page, I didn't want users to have to constantly transition between the Narrative and the Sources pages to understand where our information was sourced. To solve this, I decided to add a References element at the bottom of our Narrative page, which is then anchored to all of our in-text citations — once again, for quick navigation.
Mid-Fi Prototype: Data Critique
Mid-Fi Prototype: About
For the About page, where information was meant to be read chronologically, I excluded the anchor links and opted to divy up information by numbering and wrapping chapters of information in individual boxes. This way, readers can understand what differentiates information, yet delivery remains as intended.
Mid-Fi Prototype: Sources
For the Sources page, I went against our team's original plan to input the entire annotated bibliography (an 8-page document), which could have made it exhausting for readers to identify the origins of our research. Instead, I incorporated an external link to download its PDF, and then included the non-annotated bibliography — a much shorter, though still complete, citation of our sources. This gives readers a comprehensive, yet concise overview of where we derived our content, along with the choice to dig deeper about the accuracy, relevance, and quality of our sources. I wanted users to be able to digitally explore our curation at their own hands, as our project was meant to be a public opportunity for reflective analysis.
JAVASCRIPT
SpotifyDms
With Next JS, I authenticated and pulled from the Spotify API to create a funny, personalized experience for Spotify users utilizing their top artists as phone contacts.
This project is currently only available locally.
This project is currently only available locally.
Users are prompted to sign in with their Spotify credentials, where permissions are granted for access to user information (e.g. display name) and top artists for the month.
A component, built entirely in raw CSS/HTML, that mimics the iPhone Messages application appears with users' top seven artists as contacts. Funny messages appear below artists' names, as if they were messaging the user.
TurtleMania
Grounded
Happiness Factor
SpotifyDms
Shoku