NASA Eclipse Soundscapes
NASA Eclipse Soundscapes
Designed an interactive accessible map for the Eclipse Soundscapes website, allowing NASA citizen scientists to access the map and view eclipse information. The project particularly focuses on enhancing the experience of low-vision population.
Designed an interactive accessible map for the Eclipse Soundscapes website, allowing NASA citizen scientists to access the map and view eclipse information. The project particularly focuses on enhancing the experience of low-vision population.
ARISA Labs and NASA collaborated to make learning about eclipses accessible to all.
A project involving an interactive accessible map designed to guide citizen scientists to analyze eclipse data, ensuring that every observer, regardless of their physical abilities, could partake in this experience, particularly members of the Blind and Low-Vision community.
CLIENT
NASA, ARISA Labs
This is an NYU school project.
Role
UX/UI Design & UX Research
Team & Duration
Three NYU Designers under the guidance of Prof. Regine Gilbert.
Four Weeks
Tools
Figma
WAVE Accessibility Checker
Problem to solve
How might we create an accessible map on the NASA Eclipse Soundscapes website that is more than just a tool, giving access to eclipse information to everyone, especially, the Blind and Low-Vision community?
Solution preview
Through distinctive imagery, specific messaging & interactive features,
Mochi Mochi's website successfully communicates its unique food concept
to both customers and potential business partners.
Jump to final design ↓
View Figma prototype
Market Research
Before diving into designing, I first conducted market research to test the business concept.
I asked myself following questions:
Is there potential for Mochi Mochi food concept to work?
There are various types of ice creams – rolled ice cream, regular ice cream, ice cream sandwiches, but
not a customizable mochi ice cream – will this concept work?
Product Market Fit
There was no direct competitor in Philadelphia – no ice cream shop
that specializes in ‘create your own’ mochi ice cream.
Primary competitors were other ice cream shops in Philadelphia. They all had clear brand identity and targeted
specific customer need. But none offered customizable mochi ice cream.
Secondary competitors were mochi ice cream brands outside Philadelphia. These brands did not have store front,
supplied to grocery shops, and were online-first (only Mochi Doki had physical store).
None offered customizable
mochi ice cream.
Consumer Analysis
Young working professionals are health conscious, interested in
innovative flavors, and willing to spend on snacking.
Millennials through Gen Z enjoy new foods as well as customizing orders.
1
Snacking has increased since pandemic.
2
Mochi Ice cream market is on the rise with increased interest in innovative flavors.
3
Healthier snack options with portion control has been on the rise.
3
Sources
1. Glanbia Nutrionals,
Food Technology Magazine
2. Business Insider,
Fortune Business Insights
3. Entreprenuer.com,
Verified Market Research
USer persona
Target audience is quite diverse as it could be anyone interested in
trying a new food concept and any suppliers interested in partnering up.
User Persona Type 1: Anyone Interested in the Food Concept
Young Adults & Working Professionals
Goal
To find new snack items to try.
To affordably & easily purchase new snack items.
Need
Understanding the Mochi Mochi food concept easily by
navigating the website.
Children & Parents
Goal
Parent: To affordably & easily purchase new snack
items to satisfy child’s cravings.
Child: To convince parent to buy snacks.
Need
Both: Understanding the Mochi Mochi food concept
easily by navigating the website.
User Persona Type 2: Anyone Suppliers Interested in Partnering
Local Ice Cream Shops
To supply the ice cream filling.
Goal
To partner with local business to advertise own brand
and to make profits.
Need
To easily navigate the website to understand the food
concept and be persuaded by its business potential.
Large Scale Suppliers
To supply the mochi dough.
Goal
To spot potential business and marketing opportunity
in new, growing brands.
Need
To easily navigate the website to understand the food
concept and be persuaded by its business potential.
Feature prioritization
Having defined business & user goals and identified target audience,
CEO and I listed all relevant features and prioritized them for the MVP.
Listing all features in the order of priority.
Organizing the must-have & should have features into
the website’s navigation.
️ Challenge: Negotiating the 'Nice to have' Customer Survey Feature
CEO wanted to include survey as another main CTA in the navbar. I pushed back and convinced him having
one main CTA (one main goal) will be more effective in gathering user’s focus and interest. Therefore, we
settled on having the survey available as a link in the footer.
Feature Highlight 1: Sign Up for Free Mochi Ice Cream
To drive attendance on the opening day,
‘sign up for free mochi’ was a vital feature
the CEO wanted incorporate in the website.
Feature Highlight 2: Mochi Customizer
Users need to interact and see how mochi ice cream
customization works. While not available for online order,
the mochi customizer replicates the in-store process of
choosing ice cream filling, dough, and toppings.
Referenced how restaurant, such as Sweetgreen, Chipotle,
& Cold Stone allow users to customize their orders on
their on their websites.
️ Challenge: What happens after the user interacts with the mochi customizer?
Because online order was not within the scope, we brainstormed creative solutions to connect online
interactivity with physical store visits. Ultimately, we decided on sending mochi creation illustrations via
email, redeemable for free mochi ice cream upon in-store visits. Sorting out how these illustrations will be
created posed further brainstorming.
Mid-fidelity wireframes
Designed mid-fidelity wireframes with dual focus: streamlining sign-up
flows to target potential customers and crafting compelling narratives
to engage potential business partners.
Visual design
Utilizing rounded logo & typography along with bright colors
communicates the playful, fun, & creative nature of Mochi Mochi.
The logo, featuring flowing letters with playful characters in the 'o' and 'i', reflects the customizable nature of the
brand. Bright, warm colors such as yellow, blue, brown, and beige, along with orange accents, coupled with
brushstroke textures, evoke a sense of creativity and fun while highlighting the 'create your own' aspect of the
customizable mochi ice cream concept.
Usability testing
Using specific imagery, improving interaction, streamlining copywriting
& navigation to clearly communicate the unique food concept.
After multiple rounds of feedback & working sessions with the client, I conducted 5 usability testings with the the
final selected designs. During the zoom facilitated usability testings, I asked feedback on following:
Visual design and identity of the website
Ease of sign up flow
Interactivity of mochi customizer
In all, does the website communicate what the brand mochi mochi does?
Jump to final designs ↓
View Figma prototype
1. Homepage Iterations: Choosing Appropriate Imagery & Improving Messaging
First Round : Pre-Launch Iterations
Issue: 3/5 users mentioned that mochi ice cream
images look exactly like the general mochi ice creams
sold at grocery stores.
Solution: Because actual product photography was not
available, I searched for stock images that show variety
of ice cream filling, dough options, and toppings.
Second Round: Post–Launch Iterations
Issues: Feedback on typography choice, inconsistencies
in type scale, use of generic vector art, and lack of
social proof were given.
Solution: Changed typeface from Merriweather to Sora.
Condensed copywriting, included actual photos of
Jordan and testimonials.
2. Contact Us & Take a Survey Iterations: Eliminating Distractions from the Main CTA
First Round : Pre-Launch Iterations
Issue: 2/5 users felt having both the sign up flow and
contact us page were redundant. They serve same
function of collecting users' interest & contacts.
Solution: Removed 'Contact Us' from the nav bar and
placed inside footer only, allowing users to direct
attention to just one call to action.
Second Round: Post–Launch Iterations
Issues: Inconsistent messaging on taking the survey
confuses the users. 'Take a Survey' text links also
conflicts with the main CTA (sign up for a free mochi).
Solution: Completely removed 'Take a Survey' links
from internal page headers. Instead, revised messaging
in Contact Us page to transition into taking a survey.
3. Mochi Customizer Iterations: Clarification on Labels & Opportunity for Engagement
First Round : Pre-Launch Iteration
Issue: 4/5 testers asked clarification on the labels –
what it means to select 1 or 2 flavors. All 5 testers
asked what happens after clicking 'I'm done'.
Solution: Clarified language to denote just 1 flavor and
added a short explanation for the toppings. Also
included a confirmation message in green.
Second Round: Post–Launch Iterations
Issues: Small images made users squint to identity
each flavors. 'Thank you' message after clicking on 'I'm
Done' still fails to connect users to a store visit.
Solution: Larger images make it easier to identify
different flavors. Pop Ups for topping & detailed thank
you message appears, connecting users to a store visit.
Final designs
Introducing Mochi Mochi, a create-your-own mochi ice cream
shop, coming soon to Philly!
View Figma prototype
Creating Your Own Mochi Ice Cream with the Mochi Customizer
00:24
A Walk-through of the Entire Mochi Mochi Website
00:36
Check out the launched website*.
Go to mochidelight.com →
Check out Figma redesigns.
View Figma Prototype →
*After launching the website on WordPress, I revisited the designs to make further improvements.
Post-launch iterations as shown above. Currently re-developing the Figma redesigns on Webflow.
Further thoughts
Challenges I faced
Closely collaborating with a Wordpress developer, I first-hand experienced the
importance of documenting designs for a seamless handoff.
Consistency in my
designs and in the language I use to document the designs was crucial
. And
communicating the documentation was even more important. We used Google
meets or left short loom videos to ensure we were all on the same page.
Another huge part of my job as a designer was
explaining my design decisions
clearly and even pushing back on certain requests by the client.
For example, the
client wanted to include taking a survey as another CTA in the hero section as well
as in the navbar. I had to push back, highlighting the importance of having one main
focus and goal, which is to encourage users to sign up for free mochi ice cream.
Having a strong visual identity was vital for a new food concept like Mochi Mochi. I
spent some time researching how popular ice cream brands establish themselves
through logo, color, typography, messaging, and imagery. Applying best practices
from the research, I aimed to create a cohesive and distinguishable brand.
Next steps
Following the website's launch on Wordpress (mochidelight.com),
I revisited the
designs to make further enhancements
. Having received valuable feedback from
design peers, I was able to make significant improvements. Ultimately, I have
decided to rebuild the website on Webflow for easier long-term maintenance and
full end-to-end control over the design.
Moreover, I'm currently researching how to implement QR codes in the email
confirmation after user signs up for a free mochi ice cream. Additionally, I'm ironing
out the technical details of the mochi customizer, including the creation of specific
illustrations for each customized mochi ice cream variant.
Iterations of Homepage
Initial drafts looked very different. Went through several iterations to improve typography, spacing, and balance.
See more of my case studies ↴
Agency work:
Parks Fly Shop
End to end mobile app:
Shoptimize
Feature add:
Starbucks app
Passion discovery:
IFU Reduction Project
Back to home →
Thanks for stopping by!
Feel free to reach out at
psoonsoo@gmail.com.
Currently open to new opportunities!
Resume
Made with 🥯 + ☕️ © 2024 Spark
ARISA Labs and NASA collaborated to make learning about eclipses accessible to all.
A project involving an interactive accessible map designed to guide citizen scientists to analyze eclipse data, ensuring that every observer, regardless of their physical abilities, could partake in this experience, particularly members of the Blind and Low-Vision community.
CLIENT
NASA, ARISA Labs
This is an NYU school project.
Role
UX/UI Design & UX Research
Team & Duration
Three NYU Designers under the guidance of Prof. Regine Gilbert.
Four Weeks
Tools
Figma
WAVE Accessibility Checker
Problem to solve
How might we create an accessible map on the NASA Eclipse Soundscapes website that is more than just a tool, giving access to eclipse information to everyone, especially, the Blind and Low-Vision community?
Solution preview
Through distinctive imagery, specific messaging & interactive features,
Mochi Mochi's website successfully communicates its unique food concept
to both customers and potential business partners.
Jump to final design ↓
View Figma prototype
ARISA Labs and NASA collaborated to make learning about eclipses accessible to all.
A project involving an interactive accessible map designed to guide citizen scientists to analyze eclipse data, ensuring that every observer, regardless of their physical abilities, could partake in this experience, particularly members of the Blind and Low-Vision community.
CLIENT
NASA, ARISA Labs
This is an NYU school project.
Role
UX/UI Design & UX Research
Team & Duration
Three NYU Designers under the guidance of Prof. Regine Gilbert.
Four Weeks
Tools
Figma
WAVE Accessibility Checker
Problem to solve
How might we create an accessible map on the NASA Eclipse Soundscapes website that is more than just a tool, giving access to eclipse information to everyone, especially, the Blind and Low-Vision community?
Solution preview
Through distinctive imagery, specific messaging & interactive features,
Mochi Mochi's website successfully communicates its unique food concept
to both customers and potential business partners.
Jump to final design ↓
View Figma prototype