ashgopalak

ashgopalak

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.

Link to full experience video here

Link to full experience video here

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.

Connect with me!

Logo
Logo