Alex's Lemonade Stand Foundation Redesign

Website & App Design

Tools: Adobe XD, InVision, Figma, Adobe Photoshop, Adobe illustration, Miro, Trello

My Role: UX/UI Designer

Project Type: This is a group project and has been created during the Bootcamp period.

Project Description

Alex’s Lemonade Stand Foundation is a non-profit organization that funds research initiatives in the battle against childhood cancer. Our objective is to redesign the site in a way that helps this organization demonstrate its purpose more effectively and attract more individuals who want to help children with cancer. It should also provide its users with information on their mission and how they are helping, plus make it easier to navigate the site. This would make it easier for a potential donor to donate to the charity.

alexs-lemonade-stand-3-1300×800-1

The Problem

undraw_Questions_re_1fy7-1-1

The website for Alex's Lemonade Stand was overwhelmed with text, had a non-consistent design, and was hard to navigate. Our team aimed to improve the website's UI design and reorganize relevant information to highlight children's cancer. We also wanted to make it easier for users to donate money and navigate their way through the site.  We asked ourselves how might we achieve both objectives at the same time.

User research is the best way to initially identify a target user and get to know more about their thoughts and needs. We decided that 1-1 interviews and an online survey were essential steps in the process.

Interview Plan

undraw_Organizing_projects_0p9a

We began by conducting user 8 interviews (2 per person) and an online survey to discover how users felt about the overall experience of browsing Alex’s lemonade stand.

Methodology

undraw_video_call_kxyp

1-1 Interview

          - Eight 1x1 user interview
          - Held the interview on March 20
          - Select users with a different job and gender in             order to see the common points between  different types of person
          - Around 10 questions had been asked

Online Survey

          - Through Google Form
          - Posted on social media, March 13
          - 6 Participants after two days

Interview Transcript

There are some thoughts that interviewees said about the original design of the ALSF website

undraw_female_avatar_w3jk-1

“The colors and layout look like an elementary school’s website. Overall, it's an adorable website. But the problem here is I have no idea which part is more important that I need to check it first.”

Jennifer, 26

undraw_male_avatar_323b-1

"The web structure and information is clear but the layout sucks. Just by looking at the picture of children smiling face, I could tell is something about child, but could not associate with cancer until I read the wording."

Jason, 27

User Insights

Alex Lemonade Stand Foundation's website wants to achieve the purpose of raising donations for childhood cancer and needs to attract more potential donors to help childhood cancer. Because the website design might affect the reliability and readability of the website itself, it might lose some potential users. The ALSF website design has a lot of potentials to work on.

User Hypothesis

undraw_conceptual_idea_xw7k

Redesigning the UI part of the ALSF website and applying a UX strategy to highlight the brand will help the website overall by attracting more potential donors. This will help it achieve its goal of raising additional funds for childhood cancer.

Value Proposition Statement

undraw_Goals_re_lu76

Alex’s Lemonade Stand is a fantastic organization that raises money for childhood cancer, focusing on research for treatment and cures. At present, the site is overwhelmed with bright colors and text, which takes away from its overall message. The new website design showcases the site hierarchy and prioritizes information that makes it easier to navigate the site.

Heuristic Evaluation

After researching the ALSF website, we noticed there are many problems in how it organizes its information. The lack of a website hierarchy makes it hard for users to know which section they should look at first. There are also a variety of colors applied on the pages which creates a messy interface. The non-consistent UI design of the website is also a problem for the user experience

Accesble-colors-1

User Persona

A user persona is an extremely useful tool that can help businesses develop. Zachary Thompson is a 33-year-old male who works as a content strategist. He often searches for ways to donate regularly and has volunteered at a children's hospital; he wants to help children and wants to donate to a reputable charity.

Group-Project-2-3

UX Scenario

Our designer created the following UX scenario to see what users might do to accomplish their goals. It shows the motivations, needs, and pain points of users to help designers better understand their target audience.

Jennifer Brown is a 45-year-old woman who has worked in the medical industry for many years. She loves her career and cares about the development and research of cancer treatment. She also loves kids and does not want them to suffer.

 

 

UX-Scenario-ALSF

Card Sorting

Card sorting is a method used to help design or evaluate the structure and natural grouping of content, which can be particularly helpful when defining the IA of a website, product, or service.

card-sorting

Card Sorting Group

card-sorting-group

Sitemap

A sitemap helps guide web structure and ultimately leads to a UI that is easier to navigate. It helps designers understand how and why a website structure exists and can also be used to scope the size of a web design project.

XD-sitemap-tempate-–-2

Low-Fi Wireframe

User Journey Map

A user journey map is a visualization tool used to help understand customer needs and pain points as they interact with an organization. It helps designers understand what motivates customers or users and highlights their needs, hesitations, and concerns. It also identifies potential friction or pain points users face when they use a website.

User-Journey-Map-1

User Testing Plan

The 5-step user test is a quick and inexpensive method of evaluating the effectiveness of an interface. Invited participants are not recruited in advance and the goal is to identify usability problems, collect qualitative and quantitative data, and determine the participant’s overall satisfaction with the product.

alsf-usabilitydashboard

User Test Feedback

undraw_Personal_opinions_re_qw29

Positive:

  • Easy to understand the website
  • The layout looks nice, and navigation is easy to follow
  • User can understand the webpage is about childhood cancer

Negative:

  • The image on the top is not clear and lack of illegibility
  • The navigation bar should be fixed at the top, and have color.
  • Should have some image about childhood cancer rather than selling lemonade image
  • It is hard to read text on the top. The font is too small.
  • Too many colors, too messy.

UI Style Tile

styleguide

Hi-Fi Wireframes

Selected Works

Weight Watchers RebrandingGraphic Design - Branding

PappaRich BrandingGraphic Design - Social Media Branding

Scary Hitchcock PosterGraphic Design - Poster/C4D

Katsumi Asaba Studio Business CardGraphic Design - Business Card Design

Easy Trip AppUX/UI Design

Futurism Style PostersGraphic Design - Posters

Alice In Wonderland Theme PostersGraphic Design - Posters