visual + ux design case studies · 2018. 6. 22. · experience was complicated and disconnected...
Post on 27-Sep-2020
0 Views
Preview:
TRANSCRIPT
RACHELLE NIDRA SOMMA
rachel lesomma@gmail .com www.rachel lesomma .com
VISUAL + UX DESIGN CASE STUDIES
Rachelle Nidra Somma • www.rachellesomma.com
LSU TIGER ATHLETIC FOUNDATION
THE CHALLENGE
MY ROLE
Drawing a line between donations and impact.
The Tiger Athletic Foundation (TAF) is the primary fundraising
engine behind Louisiana State University (LSU) Athletics,
contributing to student scholarships, infrastructure
development and enhancement, and to the overall growth
of LSU’s athletic program. They see themselves as the
philanthropic “team behind the Tigers,” but by the outside
world are often viewed as little more than a premium seating
ticket office.
Making matters worse, donating to TAF has never been easy.
Requiring significant effort, time, and money, the donation
experience was complicated and disconnected from the
real impact donations were having on LSU and the lives of
student athletes, alienating an emerging segment of donors
who wanted an easier way to give and to know how their
donations were being used.
Collaborated with two UX designers, one visual designer, and
one developer. Worked closely with the visual designer to create
the photogenic, personal, look and feel of TAF and the developer
to make sure this vision was pushed to the end.
Rachelle Nidra Somma • www.rachellesomma.com
INSIGHT
The human connection with students energizes donors.
When looking at pictures of a finished project funded by TAF,
donors don’t want to see an empty weight room. They want to
see a weight room being used by real students.
LSU Tiger Athletic Foundation
Rachelle Nidra Somma • www.rachellesomma.com
LSU Tiger Athletic Foundation
APPROACH & SOLUTION
Be where the action is at.
College sports is an experience–one that needs to be had
first hand to truly understand it. So we took a trip Baton
Rouge, and attended an LSU home football game to get the
full donor experience. While at the game, we interviewed
donors about why they donate and how they interact with
TAF’s website and toured several TAF-funded facilities to see
first hand how TAF contributes to the LSU athletic program.
Using what we learned from donor interviews and from
workshopping we did with the TAF team while in Baton
Rouge, we came to the conclusion that any experience we
designed had to tap into the experience of LSU sports. We
learned from donors that they care about specific sports
and they care about student athletes, so we started here –
with these stories guiding the entire design. For instance,
we created entirely new sports pages so donors can learn
about TAF’s impact on any LSU sport through facilities and
student-athlete testimonials, and donate to specifically to that
sport from there.
Rachelle Nidra Somma • www.rachellesomma.com
LSU Tiger Athletic Foundation
APPROACH & SOLUTION (Continued)
But also make it easier.
While compelling storytelling that connects personally with
donor experience will inspire more giving, giving must still
be easy and accessible. By simplifying the process of giving
into three easy steps, removing the login requirement, and
giving donors the option to donate any amount they choose,
TAF donations can now be made by anyone, in a matter of
seconds, to a specific team, sport, or project.
Using a mobile-first approach helped us simplify the
experience, encouraging us to focus on communicating
using bite-sized content
Rachelle Nidra Somma • www.rachellesomma.com
LSU Tiger Athletic Foundation
OUTCOMES
TESTIMONIALS
30 Sec - The time it now takes to make a donation
to the Tiger Athletic Foundation.
“Now our donors can truly understand the profound
impact they are having on LSU athletics.”
- Rick Perry, President of the Tiger Athletic Foundation
Rachelle Nidra Somma • www.rachellesomma.com
FORM BUILDER UNQORK REDESIGN
THE CHALLENGE
Unqork is a fulfillment platform for financial services. There
are two components to Unqork’s platforms--Unqork Express
and Form Builder Unqork (FBU). FBU is a semi-customizable,
out-of-the-book form.io tool that is used by the Unqork
employees and for clients such as Liberty Mutual to build
online insurance applications.
The only current users were Unqork employees who learned
through trial and error the idiosyncrasies of the system. They
were frustrated with the platform because it was limiting,
clunky, not user friendly, visually confusing, cluttered, and it
was causing a backlog of projects.
THE SOLUTION
This project’s goals were to rapidly understand the current
painpoints of using FBU, prioritize improvements and
features, deliver a better user experience that would be
vetted and viable for UNQ’s development team to build and
make it visually cohesive.
MY ROLE
Collaborated with two UX designers and one visual designer.
I worked with business leaders and developers to figure out a
rough roadmap of formbuilder features (need to have vs nice
to have), wireframing, user testing and desiging these features,
then taking these results and collaborating with the team to
ensure that these interactions reflected best practices.
REDESIGNED SITE
Rachelle Nidra Somma • www.rachellesomma.com
Form Builder Uqork Redesign
ORIGINAL SITE
FORM BUILDING SPACE CHALLENGE
This space is the screen shown when a user
clicks “Create New” from the resources page.
This space is used to build forms that comprise
online insurance applications.
As you can see, there is nothing indicating to the
user on where to start. It is unclear where and
what the title entered is used for, how to build a
navigation, no quick way to preview the form once
elements are added, where tagging appears, and
no way to scan sections and components of the
page. As for the design, everything is lost in the
grey, the top nav bar links are not legible against
the branding color, the importance of buttons
is lost and icons are only partly used under the
primary fields.
Rachelle Nidra Somma • www.rachellesomma.com
Form Builder Uqork Redesign
FORM BUILDING SPACE SOLUTION Containing Approved Features
User can click into section name to edit or click “add section” which will display below existing sections.
Toggle between Build and Preview of form.
Drag and drop of Components and
Processes.
Toggle between Components and
Processes.
Toggles for Comments and Processes. Processes shows the one added, the description
and components attached.
Rachelle Nidra Somma • www.rachellesomma.com
Form Builder Uqork Redesign
COMPONENT CONFIGURATION MODAL CHALLENGE
This is an example of the modal that appears
once a user drags a component from the left rail
to the build space. This example is for “short text
field”. These modals allow users to configure the
components they’re adding.
The issue with this besides the grey coloring and
the spacing/sizes of the form fields is also the
classifcation of the naming of these components
are not a universal language and not easy for client
users to understand. There is also no fast way to
preview the configuration or a clear way to test it.
ORIGINAL SITE
Rachelle Nidra Somma • www.rachellesomma.com
COMPONENT CONFIGURATION MODAL SOLUTION
Tabs clearly display the steps required to configure a component.
Preview area allows user to see what they are configuring.
Language has been vetted with Unqork employees and client users so it is more intuitive universally.
Templating and commenting are separated and visible functions.
Form Builder Uqork Redesign
Rachelle Nidra Somma • www.rachellesomma.com
Form Builder Uqork Redesign
PREVIEW SCREEN CHALLENGE
Users are able to toggle to a preview mode to
test and view what their form will look like in its
finished state.
The way the forms are stacked currently don’t
show a coherent flow and it is hard to scan when
stacked left and right. Also the way the sections
are broken out isn’t obvious with just a line to
divide them which gets lost in the material design.
ORIGINAL SITE
Rachelle Nidra Somma • www.rachellesomma.com
PREVIEW SCREEN SOLUTION
Form Outline remains visible in preview and can be used to anchor the user within the form by selecting Sections, Pages or Components. Components and
Processes remain functional in preview mode.
Form can be previewed in desktop, tablet or mobile.
Form Builder Uqork Redesign
top related