visual + ux design case studies · 2018. 6. 22. · experience was complicated and disconnected...

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.


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



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.



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



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


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


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.



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.



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


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.




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


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.


visual + ux design case studies · 2018. 6. 22. · experience was complicated and disconnected...

Documents