SoutheRN SCHOLAR

Branding | UX & UI Design
Southern Scholar Website Pages

SOUTHEAST VALLEY ALLIANCE

Southeast Valley Alliance is a veterans association based out of Arizona. They provide access to a range of resources and information that are helpful to veterans and their families. These resources include job training and placement services, educational opportunities, mental health resources, and financial assistance.

PROBLEM = OPPORTUNITY

Southeast Valley Alliance was in need of a new website that would allow them to seamlessly collect donations. They do not have a physical location at the moment and will be relying on donations to finance one. It is crucial for them to have a means of collecting donations, so that they are able to provide veterans and their families with the support, advocacy and resources that they need.

DESIGN SOLUTION

I worked with a team of designers, using an iterative design approach to build the new Southeast Valley Alliance website. We relied on research and feedback from one another as well as Southeast Valley Alliance board members in order to better refine and improve our designs.

MY ROLES

- Research
- Competitor Analysis
- User Personas
- Information Architecture
- Wireframing
- Prototyping

TOOLS USED

- Figma
- Miro
- Trello
- Illustrator
- Photoshop

Human-Centered Approach

To achieve our goals for this website, we followed the five step design thinking process. The goal here being to first understand the problems that needed to be solved, so that we could then come up with solutions to successfully solve those problems.

6 step design process

WHO ARE WE DESIGNING FOR?

It was important for us to deepen user empathy by better understanding who the typical user of the new website was going to be. To do so we spoke with the Southeast Valley Alliance board members to learn more about the demographics of their users. With the primary purpose of the website being to collect donations, we wanted to better understand our potential donors. This allowed us to create a couple of user personas that accurately represented our target users. From here we then performed competitor analysis to help further guide our design process.

User Personas

User Persona 1User Persona 2

Inspiration From Other Nonprofits

We kept the focus of our research on other nonprofit organizations. More specifically, we wanted to gain a better understanding of how they were using their websites to collect donations. This allowed us to design an effective system for collecting donations of our own. We also just wanted to get a better overall feel for the experience other similar organizations were offering their users.

Southeast Valley Alliance research & inspiration moodboard

DEFINING WHAT PROBLEMS TO SOLVE

It was now time to clearly define the problems that needed to be solved. With the primary goal of building a website to collect donations established, we needed to further define what other problems the website would solve. In doing so, we used the previous data and research that we performed to guide us and keep our users as the primary focus.

It was determined that our team would design a fully responsive four page website, designed for both mobile and desktop. The website would also allow for users to learn more about Southeast Valley Alliance and get in contact with them. Most importantly, it would solve their biggest problem, allowing users to make donations so that they can finance their new physical location.

CREATIVE EXPLORATION & CONCEPT DEVELOPMENT

With our goals for the website defined, it was now time for us to begin the ideation phase of our design process. We brainstormed together as a team and developed a number of viable solutions to the problems that we needed to solve for our client and their users.

Information Architecture

The Southeast Valley Alliance website will continue to evolve over time, with more pages and information being eventually added. To get the website off the ground though, the client agreed that a simple four page website would be a great starting point. This is how we laid out the information architecture of the website based off of the current needs and goals.

Southeast Valley Alliance website information architecture

Website Blueprints

With the information architecture set, we used Figma to begin wireframing the new website. Our approach was an iterative one that combined our ideas and concepts into one polished set of wireframes. We took a mobile-first design approach and then scaled up our designs to develop a cohesive set of desktop wireframes.

Southeast Valley Alliance mobile wireframes

Mobile Wireframes

Southeast Valley Alliance desktop wireframes

Desktop Wireframes

THE NEW WEBSITE

Now that our wireframing was complete, the next step for us was to build our prototypes in Figma. Our design thinking process influenced all of the decisions that we made up until this point and led us to the final product seen below.

Southeast Valley Alliance Mobile Mockups

Mobile Prototypes

Southeast Valley Alliance desktop home page prototype

Desktop Home

 Valley Alliance desktop about page prototype

Desktop About

 Valley Alliance desktop contact page prototype

Desktop Contact

 Valley Alliance desktop contribute page prototype

Desktop Contribute

TEST & REFINE

The next step in the design process would be to run some usability testing on our prototypes. From there we could iterate and make further improvements where needed, before moving into the development stage of the website.

We recognize the importance of measuring performance indicators for a project like this. Up until this point in the process though we have been unable to take any such measurements. Once user testing were performed on our final prototypes, measurements for behavioral metrics could then be gathered. We are also eager to see how many donations will be collected on the new website, which would allow us to further measure how successful the project was.

CHALLENGES & LEARNINGS

Having the opportunity to work for a nonprofit veterans association where I got to make a difference for people and help those in need was a wonderful experience. It is an opportunity that I am grateful I had the chance to be a part of.

More than anything else, nonprofit organizations need donations in order to succeed. Our team designed a system that allows Southeast Valley Alliance to effectively collect donations, which will in turn open up more opportunities for them to achieve their goals by helping more people.

One of the biggest things I took away from the experience was learning how to communicate better as a designer. Holding meetings with the Southeast Valley Alliance board members taught me how to verbalize my thoughts and ideas, in order to help them to understand the importance of the decisions we were making, and why we were making them. 

I also learned a great deal about working on a team with other designers. Something that I found challenging was navigating those subjective visual design decisions that we each felt strongly about at times. This taught me how to listen, pick my battles and just work together as a team in order to better serve the client and their users. Overall this project helped me to better understand how to implement and refine my design thinking skills.