jaia

Project Outline

01

Discover

02

Explore

03

Materialize

04

Implementation

05

Deliver

Discover

Research

Market Analysis

Analyzed and compared existing e-commerce furniture mobile apps to identify key features, design trends, and user flow. Found that successful apps have an intuitive navigation, appealing visuals, and easy to use features to browse for products.



Questions:

⟡ How can I design intuitive and user-friendly interfaces?

⟡ What are the best practices for optimizing performance in a React Native app?

Define

Identify Users & Features

In this section, I begin to understand the needs, preferences, and the behaviors of potential users for my e-commerce furniture app.

User Persona

By creating user personas, I am able to identify my users traits, their personalities, their needs, and frustrations when developing the app.

empathy-img

Explore

Low Fidelity Wireframes

View PDF ↗

Low fidelity wireframes were created to outline the app's design, and the overall placement of the components and content.

User Flow

The user flow begins from the homepage, to the list of best seller furniture items, to the product detail page, and finally adding item to the cart. The flow chart serves as a guide for users to accomplish their goal of adding an item of their choice to their cart.

View PDF ↗

Explore

High Fidelity Wireframes

View PDF ↗

Building ontop of the low-fi sketches, the rough ideas have evolved into a refined and interactive design. The high-fidelity prototype offers a realistic representation of the EcoLuxe app.

Materialize

Developing Visual Identity

In this section, I developed the branding journey of EcoLuxe by carefully chosing the typography, and the blend of colors.

Color Palette

I chose a palette of green shades for the furniture app to evoke a sense of serenity and luxury. Green, often associated with nature and tranquility, provides a calming visual experience that enhances the user’s journey through the app. This choice ensures that users feel both relaxed and inspired as they explore elegant furniture options.

empathy-image

Typography

The typography chosen were Baskerville and a serif font which is compatible for the OS Android platform.

empathy-img

Implementation

Code into React

In this section, I breakdown the purpose and functionality of the code implemented in Virtual Studio Code.

Code

I developed a mobile furniture store app using React Native and the RNEUI library, incorporating a Home Screen, Product List Screen, and Product Detail Screen.

The Home Screen welcomes users with a background image and a "Get Started" button that navigates to the Product List Screen.

The Product List Screen displays a grid of products using a FlatList, with each item clickable to view detailed information.

The Product Detail Screen shows product details, including images, descriptions, prices, and dimensions, with the option to add items to the cart via a Floating Action Button (FAB). The data source, defined in furnituredata.js, includes various furniture items with unique attributes and images.

empathy-img

Deliver

Launching Success

In this section, the final prototype for the Ecoluxe app is developed, incorporating all UI and code elements to create a cohesive and intuitive user interface.

finalprototype-img
View More Projects ↗
emoji

Roseann Duarte-Tampos

Hand coded by me, powered by Boba

Let's get in touch!

linkedin icon mail icon