- Did you know prototyping can happen directly
within an org?
Let's learn more in episode four
of Be an Innovator with Design.
(funky music)
♪ Awesome Admin ♪
If you've been following along,
you know we are discovering how to redesign
that account page to give our users
a 360 degree view of their customer.
Leveraging principles of relationship design.
So far, we've discussed the first three phases
of design thinking.
Empathy, defining the problem, and ideation.
For episode four, I'm excited to hear
from LeeAnne and Adam about the fourth phase
of design thinking, prototyping.
- Thanks Rebecca.
So, Rebecca shared the stages
we have covered so far,
and I am so excited to get hands on
with some building today with my favorite phase,
prototyping.
Adam, tell us more about what we're going to do
in the prototyping phase.
- That's right LeeAnne.
The prototyping phase is where things
really start to get real.
It's where you might also start to feel
your first frustrations and constraints
in your ideas,
and this is a completely normal part of design.
There are many different ways of prototyping
from low to high fidelity.
The goal is to begin to get a feel
for what the end experience will feel like,
but with little investment or time or code.
Just a quick overview of the three types
of prototyping is...
Low fidelity prototype is typically a wireframe
or sketch on paper or a whiteboard.
A mid-fidelity prototype
starts to feel more real,
and it could contain some elements
like images and words,
but it is largely focused on an app
or page layout.
Often, tools used here is like Sketch and Adobe.
High fidelity prototype,
which is what we're gonna do today,
is an interactive experience.
It's built closer to what the actual app
will look like.
And in our case, it is the actual app.
We're gonna do it right in a DE org.
- So, prototyping really helps us test the ideas
that we generated in the ideation phase
in a low risk and highly iterative manner
before spending time and money developing.
I really love this approach as a way to explore
new ideas in a hands-on manner.
- That's right.
It saves time on tech and design debt
in the long run.
Some common benefits companies will realize
over time is that, you know, they'll see
greater efficiency and faster time to market
and to launch.
Lower product development costs.
Again, we're doing it right into DE org.
Thorough product testing, fewer redesigns
and just ultimately more user friendly products.
- So, now we're ready to get hands on together
and start prototyping in our demo scenario.
In this demo experience,
we're starting with a brand new
Salesforce environment
that has not been customized for our end users.
You can use your Trailhead Playground
or a free developer environment or your Sandbox
for these exercises.
Just make sure you aren't prototyping ideas
in Production.
So, in here in my demo environment in Setup.
First, I want to show you how I'm identifying
my two prototype pages.
In the App Manager part of Setup,
I've created two apps:
Prototype 1 and Prototype 2.
So, I open an account page in Prototype 1,
and I go into the App Builder, Edit Page.
In this prototype, we wanted to explore
using different related lists
and making those enhanced.
So, I'm on the App Builder page,
and I can see my large Related List - Multiple
component in the middle here.
What I'm going to do is I'm going to use
the standard component Related List - Single
to bring over some specific Related Lists
and really drill in to what related objects
my users need to see.
I'm also going to make these
Enhanced Related Lists to give my users
even more power over what they're doing
with Related Records on the page.
A fun trick
when you're adding multiple components
of the same type is that you can actually
do copy and paste
just to add duplicate components
and then change the Related List object.
Now, I also wanted to define what people see
based on the record.
So, I've added my Contract Related List - Single,
and I'm gonna go ahead and make that visible
only when the account is not a prospect.
So, I've set the component visibility there,
and now I can remove
my larger Related List - Multiple component.
Now, when I'm finished updating this page
with a rough draft of my prototype,
I'm going to save it and activate it
and assign it as the app default for Prototype 1.
This will just make it really easy
in my developer or Sandbox environment
to keep track of which prototype is which
when I'm gathering feedback from end users.
Now, I can visit my Prototype 1 page,
and see those individual Enhanced Related Lists
as well as that
conditional component for contracts.
Now, I'm in Prototype 2, and I click
into the account page and I'm gonna go again
to App Builder to edit the page.
So, in this prototype, we wanted to explore
splitting up the page into more tabs
and sections.
So, first I'm going to add a tab.
I click on the tab's component
and on the right,
I can add a custom tab to the tabs
I already have.
We're gonna call this one Contacts.
Now, when I click into that Contacts tab,
it's empty, but I can add
that Related List - Single
and select for Contacts.
Awesome, so I've added my additional tab
to get feedback on for my users.
I also want to break up the page into sections.
Now, because this is a standard object,
we're gonna go into the Page Layout editor
to break up sections.
However, if you're in a custom object,
you can do this right in App Builder.
So, I'm in the Page Layout editor for Account,
and I can go ahead and create sections
like Contact Info,
and drag in some specific fields for that,
and let's also create another section
for business information.
When you have a lot of fields on the details area
of a record,
it can be very handy
to add multiple field sections
to help your users navigate through
all of that text.
Now, I'm going to Quick Save that,
and go back to my App Builder page,
and I clicked Refresh,
and now I can see those sections,
and I have my Contacts tab.
So, this page, I'm going to assign
to Prototype 2,
and click Next, Desktop and phone, and Save.
So now, when I go back, it's easy to toggle
between my two apps and really look
at those two pages for Prototype 1
and Prototype 2.
Okay, great, so Adam, I built my two prototypes
and I saved them in my org under my two apps.
Next, I want to share this with my users
and gather feedback.
- Yes, this is where we reconnect
with the same users and stakeholders
that have been participating in our previous
design phases.
To do this, it can be as simple
as sharing screenshots or your Sandbox logins
to these individuals.
You can gather feedback in any way that works
for you.
Over chat, over email, over focus group,
or schedule one on one time
to review the prototypes and collect feedback.
The most important thing is
to share the prototypes that you had built
from these ideas,
so that we have this feedback and buy in
to proceed to the next phase.
- So, as we're sharing these two prototypes,
what do we do if we get positive feedback
about elements that exist in both the prototypes?
- Yeah, absolutely, this is super common.
Often, final solutions are a combination
of multiple prototypes or aspects
from each of the prototypes.
Totally normal.
- Awesome, so today, what we did together
was build those two top ideas
from our last episode in the ideation phase
and built them into prototype pages
in our developer environment or our Sandbox.
Then, once we build those pages,
we shared them with our team for feedback.
If you're working with your users or colleagues
throughout this project,
this is a great time to share those prototypes,
but if you are working on these episodes solo,
go through this page building process
and consider what works and what doesn't work
about each idea or page.
Try going through the steps
that a user may go through
in their day to day workflow,
and think about how much scrolling
and clicking and toggling around the page
is required.
Back to you, Rebecca.
- I think prototyping may be
my favorite phase too, LeeAnne.
All right, so to summarize some key takeaways
from this episode...
One, prototyping can come in low, medium,
or high fidelity.
Use each, depending on the use case.
For example, for those of you joined us last year
for Be an Innovator,
you may remember that we did some
medium fidelity prototyping
when we were sketching out our record page
in a Google slide before we went to go build it.
Some other takeaways...
Prototyping can save development costs,
improve the user experience,
and reduce future redesigns,
so, no reason not to do this.
And lastly, we can do some rapid prototyping
directly in a DE org.
We can get hands on.
All right, so now, it's your turn.
So, use a Developer Edition, or a Sandbox,
or a Trailhead Playground
to build two brand new pages based
on your two prototype ideas.
You can base those on your ideas
if you've been following along
with these exercises,
or follow along and build what we're building.
And then, share your two beautiful prototypes
with us on Twitter using the hashtag,
Be an Innovator,
and you can dive deeper into these topics
with the App Design and Prototyping
and UX Prototyping Basics modules listed
in the Trailmix.
And then, join us for episode five
of Be an Innovator with Design
where we will learn how to build and rollout.
(funky music)