Override the default image zoom level and lock it to
either ‘cover’ or ‘contain’ using the icons on the right.
zoom lock
Arrow Keys
for forward & backSpace Bar
to cycle image zoom.Expanding Youth Entrepreneurs’ new learning
platform to house their full curriculum while exploring
short, medium & long term product goals.
e created a training tool in Phase I
that decreased the time for new
teacher training. It was also designed to be
a testbed for a larger learning platform that
would bring the majority of YE’s organiza-
tional functions online. Phase II therefore
began with research where we evaluated
the data & feedback from our first iteration.
heir new product was generating leads
better than expected, and was well
received by educators. This subtly reshaped
the opportunities we had identified in phase
one. We then worked with YE to identify key
organizational objectives and turned them
into product goals that were further distilled
down into a product road map.
hase II was then defined as the
minimum viable (& likable) product.
that we could create to achieve both short
and key medium goals while setting up
our long goals. The result was an
evolution of the product from a training
tool into a platform that housed their
entire Curriculum.
By this point, we had a score of ideas
with the power to transform YE, but we
couldn’t judge which were in alignment
with where they wanted to be as an in
the next three to five years. We lead them
through a series of client exercises
asking how Phase I had influenced the
way key YE stakeholders thought about
their organization and the future.
Beginning with a user study helped us
identify key weaknesses in our product.
YE asked their educators for feedback,
which gave us valuable insights into the
things educators struggled with. In
addition to a list of improvements, we
also discovered new user segments and
ultimately decided to add three user
personas based on their YE experience
As the product transitioned to
representing the entire YE Curriculum,
we recognized that it would also be at
the center of their brand. Rather than
keeping it as a separate entity named
Entre-X, YE chose to rechristening the
platform as YE Academy. This transition
could then be the central focus of their
biggest yearly conference.
I acted in a consulting role to both
Fervor and YE’s team, leading them
through a series of exercises using my
six steps to create a product roadmap.
Unlike my other UX work, I’m not
publishing that document here as it
mostly pertains to YE’s organization
rather than the product I designed.
While I lead our teams through white
boarding sessions, client exercises, and
a sequence of proposals based on
solutions we drafted together, I can’t
claim credit for the final documentation.
Sara Ramey, Fervor’s Brand Manager for
YE, worked tirelessly with both teams to
make sure everything was completed
on time. While I was responsible for the
ultimate product, Sara carried the
heavier load of client relations as well the
responsibility for integrating it into YE’s
brand and their other digital marketing
efforts. I’m a big fan of shared leadership,
and I believe this kind of collaboration is
the key to great strategic planning.
While we followed my process and
templates, the credit for the final
roadmap goes to Fervor’s team. I
created a proposal based on our
discussions, but they took all of these
pieces and compared them to the
agency’s available resources and then
worked with YE to define priorities by
comparing costs and timelines to their
long term business objectives. Both the
Brand Director, Sara Ramey, as well as
the Marketing Manager, Kerri Voyles,
improved on my proposal and
templates to create the document you
can see on the right. They also sold YE
on continuous release with dedicated
resources rather than the traditional
agency waterfall approach with an
inflexible scope. Once this was signed
off on, it was clear which goals would
make it into the MVP before launch.
There are different product development frameworks that
evangelize short over long term strategy with an emphasis on
pivoting quickly with new information. This can be lean and
fast, but it can also be detrimental to the user experience
resulting in a Frankenstein monster. We wanted to adopt a
philosophy of compromise that adopted the best pieces of
agile and rapid product development while still considering
long term possibilities with the flexibility to adapt quickly based
on changing information. One example of this was mapping a
clear information architecture that included our long term
product goals, looking at how those would be used by
personas and uses cases, and including placements for those
components in our short-term wireframes. You can see
examples of some of this documentation below.
A new philosophy is emerging that
takes ‘mobile first’ design to the next
level. ‘Mobile first’ simply states that
content and functionality should be
designed for the smallest screen size.
However, iOS and Android have now
began to set the usability standards for
human based interaction. Mobile first
design often starts with resized and
stacked content, creating infinitely
long pages. This is an inherently poor
user experience. Native apps have
defined unique interactions and
behaviors that are optimized for small
screens and fat fingers. Until recently,
these complex interactions were
difficult to mimic in web based apps.
However, browsers and bandwidth have
come a long way and small touch
devices are now ubiquitous. I believe
that it is not just possible, but necessary
to design web apps with the same
interactions found in native apps. This
was my approach for YE Academy.
I normally define the IA from using user journeys, content,
and navigation. In this case, our LMS had to match the
curriculum’s structure. Unfortunately, it had been created
over time by different people, and different units did not
always use the same language or organizational patterns.
Our first priority was to nail down our language and structure.
Following existing academic standards, we defined 5 content
levels. The highest would include Topics and Directories
followed by Lessons and Resources. Lessons could have
Video Segments, Resources, and Materials in addition to
information including themes, user reviews, and description.
We then considered how users would be move through the
curriculum. I identified 5 entry points that defined our user
journeys. This informed the interaction design so that users
would have context regardless of which flow they came from.
I explored several alternatives for
displaying the curriculum, from a simple
expanding folder tree to a conventional
five-level navigation scheme through
hundreds of pages. In the past, YE had
tried creating a list of links to resources.
Educators didn’t use it because it wasn’t
easy to understand and explore. I
believe that compelling user exper-
iences are a necessary component of a
minimum viable product, something
often left out of feature lists. As a final
alternative, I tried an expandable
curriculum panel. Although this was the
most risky, we did user testing on an
early concept that confirmed it was
both understandable and held the
highest user engagement.
At its most basic, curriculum levels
would appear in the panel on the left
while content would appear on the
right. I purposely defined each level as a
column with the same width as it would
appear on a mobile device. Sliding
these levels back and forth in the
curriculum panel meant that they
appeared to “stack” on a mobile device
without requiring extra work. This did,
however, require special panel behavior
at different screen widths.
In a normal website project, a click-through prototype is
perfect. I used a service called InVision to do this in Phase I.
In this case, however, we needed to explore the ways the left
panel behaved based on where you were in the curriculum
as well as screen width. I chose to hand-code this prototype
by hand using jQuery and CSS Media Queries to define the
logic for the panel while I continued to use flat images for
content to avoid actually creating the entire product. It works
similarly to InVision, with ‘hotspots’ that light up when you
click randomly on the screen. Check it out!
The video below is a screen capture of
me clicking through the different levels
of the curriculum. It starts at desktop
screen width, which I then resize to
demonstrate how the content and panel
adapt for smaller device widths. I
mention that this was hand-coded by
me, but the truth is that this kind of
interaction design requires experim-
entation. The process of programming
a functional prototype revealed
unexpected details in addition to
aspects of the design that could be
improved, which I was able to do
through rapid iteration. Creating new
app interactions often requires a slew
of modifications after a developer builds
it. Many UX Designers use Balsamiq to
create interactive prototypes, but I
believe that nothing is as effective as
creating a hand-coded prototype. This
also allows for truly comprehensive user
studies. Finally it can effectively sell an
abstract idea to clients & stakeholders.
Because of my design process, there
isn’t a big surprise reveal at the end of a
project. Everyone has been involved in
every step. However, there was a final
opportunity for change requests after
which I package everything up and
document it for handoff. This included
all of the work seen here for both Phase
II as well as the concept work we did for
YE Academy that I’ve split into Phase III.
While I’ve seen products at the
enterprise software level that are many
times the complexity of YE Academy,
this was the biggest handoff I’ve seen
from a project done by a small team
over three months. My contract for
both Phase II and Phase III was
completed in 270 hours, including
initial business consultation, collab-
oration to create a product roadmap,
concept work, user testing, design
process, prototyping, & client relations.
I’ve written a more extensive article
about everything I include in a pixel
perfect handoff, if you’re interested.
I’ve also included thumbnails for the
spec documentation, custom icons, and
the documents portal below. The final
delivery included the following: 69
unique design mocks; 12 photoshop
files, each containing a handful of
artboards; 17 process docs; and 51
resource files for development. The
prototype contained 6,042 lines of
unique code with 325 associated files
while the final page count for all
documentation generated throughout
the project exceeded 120 pages.
I was the principal designer for all of the work shown unless otherwise noted, and I am the author and creator of the case studies within this portfolio. This website exists as a digital resume for the purpose of providing proof of experience in order to gain future potential work. Many of these projects were completed collaboratively in a “creative for hire” agency, freelance contract, or software company with copyright assigned to that entity or client.
I always have language in my creative contracts that I discuss with clients and employers that specifies my ability to display my work publicly. This includes concepts and processes as well as final deliverables, given that all of these are necessary to display my competence as a UX and Product Designer. I follow best practices to the best of my ability to assure that my work for clients is in compliance with copyright, either through open licensing or purchase of stock photography, mockups, icons, and other creative resources. However, I recognize that digital ownership is sometimes disputed on the internet. I do not assume legal liability for work completed in good faith on behalf of corporations and organizations, even if it is displayed here in my Resume. Even so, I take copyright and intellectual property seriously as a professional designer and photographer.
If you have any questions or concerns about something displayed here, please contact me and I will do my best to resolve them as simply and expediently as possible. Thank you!