Defining the core values of the SmartSari homepage
Defining the core values of the SmartSari homepage
2024 • Bukalapak • Design Initiative • 4 min read
2024 • Bukalapak • Design Initiative • 4 min read
Overview
Overview
SmartSari is Bukalapak's online-to-offline product for the Philippines market. We aim to enhancing the livelihoods of sari-sari store owners across the Philippines by transforming their businesses with cutting-edge digital tools. With our user-friendly app, store owners can seamlessly offer a wide range of digital products and services, including e-load/credits, game vouchers, groceries, bill payments, and working capital support.
SmartSari is Bukalapak's online-to-offline product for the Philippines market. We aim to enhancing the livelihoods of sari-sari store owners across the Philippines by transforming their businesses with cutting-edge digital tools. With our user-friendly app, store owners can seamlessly offer a wide range of digital products and services, including e-load/credits, game vouchers, groceries, bill payments, and working capital support.
Executive Summary
Executive Summary
As new products are coming, our SmartSari homepage is starting to get crammed. We need to have a rules/guidelines in our homepage to regulate and manage it. So, I led the design initiative to define the core values of the homepage with the team as a foundation for the design guide.
As new products are coming, our SmartSari homepage is starting to get crammed. We need to have a rules/guidelines in our homepage to regulate and manage it. So, I led the design initiative to define the core values of the homepage with the team as a foundation for the design guide.
Results: 5 SmartSari Homepage Core Values / Homepage Design Guide*
Results: 5 SmartSari Homepage Core Values / Homepage Design Guide*
Due to some of the data & work is confidential, the following designs, numbers, text,
have been modified, blurred, or omitted on purpose.
Due to some of the data & work is confidential, the following designs, numbers, text,
have been modified, blurred, or omitted on purpose.
1
1
Context
Context
A lot of new products are coming to SmartSari. Water, electricity, new post-paid, another prepaid, even FMCG. All those products’ entrypoint will need to be shared in our Homepage to expose them to our users.
Our homepage is starting to get crammed, and currently we don’t have any rules/guidelines or principles in our homepage yet to regulate and manage it. Without any action taken any time soon, we will face some scalability and interaction problems if we don’t prepare and mitigate them from now.
A lot of new products are coming to SmartSari. Water, electricity, new post-paid, another prepaid, even FMCG. All those products’ entrypoint will need to be shared in our Homepage to expose them to our users.
Our homepage is starting to get crammed, and currently we don’t have any rules/guidelines or principles in our homepage yet to regulate and manage it. Without any action taken any time soon, we will face some scalability and interaction problems if we don’t prepare and mitigate them from now.
2
2
Objective
Objective
We want our Homepage to have a clear intention and goals that would help us regulate a consistent users’ interaction and experience in the homepage from time to time.
Hopefully, by having these homepage core values and the playbook to apply the values, we can be aligned more efficiently when we work on any initiatives that touches on Homepage or when improving the page itself.
Anyway, the practice of implementing core values is also commonly applied by several companies like Spotify and Gojek, and the impact has been highly positive. So, this is a great step to begin with in SmartSari.
We want our Homepage to have a clear intention and goals that would help us regulate a consistent users’ interaction and experience in the homepage from time to time.
Hopefully, by having these homepage core values and the playbook to apply the values, we can be aligned more efficiently when we work on any initiatives that touches on Homepage or when improving the page itself.
Anyway, the practice of implementing core values is also commonly applied by several companies like Spotify and Gojek, and the impact has been highly positive. So, this is a great step to begin with in SmartSari.
Spotify’s New Design Principles
Spotify’s New Design Principles
Gojek’s Design Principles
Gojek’s Design Principles
3
3
Design Process
Design Process
In pursuit of the objective, I planned and implemented the following approaches.
In pursuit of the objective, I planned and implemented the following approaches.
Co-creation: Goals & Expectation Alignment
Co-creation: Goals & Expectation Alignment
I conducted a co-creation session with all related stakeholders to ask five questions about homepage. Starting with describing the target user, the impression that we want to get, the goals, until the expectation.
With this session, we got a lot of insights from stakeholders perspective about our homepage.
I conducted a co-creation session with all related stakeholders to ask five questions about homepage. Starting with describing the target user, the impression that we want to get, the goals, until the expectation.
With this session, we got a lot of insights from stakeholders perspective about our homepage.
Exploring the Ideas & Generating the Values
Exploring the Ideas & Generating the Values
After the sessions, we—product design team doing some series of ideation. We grouping all answers, synthesizing the insight, brainstorming the idea, and liaise with another team to validate some ideas.
After the sessions, we—product design team doing some series of ideation. We grouping all answers, synthesizing the insight, brainstorming the idea, and liaise with another team to validate some ideas.
4
4
Results
Results
Through a series of collaborative sessions and brainstorming, we successfully defined five core values as the foundation of the SmartSari homepage. Here they are:
Through a series of collaborative sessions and brainstorming, we successfully defined five core values as the foundation of the SmartSari homepage. Here they are:
We also worked to define how these core values could be measured on our homepage and consulted with the Data team to ensure clear success metrics. This approach enables us to consistently maintain and align the homepage with these values over time.
We also worked to define how these core values could be measured on our homepage and consulted with the Data team to ensure clear success metrics. This approach enables us to consistently maintain and align the homepage with these values over time.
5
5
Outcomes
PoC Project: Grocery
PoC Project: Grocery
Long story short, I’m applying the values mentioned above to the Grocery project. As an MSME enabler, SmartSari aims to expand its operations into physical goods, so the primary goal of this project is to evaluate user traction for Grocery products.
Long story short, I’m applying the values mentioned above to the Grocery project. As an MSME enabler, SmartSari aims to expand its operations into physical goods, so the primary goal of this project is to evaluate user traction for Grocery products.
Final Design
Final Design
After exploring various design alternatives to find the best design while staying aligned with the core values, here is the final design for the Grocery section:
After exploring various design alternatives to find the best design while staying aligned with the core values, here is the final design for the Grocery section:
Results
Results
Within a week of launch, the grocery entry point achieved a 35% CTR, which continued to grow and stabilized at 45%.
Within a week of launch, the grocery entry point achieved a 35% CTR, which continued to grow and stabilized at 45%.
6
6
Designer Notes
Designer Notes
After leading and wrapping up the project, I identified key learnings and notable impacts:
Strengthening cross-team collaboration:
This project reinforced collaboration across teams, particularly for designers with the non-development team.Highlighting the role of designers:
There’s often a perception that designers lack a “seat at the table.” However, this project demonstrated the critical role designers play, ensuring their input and aspirations are considered moving forward.Raising awareness for homepage adjustments:
The team became more mindful and cautious when making adjustments to the homepage, recognizing the importance of deliberate and thoughtful changes.Aligning team expectations:
The project successfully aligned team expectations, fostering a shared vision and understanding of goals.
After leading and wrapping up the project, I identified key learnings and notable impacts:
Strengthening cross-team collaboration:
This project reinforced collaboration across teams, particularly for designers with the non-development team.Highlighting the role of designers:
There’s often a perception that designers lack a “seat at the table.” However, this project demonstrated the critical role designers play, ensuring their input and aspirations are considered moving forward.Raising awareness for homepage adjustments:
The team became more mindful and cautious when making adjustments to the homepage, recognizing the importance of deliberate and thoughtful changes.Aligning team expectations:
The project successfully aligned team expectations, fostering a shared vision and understanding of goals.
You're reading the simplified process. If you'd like to learn more about the project, feel free to get in touch.
You're reading the simplified process. If you'd like to learn more about the project, feel free to get in touch.
Back to home
Back to home
Let’s talk &
Get in touch.
thalhah.crdv@gmail.com
Thalhah S. Robbani © 2024
Let’s talk & Get in touch.
thalhah.crdv@gmail.com
Thalhah S. Robbani © 2024