No-Code App Platform
Smartsheet
Create comprehensive solutions without writing a single line of code
How can we enable customers to build comprehensive solutions using their existing data?
Make the experience of choosing a book similar to visiting a physical book store, with ability to freely move between shelves
How can we help customers find their next favorite book?
-
Make the experience of choosing a book similar to visiting a physical book store, with ability to freely move between shelves
-
Let the customers "organize" the entire book store the way they want, every time they walk in
-
Offer new ways of discovery - let the customers determine how they want to browse
What is a no-code App Platform?
Smartsheet App Platform enables customers to build comprehensive solutions without writing code. The customer-facing part of the solution allows customers to view data in various configurations, fill out forms and take actions on tasks. I designed the structure and visual language of all aspects of the end=-user experience - navigation, landing pages, lists, dashboards, forms, etc... The second part of the App Builder is the configuration tool where solution builders create and edit the pages of their apps They can specify data source change data, layout and branding, create and manage users, customize onboarding and messaging, and control all change publishing preferences. Once the app is created, they can invite users, manage the app lifecycle, and view usage statistics.
My Role:
Conducted formative and competitive research and created design proposal
Completed multiple design iterations and design reviews to get the team to align on the goals, outcomes, and customer experience
​Prototyped a detailed walk-through, conducted usability testing with customers, worked with stakeholders to review and sign-off on designs
DESIGN PROCESS:
1. Research existing app builder solutions
VP of Kindle described his vision of a tool that would enable customers to "X-Ray" a book to see its bones. From that description, I created the entire experience, including the X-Ray Strip, working as a a PM and UX designer
2. Research roles and workflows
Designing for E-Ink is very diffeent from designing for standard devices. At the time, At the time, E-Ink technology was just starting to develop, andThere were no defined rules or patterns, and a lot of interactions have to be discovered via trial and error
3. Real-world example - "Helpdesk" app
I also designed Table of Contents and Before you go pages. This work focused on creating new patterns that would be used throughout the device as E-Ink technology evolves and functionality gets more complex over time.
4. Designed the App Creator experience
As more features were getting added to Kindle across the org, the next challenge was to determine how everything will work and interact together, and to communicate the big picture across teams. I addressed this need by creating an Interactive Flowchart.
5. Designed the App User experience
Working on early versions of an E-Ink device placed a lot of limitations on what could be done, but as E-Ink technology evolved, and X-Ray functionality was extended to standard devices, I was able to evolve the design to make it rich, modern, and interactive.
6. Align teams and sign-off on experience
Working on early versions of an E-Ink device placed a lot of limitations on what could be done, but as E-Ink technology evolved, and X-Ray functionality was extended to standard devices, I was able to evolve the design to make it rich, modern, and interactive.
RESEARCH
App Builder is a tool that enables customers to build comprehensive solutions without writing code. The customer-facing part of the solution allows customers to view data in various configurations, fill out forms and take actions on tasks. I designed the structure and visual language of all aspects of the end=-user experience - navigation, landing pages,
The key idea of Kindle Leaf was to allow customers to browse books via categories that matched their actual needs. The first step would be to allow the customers
EXISTING APP BUILDER SOLUTION ANALYSIS
The key idea of Kindle Leaf was to allow customers to browse books via categories that matched their actual needs. The first step would be to allow the customers to choose the criteria they want to use to discover books - by their current mood, or by the amount of time they want to spend reading
ROLES AND WORKFLOWS
The key idea of Kindle Leaf was to allow customers to browse books via categories that matched their actual needs. The first step would be to allow the customers to choose the criteria they want to use to discover books - by their current mood, or by the amount of time they want to spend reading
REAL-WORLD EXAMPLE: IT HELP DESK APP
The key idea of Kindle Leaf was to allow customers to browse books via categories that matched their actual needs. The first step would be to allow the customers to choose the criteria they want to use to discover books - by their current mood, or by the amount of time they want to spend reading
APP USER EXPERIENCE
.png)
Landing Page
The key idea of Kindle Leaf was to allow customers to browse books via categories that matched their actual needs.
.png)
Ticket Form
The key idea of Kindle Leaf was to allow customers to browse books via categories that matched their actual needs.
.png)
Self-Serve Knolwledge Base
The key idea of Kindle Leaf was to allow customers to browse books via categories that matched their actual needs.
TECHNITIAN & ADMIN EXPERIENCE
.png)
Landing Page
The key idea of Kindle Leaf was to allow customers to browse books via categories that matched their actual needs.
.png)
Ticket Form
The key idea of Kindle Leaf was to allow customers to browse books via categories that matched their actual needs.
.png)
Self-Serve Knolwledge Base
The key idea of Kindle Leaf was to allow customers to browse books via categories that matched their actual needs.
APP CREATOR EXPERIENCE
The key idea of Kindle Leaf was to allow customers to browse books via categories that matched their actual needs. The first step would be to allow the customers to choose the criteria they want to use to discover books - by their current mood, or by the amount of time they want to spend reading
CREATING AN APP
.png)
Creating from existing components
The key idea of Kindle Leaf was to allow customers to browse books via categories that matched their actual needs. The first step would be to allow the customers to choose the criteria they want to use to discover books - by their current mood, or by the amount of time they want to spend reading
Start with a blank app
The key idea of Kindle Leaf was to allow customers to browse books via categories that matched their actual needs. The first step would be to allow the customers to choose the criteria they want to use to discover books - by their current mood, or by the amount of time they want to spend reading
PAGE TYPES
.png)
Grid
The key idea of Kindle Leaf was to allow customers to browse books via categories that matched their actual needs. The first step would be to allow the customers to choose the criteria they want to use to discover books - by their current mood, or by the amount of time they want to spend reading
.png)
Cards
The key idea of Kindle Leaf was to allow customers to browse books via categories that matched their actual needs. The first step would be to allow the customers to choose the criteria they want to use to discover books - by their current mood, or by the amount of time they want to spend reading
.png)
List
The key idea of Kindle Leaf was to allow customers to browse books via categories that matched their actual needs. The first step would be to allow the customers to choose the criteria they want to use to discover books - by their current mood, or by the amount of time they want to spend reading
.png)
Dashboard
The key idea of Kindle Leaf was to allow customers to browse books via categories that matched their actual needs. The first step would be to allow the customers to choose the criteria they want to use to discover books - by their current mood, or by the amount of time they want to spend reading
.png)
Form
The key idea of Kindle Leaf was to allow customers to browse books via categories that matched their actual needs. The first step would be to allow the customers to choose the criteria they want to use to discover books - by their current mood, or by the amount of time they want to spend reading
.png)
External Page
The key idea of Kindle Leaf was to allow customers to browse books via categories that matched their actual needs. The first step would be to allow the customers to choose the criteria they want to use to discover books - by their current mood, or by the amount of time they want to spend reading
CREATING NEW PAGES
Selecting page type
The key idea of Kindle Leaf was to allow customers to browse books via categories that matched their actual needs. The first step would be to allow the customers to choose the criteria they want to use to discover books - by their current mood, or by the amount of time they want to spend reading
Selecting data source
The key idea of Kindle Leaf was to allow customers to browse books via categories that matched their actual needs. The first step would be to allow the customers to choose the criteria they want to use to discover books - by their current mood, or by the amount of time they want to spend reading
Selecting a Smartsheet object as a data source
SETTINGS & CUSTOMIZATIONS
The key idea of Kindle Leaf was to allow customers to browse books via categories that matched their actual needs. The first step would be to allow the customers to choose the criteria they want to use to discover books - by their current mood, or by the amount of time they want to spend reading
.png)
.png)
.png)
Page layout & functionality
The key idea of Kindle Leaf was to allow customers to browse books via categories that matched their actual needs. The first step would be to allow the customers to choose the criteria they want to use to discover books - by their current mood, or by the amount of time they want to spend reading
Branding
The key idea of Kindle Leaf was to allow customers to browse books via categories that matched their actual needs. The first step would be to allow the customers to choose the criteria they want to use to discover books - by their current mood, or by the amount of time they want to spend reading
.png)
Roles & User Management
The key idea of Kindle Leaf was to allow customers to browse books via categories that matched their actual needs. The first step would be to allow the customers to choose the criteria they want to use to discover books - by their current mood, or by the amount of time they want to spend reading
.png)
.png)
Other app settings
The key idea of Kindle Leaf was to allow customers to browse books via categories that matched their actual needs. The first step would be to allow the customers to choose the criteria they want to use to discover books - by their current mood, or by the amount of time they want to spend reading
APP USER EXPERIENCE
The key idea of Kindle Leaf was to allow customers to browse books via categories that matched their actual needs. The first step would be to allow the customers to choose the criteria they want to use to discover books - by their current mood, or by the amount of time they want to spend reading
END-USER SCREENS
.png)
Log In
The key idea of Kindle Leaf was to allow customers to browse books via categories that matched their actual needs. The first step would be to allow the customers to choose the criteria they want to use to discover books - by their current mood, or by the amount of time they want to spend reading
Navigation
The key idea of Kindle Leaf was to allow customers to browse books via categories that matched their actual needs. The first step would be to allow the customers to choose the criteria they want to use to discover books - by their current mood, or by the amount of time they want to spend reading
Hovers and Pop-Ups
The key idea of Kindle Leaf was to allow customers to browse books via categories that matched their actual needs. The first step would be to allow the customers to choose the criteria they want to use to discover books - by their current mood, or by the amount of time they want to spend reading
Impact
The design of the X-Ray strip, landing and detail pages was granted 12 patents and publications.
UX concepts and patterns were adopted by Amazon Video team, who implemented XRay for Videos to display character and actor information for streaming shows.
.png)
ORG IMPACT:
CUSTOMER IMPACT:
-
Increased Kindle usage in academia and education
-
Created new use cases as study aids and research tools
-
Enhanced engagement from authors
-
Established new UX patterns for E-Ink screens
-
Set a new bar for innovation within reading industry
-
Functionality & patterns adopted by Video team