Construction Product App

Construction Product App

Leading Thai construction material producer, enhancing end-to-end experiences from consultation to home construction and purchase.

My role: Senior Product Designer
Deliverable: Site map, Current website assessment, Ideation, Visual design
Project year: 2022
Made with: Figma, Illustrator

Overview

Proudly boasting a 4-star App Store rating, I spearheaded the transformation of the Construction Home app for a leading construction company in Thailand. Our goal was to evolve the platform from a website to an intuitive mobile application.

My role involved initiating the project by conducting a comprehensive website audit and creating a detailed site map to identify areas for improvement across user journeys. To gather valuable insights, I facilitated workshops with stakeholders, pinpointing user pain points that informed our ideation process. I then translated these insights into tangible solutions through the creation of mock-up prototypes, delivering a user-centric vision to stakeholders.

Collaborated with

Product owner
Business
Product management
Developers

Main problem

The website's navigation is overly complex due to an extensive menu, Impact Users may find it difficult to locate desired information or products, leading to frustration and a potential decline in user experience.
The website faces difficulties in effectively engaging users. Impact This struggle in engagement is resulting in lower conversion rates and decreased customer retention compared to mobile apps. This, in turn, may lead to a lack of repeat purchases, impacting the overall success of the website.

Goals

Optimize App Navigation for a Seamless User Experience and Address User Pain Points.

Elevate User Engagement and Boost Customer Retention through Seamless Transition from Website to Mobile Application, Focusing on Expanding Customer Reach and Encouraging Repeat Transactions.

Project Timelines

In this project, we had a challenging three-month timeline. Our journey began with a kick-off meeting involving the product and business teams to define our goals. Here's how we tackled it: 

✨ Sprint 1: We focused on analyzing pain points on the website.
✨ Sprint 2: This marked the design phase. We synced requirements with the business team and prioritized tasks using story points.
✨ We scheduled weekly project deliveries, and our iterative approach led to a successful project completion by the end of Sprint 6.

 This approach helped us manage the tight timeline effectively.

01. Site map

Initially, I focused on creating a site map to gain a holistic view of the project. This approach allowed me to identify areas that required improvement and provided a clear roadmap for the design process.

02. Addressing Website Pain Points

Aim for workshop

Conducted a workshop with key stakeholders, including product owners, business professionals, and designers.
Evaluated four crucial areas: services page, product page, promotion page, and store page.
The collaborative insights gained are guided our focus on areas needing attention during the application's development.

Problem Statement Summary

After a thorough workshop, I condensed the entire journey to...
✨ Identified common themes, issues, and pain points.

✨ Categorized pain points into themes (e.g., UI, Content, Navigation).

✨ Created a summarized list of pain points and prioritized issues based on severity and impact.

✨ Offered recommendations and potential solutions for addressing issues.

Here's a concise summary of the main pain points:

🖌 Pain point 1 (Navigation): The menu had numerous layers, including main categories, subcategories, and sub-subcategories, with a poor user interface that left users feeling confused.

🖌 Pain point 2 (Lack of Information): There is an abundance of text without proper information prioritization, resulting in a lack of focus for users.

03 Solutions

Ideation 1 (Navigation): Simplified menu structure with an enhanced user-friendly interface.
Ideation 2 (Lack of Information): Organize and prioritize the elements that users should focus on and improve the interface to enhance the shopping experience.

04. Visual design

Overview

I have prioritized the most frequently used main menu items, placing them on the bottom bar of the screen.

These menus navigate to services, products, promotions, and the store page, enhancing user convenience.

Services page

Starting with the services page, there are two layers of categories, including primary categories and subcategories. The ability for users to view all categories may be advantageous. Therefore, based on eye-tracking studies showing that users pay attention to the left side of the screen before beginning to explore the information, I have decided to implement a vertical main navigation for categories and a left navigation for sub-categories. This arrangement allows users to read them alongside the main categories. The inclusion of icons will be beneficial to users because they can be recognized quickly without the use of long texts.

Products page

To enhance the user experience and prevent overwhelming users with excessive information, I have implemented a single list menu for categories on the right side, accompanied by a hidden drop-down menu for subcategories. This approach facilitates the use of product images, creating a more engaging experience for users.

Promotions page

To optimize the use of space, we have implemented a tab navigation system to showcase two types of advertisements, promotions and deals. Additionally, we have included a set of filters to enable users to view different categories of promotions.

Stores page

Users may view information cards on the store page. Therefore, we have added a filter at the top of the screen to help them identify the nearest store, specific types of items, and their availability.

My Achievements

Received a 4-star rating and positive feedback in the App Store from our customers.

I'm thrilled🥳 to share the achievement of securing a 4-star rating on the App Store for the construction app. My journey on this project was challenging, as it marked my first foray into app design, and the tight timeline initially created some stress and pressure. After receiving feedback from stakeholders that indicated room for improvement, I took a step back and reassessed my approach.

I decided to prioritize research before diving into the design phase. I initiated open and transparent discussions with stakeholders, explaining the value of research in shaping a successful design. This adjustment allowed us to reorganize our workflow, leading to significantly positive outcomes. The feedback on my designs improved, and I gained invaluable experience in stakeholder management and efficient timeline coordination 🥰.