ashgopalak
Instax - Reimagined
Instax - Reimagined
Instax - Reimagined
Visual Design | UX Redesign
Visual Design | UX Redesign
Redesigning the Fujifilm Instax website to improve experience through visual and functional enhancements. This project targets usability and navigational issues existing in the current website by harnessing their vision for an interactable interface.
Mar 2022 - May 2022
Redesigning the Fujifilm Instax website to improve experience through visual and functional enhancements. This project targets usability and navigational issues existing in the current website by harnessing their vision for an interactable interface.
Mar 2022 - May 2022



The Instax Experience - Created and prototyped in entirety using Figma. (Prototype sometimes doesn't load, refresh page to view!)
The Instax Experience - Created and prototyped in entirety using Figma. (Prototype sometimes doesn't load, refresh page to view!)
The Instax Experience - Created and prototyped in entirety using Figma. (Prototype sometimes doesn't load, refresh page to view!)
Client
Independent Project
Client
Independent Project
Project Focus
Visual Design, User Experience Design, Animated Prototyping
Goal
To rework the visual and functional components of the interface to improve overall user experience and bring more in more traffic to the website.
Responsibilities
I conducted guerrilla user interviews to devise the personas and the problem statement. Following this, I created a user flow to sketch, wireframe and prototype the different pages of the redesign.
Project Focus
Visual Design, User Experience Design, Animated Prototyping
Goal
To rework the visual and functional components of the interface to improve overall user experience and bring more in more traffic to the website.
Responsibilities
I conducted guerrilla user interviews to devise the personas and the problem statement. Following this, I created a user flow to sketch, wireframe and prototype the different pages of the redesign.
Click here for final designs!
Click here for final designs!
The Personas
The Personas
Getting to know the audience
Getting to know the audience
To understand user needs and pain points from the current interface, I started by interviewing 4 people who broadly fall into the following 2 categories - those interested in getting into instant photography and those who already have prior experience. Using the insights gathered from these interviews, I was able to draft 2 personas for Lauren the Novice and Matt the Photographer.
To understand user needs and pain points from the current interface, I started by interviewing 4 people who broadly fall into the following 2 categories - those interested in getting into instant photography and those who already have prior experience. Using the insights gathered from these interviews, I was able to draft 2 personas for Lauren the Novice and Matt the Photographer.

Defining the Problem Statement
Defining the Problem Statement
What is the goal of this redesign?
What is the goal of this redesign?
The interviews and personas highlighted a lack of information hierarchy and navigational delays within the website, but also revealed elements that users enjoyed.
Identified pain points:
Cluttered UI and inconsistent webpage linking - Users found it cumbersome to navigate through the website
Lack of purchase links - Being unable to check prices or view options to buy the product was off-putting to the users
Poor Information Hierarchy - Users felt it was very time-consuming and confusing to have to go through all of the available information to find key features.
To tackle all of the issues I discovered, I drafted the following problem statement:
The interviews and personas highlighted a lack of information hierarchy and navigational delays within the website, but also revealed elements that users enjoyed.
Identified pain points:
Cluttered UI and inconsistent webpage linking - Users found it cumbersome to navigate through the website
Lack of purchase links - Being unable to check prices or view options to buy the product was off-putting to the users
Poor Information Hierarchy - Users felt it was very time-consuming and confusing to have to go through all of the available information to find key features.
To tackle all of the issues I discovered, I drafted the following problem statement:

The User Flow
The User Flow
Putting ourselves in the user's shoes
Putting ourselves in the user's shoes
I created one user flow to visualize how locating product information and exploring buying options should look like to guide me through the design process:
I created one user flow to visualize how locating product information and exploring buying options should look like to guide me through the design process:

Sketching and Wireframing
Sketching and Wireframing
Starting the design process
Starting the design process
I decided to keep the intractability component separate from the information and useful links, to allow users to skip through sections at their convenience. Sketching helped me visualize and ideate how different screens work together to achieve this.
I decided to keep the intractability component separate from the information and useful links, to allow users to skip through sections at their convenience. Sketching helped me visualize and ideate how different screens work together to achieve this.

High-Fidelity Designs
High-Fidelity Designs
An engaging experience that is representative of the brand
An engaging experience that is representative of the brand
The Instax Experience is a separate, interactable section of the website that acts as a informative visualizer that shows what it's like to use an Instax camera. I felt that creating a separate experience is a great hook to draw customers into exploring the website, while showing what the brand has to offer. This is the first page that a user would be greeted with when visiting the site, but can skip past it to the homepage if they wish to do so.
The background would change every time the user visits the website, allowing them to "capture" and experience different moments through this experience.
The Instax Experience is a separate, interactable section of the website that acts as a informative visualizer that shows what it's like to use an Instax camera. I felt that creating a separate experience is a great hook to draw customers into exploring the website, while showing what the brand has to offer. This is the first page that a user would be greeted with when visiting the site, but can skip past it to the homepage if they wish to do so.
The background would change every time the user visits the website, allowing them to "capture" and experience different moments through this experience.
High-Fidelity Designs
High-Fidelity Designs
A minimalistic homepage with the right resources
A minimalistic homepage with the right resources
The new homepage displays the most popular cameras by film size, so users can easily navigate to the product that catches their attention. This also serves as a good starting point for new customers. Users can now utilize the "Find my camera" option to find out which camera is the best fit for their needs before making a purchase. I cleaned out the clutter in the original homepage and reorganized the content to make it visually and functionally more appealing.
The new homepage displays the most popular cameras by film size, so users can easily navigate to the product that catches their attention. This also serves as a good starting point for new customers. Users can now utilize the "Find my camera" option to find out which camera is the best fit for their needs before making a purchase. I cleaned out the clutter in the original homepage and reorganized the content to make it visually and functionally more appealing.

High-Fidelity Designs
High-Fidelity Designs
A New Look to the Product View - 3D Model using Spline and Anima
A New Look to the Product View - 3D Model using Spline and Anima
Content is now organized in different tabs to simplify information that's presented to users. I redesigned the product description section to make it more visually instructive, in order to make comprehension easy for even first time users.
A 360-degree view to the product now lets the customer soak in the aesthetic details, allowing them to make a better educated purchase. I created this by editing a 3D model on Spline and subsequently did the embedding and prototyping through Anima.
Content is now organized in different tabs to simplify information that's presented to users. I redesigned the product description section to make it more visually instructive, in order to make comprehension easy for even first time users.
A 360-degree view to the product now lets the customer soak in the aesthetic details, allowing them to make a better educated purchase. I created this by editing a 3D model on Spline and subsequently did the embedding and prototyping through Anima.

Redesigned product view with a clickable image gallery to view different images.
Redesigned product view with a clickable image gallery to view different images.

Incorporating a 3D view of the product
Incorporating a 3D view of the product
High-Fidelity Designs
High-Fidelity Designs
Browsing products is easy
Browsing products is easy
I also redid the camera and film listing pages to provide a sneak peek into the product before clicking on it. I retained the minimalistic layout to keep information intake down to what's required. I also included an interactive slider that changes color to the films page to add a little flourish!
I also redid the camera and film listing pages to provide a sneak peek into the product before clicking on it. I retained the minimalistic layout to keep information intake down to what's required. I also included an interactive slider that changes color to the films page to add a little flourish!

Reflection
Reflection
Users process information that uses good visual cues better than information that does not. It was fun experimenting with that concept and see how an interface should possess a good balance between content and animation in order to achieve that. It was challenging to independently conduct the redesign, even design some parts from scratch - but this project gave me full creative freedom working alone and allowed me to expand my knowledge of design.
Users process information that uses good visual cues better than information that does not. It was fun experimenting with that concept and see how an interface should possess a good balance between content and animation in order to achieve that. It was challenging to independently conduct the redesign, even design some parts from scratch - but this project gave me full creative freedom working alone and allowed me to expand my knowledge of design.