Stack Up — Jasmine Lockwood

PROGRAM WEBPAGE DESIGNS

In Stack Up's new StOP Program page design, I reimagine existing program pages and shape a dynamic experience for member & community participation that lead a ux renewal unifying all programs.

CLIENT

Stack Up

DURATION
4 Weeks, Winter 2018

ROLE

Copywriting/Editing
UX/UI
Interaction Design
Visual Design

"Veterans are Our mission. Gaming is Our passion."

↠ STACK UP

CONCEPT

Insight

Community engagement is the lifeblood of Stack Up opportunities and initiatives.

Previous program pages poorly communicated the promise of the organization's life-changing experiences due to a barren interface with limited use and lack of personability.

Challenge

With a new, highly anticipated program on the way, I worked with urgency to turnaround stimulating content that builds confidence through storytelling and improves accessibility of resources that are essential to outreach, retention, and success rate.

Solution

A fresh step is taken within Stack Up's brand to strengthen the bond between the company, users, and real world opportunities.

Designing the new StOP Program page set the foundation for total unity cross-program. To raise awareness, improve usefulness, and build character, I focus on increasing the visibility of core features & interactions, optimizing usability, streamlining media, and easing access program-to-program & between sections.

FINAL VISUAL DESIGN

OBJECTIVES

Goals

Support
Connect with resources to motivate & engage current and new members

Inspire
Present easy to act on info to shed awareness and steer involvement

Serve
Deliver intuitive interactions that attract and drive traffic

CORE DESIGN FEATURES

RESEARCH

Target Audience

Previous and active-duty US military service members who game and the supporting community

Understanding

In and after service, our protectors deserve protecting too.

I researched interviews, articles, statistics, testimonials, and videos, while meeting with the program director & brainstorming with my team to understand and pinpoint that:

• Gaming brings people together and yields a sense of purpose and belonging that lightens the load of depression and fights the tendencies of isolation

• The term overwatch speaks to the heart of those with military experience and urges any level of outreach whether it be for empathy and connection or even a lifesaving crisis-intervention

• Having something to look forward to & memories to smile back on helps channel through trauma and instill promise that life is worth living & enjoying

• Reassurance and resources can match the courage to seek support with the strength and security to carry on

Efforts aim to instill an understanding in users that their service is invaluable, safety is cared for, and future matters.

PREVIOUS DESIGN

Groundwork

Stack Up is a Growth-Driven Design client that at ProFromGo we partnered with regularly to scope out big picture needs and plan successive projects.

I joined weekly progress meetings with my Operations Manager and Program Director Stephanie Owens as lead of ux to prioritize company initiatives and assess the existing experience.

We lead from an awareness that weakness in the foundation of program pages drew mainly from an excess of unnecessary content, poor hierarchy and info architecture, and uninventive visuals and interactions.

WIREFRAME

Approach

I focused on developing a foundation with flow and ui elements that could later seamlessly adapt existing programs despite the differences in the nature of content.

The all new StOP program uniquely offers an online support hotline whereas the other three programs present in-person opportunities to volunteer, attend gaming events, and receive entertainment care packages.

I introduced wireframing to our internal process to better communicate decisions to my team members and our client. Mapping out content gave others a platform for feedback and set boundaries for the copy I was responsible for which expedited our revision cycle, rapidly initiated visual design, and gave me a headstart on reshaping the programs that already existed.

Final Design

Forms and media set the other programs apart and pushed the boundaries of the StOP Program page design which consisted primarily of copy to convey a secure message.

Section by section, I was challenged to modify content and unify a format to support programs each varying in length/availability of copy and order/description of input fields in forms.

In addition to visual redesign, I introduced new features to evolve functionality and interactivity. Cross-program, I maintained a consistent use of type, heroes, calls-to-action, sticky navs, content cards, backgrounds, and icons but leverage media the other programs offer to incorporate videos in missions, photo blocks by recruiting messages, and photo galleries by testimonials. Forms are also optimized with step-by-step guides and photo uploads.

BRAND STANDARDS + STYLE

Influencing Branding

To get an understanding of the existing brand, I identified each visual element and organized them by use.

Working project-by-project on Stack Up’s existing website meant inheriting certain general uses of color, type, buttons, icons, etc.

Several treatments carried into new designs for consistency, but I expanded on the depth of hierarchy in typography and distinction of link and button calls-to-action. To initiate new standards, I introduce the use of content cards, color blocked backgrounds, form fields, and sentimental style of iconography.

Direction

bold • energectic • friendly • uplifting

Bright, punchy visuals are use to bring the intense energy of imagery users experience while gaming. Breathing room in a generous flow of negative space gives an approachable voice to content and spreads the inviting nature of Stack Up’s mission.