Designing to Simplify Online Website Creation for SME Business Owners in India
Role
Senior Product Designer
Timeline
3 months / 2023-2024
Team
1 Design Lead + 2 Designers
The website is currently
available only on Desktop
Project Overview
Smartbiz is one of the offerings under the Amazon SmartCommerce suite of solutions to help business owners start, manage and scale their business. Smartiz allows new business owners to create their own website, set up and manage their business online within minutes. India's smartphone penetration rate was close to 71% in 2023 - which was leveraged by Smartbiz by being a mobile first product, helping business owners to manage tasks "on the go"
Problem
Sellers on the platform lacked a comprehensive and user-friendly website editor, limiting their ability to customise their online stores. Existing solutions were either too complex or unavailable on mobile, leaving sellers without an accessible tool to manage their store visuals effectively.
Outcome
The editor’s templatization approach allowed sellers to start with customisable layouts, reducing complexity and the learning curve. Guided by the "What you see is what you get" (WYSIWYG) principle, sellers could see real-time updates, making adjustments confidently.
Deliverables:
Customer Journey
Product Architecture
Iterative Product Design
Feature Prioritization
Ideation Workshops
Competitive Anlaysis
Stakeholder Mapping
Visual Design
User Testing
Project Scope
This was a fast-paced, three-month sprint. I worked solo in phase one, leading research and initial design. In phase two, a junior designer joined to assist in UI polish and mobile optimisation. As this is a part of a large product offering, designs are constantly evaluated, iterated and updated as per user feedback and emerging requirements.
To go through the entire project, please access the website from a desktop
© Yash Dhavalikar
Design Portfolio 2023
© Yash Dhavalikar
Design Portfolio 2023
Design Process
1
Benchmarking
We analyzed leading platforms like Shopify and Wix to identify best practices and intuitive patterns for website builders. This research helped us incorporate proven design approaches, ensuring the editor started strong and felt familiar to sellers.
2
Information Architecture
We created an information architecture combined with a userflow that allowed us to understand the ingress for this website builder, the structure of the page, and the capabilities that we had to design for.
3
Interaction Strategy
The website builder centered on three core interactions that would keep things simple. Due to the target audience, we had to keep the website builder simple, with a slightly restrictive structure and minimal interactions.
Edit Text
Edit Text
Edit Images
Reorder Page Sections
Enable / Disable Sections
Each of these functions was tailored to work smoothly on mobile through touch and type interactions, so sellers could tap on elements, edit inline text, and swap images effortlessly. Sellers could also reorder sections (e.g., moving product displays above testimonials) and enable/disable them if needed. The combination of simplicity and mobile optimisation made the editor highly accessible, reducing the learning curve.
4
User Interface
The basic page structure was similar a lot of the other existing products, as we did not want to change patterns that work. We created 4 options (mentioned as approaches below) to understand what interaction is the most clear and usable.
Approach 1
Here, we explored dynamic LHS and RHS panels that collapse and expand as needed.
Pros
Maximising space for the canvas
Dynamic panels appearing as needed
Cons
Distracting due to frequent scaling
Lack of system status and navigation
Tech Limitations
Approach 2
This approach explores fixed panels on both sides, with the RHS changing dynamically based on selection
Pros
Clear controls for editing elements
Ease of navigation
Cons
Scaled down webpage
Busy interface due to dual panels
Approach 3
For this option, we decided to explore only one fixed panel, with editing information changing dynamically
Pros
Maximising space for the canvas
Solved navigation issues from option 1
Cons
Distracting due to frequent scaling
Complex LHS due to stacking of editing options
Tech Limitations
Approach 4
For the final option, we simplified the LHS options and made it more focused based on the selection
Pros
Maximising space for the canvas
No dynamic panels / canvas scaling
Cons
Heavily nested LHS going 2/3 levels deep
Selected Option
The four options were evaluated by all the stakeholders in the product: Design, PM, Devs and Product Owners. The selected option was selected on the basis of tech capabilities, usability tests run by the research team, and required the least custom components apart from the design system which meant faster deployment time.
5
Final Designs
The UI design needed to strike a balance between flexibility and ease of use while catering to both desktop and mobile users. We focused on a structured yet intuitive approach that empowered sellers to customise their stores with minimal effort.
Touch-Friendly WYSIWYG Editing: Each section of the template (e.g., headers, product grids, testimonials) was fully editable through touch interactions, with options to type directly into text fields and tap to change images.
Default Controls
Image Editing
Text Editing
Product Linking
Drag-and-Drop Section Reordering: Sellers could rearrange sections by tapping, holding, and dragging, giving them more layout control without requiring complex interactions.
Real-Time Preview: The live preview feature was especially impactful on mobile, giving sellers confidence in their changes by showing them exactly how their site would appear to customers.
Widget Library: Beyond full-page templates, we introduced a widget library, allowing sellers to add, remove, or rearrange individual sections within their website. Whether it was a featured product grid, a testimonial slider, or a promotional banner, sellers could mix and match these modular sections to tailor their storefronts without needing technical expertise.
Themes Library: Instead of starting from a blank slate, sellers could choose from a curated set of templates designed for different business needs. These pre-built layouts provided a polished starting point, reducing the intimidation factor and ensuring a visually cohesive store right from the beginning.
6
Outcome and Impact
While the mobile-first approach was a key differentiator, user testing revealed that sellers preferred a more robust desktop experience for in-depth customization. Based on this insight, we shifted our focus to enhancing the desktop editor while maintaining a streamlined set of features on mobile. This adjustment not only improved usability but also created an opportunity to upsell the desktop platform, aligning with a key business goal for the quarter.
7
Learnings and Takeaways
Balancing Mobile and Desktop: While mobile accessibility was valuable, users preferred making detailed edits on desktop, leading us to refine our priorities.
Iterating Based on User Insights: Real-world testing challenged our initial assumptions, reinforcing the importance of flexibility in design decisions.
Strategic Business Alignment: The shift in focus allowed us to support a business goal by driving more engagement with the desktop platform while still offering essential mobile capabilities.
This experience underscored the need to balance user needs with business objectives, ensuring that product decisions are both user-centric and strategically valuable.
© Yash Dhavalikar
Design Portfolio 2023
© Yash Dhavalikar
Design Portfolio 2024
© Yash Dhavalikar
Design Portfolio 2024