jaineysshin

Fore

<ROLE>

UI/UX Designer

Full Stack Developer

From August 2025

To April 2026

<TEAM>

Solo project

<TOOLS>

Figma, XCode,

ShortCuts, Claude Code

Visit Website

< TL;DR >

Overview

FO/RE Focus on your work. Rest on your life.

A physical card. One tap. Your entire digital environment shifts.

Most productivity tools solve the wrong problem. They add more to manage — timers, blockers, notification settings — when the real issue is simpler: remote workers have lost the environmental signal that tells the brain when work begins and when it ends.

FO/RE is a hybrid iOS app and NFC system that turns a single physical gesture into a behavioral ritual. Tap in. Work mode activates. Tap out. It's over.

Built with Xcode and Apple Shortcuts. Designed over one year, tested in real environments.

Final Solution

Main Feed
Surface alt text directly below each photo for immediate access.

Photo Selection
Provide AI-generated descriptions to support image understanding during selection.

Add & Edit Alt Text
Relocate the alt text feature to the Filter & Edit stage, with AI-generated text as the default and easy manual editing available.

< PROBLEM >

Problem

The brain needs a signal to switch contexts. Remote work took it away.

When you commute, your environment tells your brain when to work and when to stop. However, remote work removed that signal entirely.

69%

of remote workers report burnout from blurred work boundaries.

72%

of remote/hybrid workers use their bedroom or living room for work.

But the cause isn't overwork or lack of discipline — it's the absence of a transition.
There's no door to close. No physical moment that separates one context from another.

1. General User

Users struggle to find the option to add alt text, as it's hidden at the bottom of the advanced settings page, making it easy to miss.

2. Users with visual impairments

Users with visual impairments report that many posts lack sufficient alt text, leaving them to rely entirely on whether others have provided it.

Research insights

Users struggle to find the alt text option

Visually impaired users are dissatisfied with inaccurate
auto-generated descriptions

#0 / 5

Instagram ranked lowest in accessibility among competitors

Methodology: Heuristic Evaluation, Reddit Analysis (60+ comments), Competitor Audit

Additionally, 15% of users said they were unsure how to properly write alt text, and 23% of visually impaired users struggle with Instagram due to missing user-generated descriptions. Some participants also mentioned that this is one of the reasons why users with visual impairments avoid using Instagram or feel dissatisfied with the platform.

①

The alt text feature is difficult to find and lacks clear writing guidance.

②

Current auto-generated descriptions are often inaccurate or insufficient.

< CHALLENGE >

The challenge wasn’t just improving accessibility. Instagram’s posting flow is built to be fast and frictionless, so any added step could easily create friction. I needed to improve accessibility without making the experience feel heavier or more complicated.

HOW MIGHT WE...

Make the alt text feature more visible and easier to use,
while keeping Instagram’s fast and simple posting flow?

To address this, I explored integrating AI support into the alt text flow to reduce cognitive load while improving overall accessibility.

User Understanding

Through persona development, context scenarios, and empathy mapping, I identified two primary user groups.

01. GENERAL USERS

Hidden & Complex

Often unaware of where the alt text feature is located. Even when they intend to use accessibility features, the hidden interface and multi-step process discourage engagement.

02. VISUALLY IMPAIRED

Inconsistent Experience

Rely heavily on descriptive metadata to understand visual content. However, inconsistent alt text availability and limited visibility of accessibility tools reduce their overall experience and trust in the platform.

Design principles

Instead of focusing only on permanent disability, I approached accessibility through an inclusive design spectrum to ensure broader usability impact. It helped to define user’s final goal, and design principles depending on the situations.

Consider screen reader compatibility

Ensure usability with screen zoom & voice assistance

Make the alt text option more visible and accessible

Use AI to help users write better alt text

User flow

I redesigned user flow to cut down 20% fewer steps and increases efficiency by 20%.

Figma Prototyping

Development

For development phase, I used HTML, CSS, and Javascript, and used Educative.io API to implement the voiceover function.

< SOLUTION >

Make the alt text option more visible and accessible

Main Feed

In the main feed, the alt text box is positioned below each photo. When a user clicks on a photo, VoiceOver reads the alt text.

Ensure usability with screen zoom & voice assistance

Pick a Photo

When a photo is clicked, VoiceOver reads the AI-generated alt text to support users with temporary or situational needs.

Use AI to help users write better alt text

Add alt text

Alt text button has been moved to the Filter/Edit page. An AI suggestion box helps users write alt text more easily, or they can skip it and apply the AI-generated description automatically.

Consider screen reader compatibility

Edit alt text

Users can review their alt text before uploading the photo. Since screen readers typically read from the top, the alt text is placed below the caption for better accessibility.

< REFLECTION >

Impact & Expected Metrics

As this was an academic project with time constraints, formal usability testing on the final solution was not conducted. However, I defined the following success metrics based on my initial hypotheses.

20% ↑

Usability & Efficiency

By integrating alt text directly into the posting flow and reducing the steps by 20%, the process becomes smoother and more intuitive.

AI-assisted descriptions also help ensure accessibility information is included, even when users skip manual input.

High

User Satisfaction

By moving the accessibility feature from hidden settings into a more visible and guided interface, I made it easier for general users to participate in creating inclusive content.

As a result, screen reader users can receive more consistent and meaningful descriptions, helping them better understand visual posts and navigate the platform with greater confidence.

Future Opportunities

Expanding Formats

The current solution focuses on feed posts. As a next step, I would adapt the AI-guided alt text system to Stories and Reels to create a more consistent accessibility experience across the platform.

Real-user Testing

Since this project was based on heuristic evaluation and research, the next step would be usability testing with real screen reader users (e.g., VoiceOver, TalkBack) to refine the interface based on real interaction patterns.

AI Refinement

I would also work on improving AI description accuracy while designing simple ways for users to review and edit suggestions, keeping users in control of the final output.

Takeaways & Reflection

From Sympathy to
Inclusive Thinking

I learned that accessibility isn’t about building a separate solution for a minority, but about designing systems that work better for everyone.

Designing Within
Real Constraints

I learned to balance complex accessibility requirements with Instagram's core value of speed and simplicity.

Connecting Design with
Technical Reality

Understanding how screen readers interpret metadata helped me design a structure that is both visually clear and technically feasible.