Why a page layout component?
Why a page layout component?
Why a page layout component?
Similar data concepts exist across the Rebellion product line, but designers were still building wireframes and prototypes from scratch. The result? Inconsistent design patterns, repeating page layouts, and a lot of design debt.
Similar data concepts exist across the Rebellion product line, but designers were still building wireframes and prototypes from scratch. The result? Inconsistent design patterns, repeating page layouts, and a lot of design debt.
Similar data concepts exist across the Rebellion product line, but designers were still building wireframes and prototypes from scratch. The result? Inconsistent design patterns, repeating page layouts, and a lot of design debt.
How I measured success
How I measured success
How I measured success
My success metrics were whether I could shorten the time to prototype for designers, reduce design debt, and identify gaps in Boba. This last metric was crucial for our front-end engineer to be able to prioritize certain components based on need.
My success metrics were whether I could shorten the time to prototype for designers, reduce design debt, and identify gaps in Boba. This last metric was crucial for our front-end engineer to be able to prioritize certain components based on need.
My success metrics were whether I could shorten the time to prototype for designers, reduce design debt, and identify gaps in Boba. This last metric was crucial for our front-end engineer to be able to prioritize certain components based on need.
Identifying page patterns
Identifying page patterns
Identifying page patterns
In order to create an adaptable component, we needed to first research and collect existing screens, identifying the overall intent and page type of each one. Lots of questions arose at this point:
"Is this a create view or edit view?"
"What are the identifiable characteristics?"
"Why is this data in a table and not a graphical element, like a chart?"
In order to create an adaptable component, we needed to first research and collect existing screens, identifying the overall intent and page type of each one. Lots of questions arose at this point:
"Is this a create view or edit view?"
"What are the identifiable characteristics?"
"Why is this data in a table and not a graphical element, like a chart?"
In order to create an adaptable component, we needed to first research and collect existing screens, identifying the overall intent and page type of each one. Lots of questions arose at this point:
"Is this a create view or edit view?"
"What are the identifiable characteristics?"
"Why is this data in a table and not a graphical element, like a chart?"
Exploring new ideas
Exploring new ideas
Exploring new ideas
The other intern and I took our identified patterns and started exploring alternative ways to represent the concepts in each page type. Our proposed solutions would need to accommodate datasets in different forms, so we had to really think outside of the box. Later, a review session with our UI engineer helped us breakdown the rationale behind each design, document UI elements and raise questions about scalability.
The other intern and I took our identified patterns and started exploring alternative ways to represent the concepts in each page type. Our proposed solutions would need to accommodate datasets in different forms, so we had to really think outside of the box. Later, a review session with our UI engineer helped us breakdown the rationale behind each design, document UI elements and raise questions about scalability.
The other intern and I took our identified patterns and started exploring alternative ways to represent the concepts in each page type. Our proposed solutions would need to accommodate datasets in different forms, so we had to really think outside of the box. Later, a review session with our UI engineer helped us breakdown the rationale behind each design, document UI elements and raise questions about scalability.
(SKETCH FEEDBACK)
Using feedback from one another, we then iterated on each other's sketches. From here, we were able to identify which page types would have the least amount of constraints, thus, would need little refinement and consideration.
(SKETCH FEEDBACK)
Using feedback from one another, we then iterated on each other's sketches. From here, we were able to identify which page types would have the least amount of constraints, thus, would need little refinement and consideration.
(SKETCH FEEDBACK)
Using feedback from one another, we then iterated on each other's sketches. From here, we were able to identify which page types would have the least amount of constraints, thus, would need little refinement and consideration.
Initial page prototypes
Initial page prototypes
Initial page prototypes
Focusing on the basic list view and detail view layouts, I visualized my sketches into med-fi mockups. My design documentation really came in handy here, as I was able to use it to callout the missing or unrefined components in our design system. The feedback I received as I was designing ensured that the solution would fit everyone's needs.
Focusing on the basic list view and detail view layouts, I visualized my sketches into med-fi mockups. My design documentation really came in handy here, as I was able to use it to callout the missing or unrefined components in our design system. The feedback I received as I was designing ensured that the solution would fit everyone's needs.
Focusing on the basic list view and detail view layouts, I visualized my sketches into med-fi mockups. My design documentation really came in handy here, as I was able to use it to callout the missing or unrefined components in our design system. The feedback I received as I was designing ensured that the solution would fit everyone's needs.
After discussing with my team, however, I realized the detail view required more consideration than we had time for. So, I focused on the basic list view view from here.
After discussing with my team, however, I realized the detail view required more consideration than we had time for. So, I focused on the basic list view view from here.
After discussing with my team, however, I realized the detail view required more consideration than we had time for. So, I focused on the basic list view view from here.
Components and abstractions
Components and abstractions
Components and abstractions
Now came the fun part: identifying the components and groups in the page layout. I worked with our UI Engineer to break down the content groups, so that applying auto-layout would be easy.
Now came the fun part: identifying the components and groups in the page layout. I worked with our UI Engineer to break down the content groups, so that applying auto-layout would be easy.
Now came the fun part: identifying the components and groups in the page layout. I worked with our UI Engineer to break down the content groups, so that applying auto-layout would be easy.
