I NAT YOU

Responsive Website

The responsive website "I NAT YOU" explores a surprise anniversary gift experience for a boyfriend, combining emotional storytelling with an intuitive and user-friendly interface to create a memorable digital moment.

OBJECTIVE

To design a digital platform that transforms anniversary gifting into an interactive experience
To create a clear and intuitive user flow that guides users through each step of the surprise
To enhance emotional impact through visual storytelling and interactive elements

FUTURE IMPACT

In the future, the “I NAT YOU” experience can be further enhanced by introducing a dedicated section that allows users to explore memorable moments through images from each year, creating a more structured and nostalgic storytelling experience. The passcode entry interface can also be refined to improve clarity, usability, and overall interaction flow. Additionally, enhancing the background design with subtle visual interactions and animations could create a more engaging and emotionally immersive atmosphere. Together, these improvements would strengthen user engagement, deepen emotional connection, and create a more seamless and meaningful digital experience.

DESIGN IMPROVMENT

After conducting usability testing, key issues related to text readability and content timing were identified. It became clear that typography needed to be optimized across responsive screen sizes, as some text appeared too small, affecting readability. Additionally, on-screen content was displayed too quickly, limiting users’ ability to read and process the information. To address these issues, a responsive typography system was implemented with appropriate font sizes for different breakpoints, and content timing was adjusted to allow for more comfortable reading. These improvements enhanced readability, accessibility, and overall user experience.

USER FLOW

I mapped out the user flow to create an engaging onboarding experience, guiding users through a passcode entry and an interactive question. The flow uses playful feedback for incorrect answers and leads to a meaningful reveal through a recap and hidden message, creating a memorable and emotional experience.

DESIGN SYSTEM

HIGH-FIDELITY WIREFRAME

USABILITY TESTING

A prototype was developed to evaluate the responsive website and overall user experience. The usability test was conducted with 5 participants to identify usability issues and interaction challenges.

ISSUE 1: TEXT READABILITY

Some text elements appeared too small on certain screen sizes, making it difficult for users to read content comfortably.

ISSUE 2: CONTENT TIMING

Messages appeared and disappeared too quickly, causing users to miss important information.

TIMEFRAME

1 week

ROLES

Visual Design
UXUI Design
Prototyping
Front-end Developing

SOFTWARE

Adobe Illustrator
Figma
Visual Studio Code

PROBLEM

Physical anniversary gifts often lack personalization and emotional depth, making it difficult to create a truly memorable experience. This creates an opportunity to design a more personal and interactive digital experience that allows users to express their emotions, tell a story, and create a memorable moment uniquely and engagingly.