HappyEastie

Web/Mobile Responsive Design, UX Research, Prototyping
Project Overview
HappyEastie is a platform targeted towards underprivileged communities and individuals living in the East Boston area. The platform aims to simplify the process — of searching for and applying to — various government aid programs at the city, state, and federal levels. It will also assist underprivileged individuals in understanding what support services they qualify for. As a secondary feature, HappyEastie also aims to connect members of the East Boston community through events recommended through the platform, which would be added/removed by website administrators.
Role
Product Designer
Team
1 Designer (Me!)
5 Developers
1 Project Lead
Duration
4 months (Sep 2022 - Dec 2022)
Tools
Figma
CONTEXT
What is HappyEastie?

When thinking about government run programs, the phrases “easy to understand” and “simple to use” do not usually come to mind. Despite this, the government provides all sorts of services to assist underprivileged individuals and communities. However, each of these programs has a wide variety requirements which greatly depend on your demographics. It can be quite difficult for individuals (who already lack many resources) to navigate these programs on their own.

Problem

Our clients, Max Lyakovetsky and Anna Custodia (NEU ‘22), originally built HappyEastie as a NEU design capstone project. During the creation of their capstone, they worked with the East Boston Social Centers (EBSOC) and various branches of the Boston city government, conducting research into the needs of East Boston residents as well as the organizational needs of EBSOC. However, it was limited to mobile and lacked actual functionality.

The original mobile designs
SOLUTION
Build a webapp that makes finding resources easier

Since this project had no existing codebase, the developers aimed to decide on the foundations and work towards a full functioning app. I was tasked with converting the existing mobile designs into web pages, specifically landing pages for each resource and a homepage, and we also wanted everything to be responsive and easy to navigate.

PROCESS
Design System

As the sole designer on the team, I had the power over the direction of the design. Extracting colors and ideas from the preexisting designs, I created a color palette, typography system and illustrated a graphic that was to be used on the homepage & in any general HappyEastie design collateral.

Hi-fi Iterations

I had a bit of a unique design process with HappyEastie because of the existing mobile designs and deadlines given by my project lead; As a result, I jumped straight into hi-fi iterations so we could get the ball rolling and crank out designs for the developers to work on.


First, I worked on solidifying the homepage design and the quiz workflow. The quiz was the main aspect of HappyEastie- users would fill out a quiz that asked questions on personal information such as annual income, number of children, accessibility needs etc. Then, a list of resources would be curated for the user to have easy access to; The user could read more about the resource or go directly to the website.

Later, I worked on designing what a resource page would look like as well as a directory page. The directory was for browsing and filtering resources.

Key Changes

Originally in the mobile design, the resource directory display on the homepage was in the form of a grid. However in the context of on a webpage, the grid made little sense: How would the user interact with it? Why was each section in its own boxed section? Thus, I decided to change the format to a search bar + drop down menu. This was a much more common form of browsing through a directory's option and was much more intuitive to use to a user.


On the actual directory page, I initially kept it similar to the mobile where there was a search bar, filtering options and 2x2 cards. However, there were SO MANY different possible filtering options since they were all pulled from the quiz; It would feel overwhelming and confusing to attempt to filter just with a few buttons. This led me to create a sidebar with filters: all filtering options would be available in the unchanging sidebar and they could be toggled of and off as checkboxes. All of the resources would also be in a list view. These changes made navigating the directory much more digestible.


Main Takeaways

Working on a team as the only designer comes with many challenges that really pushed me to grow. I learned how critical being assertive and clear is, as I was carrying all of the weight of the design and the developers had little to no design experience. This meant I had to be extremely communicative, use my design expertise but simplify it in ways they could understand and use tools such as prototyping to help get my ideas across. I also understood how important it was to be in constant back and forth with those developing my designs and the project lead. If we were not on the same page, certain design decisions could get lost or developed in ways I did not envision.

Looking Ahead

I only worked on this project for 1 semester (Fall 2022) but, it continued development the following semester and was able to finish all of the functionality and design goals! In the following Summer, HappyEastie was officially handed off and launched.

EBSOC and the city government have mentioned possibly adopting this project in the future. EBSOC has mentioned that many people bring up the idea of creating an app of this kind, but so far, nobody has put in the work to make it real. There were also talks about the Boston mayor, Michelle Wu, showing interest in HappyEastie!

I am extremely grateful to have worked on HappyEastie and truly felt like I was able to make an impact on the Boston community.