MoneyPail App Design

MoneyPail is a social group saving app for events, group meals, bills and trips. This is a case study to display my UI/UX design capabilities. MoneyPail was originally created with Adobe XD (PC alternative to Sketch) and InVision.

The Problem

Saving money to buy group tickets, having collaborative events/trips or having group lunches/dinners can become an issue when time to split the cost, or deciding who will pay all the funds first and collect the money later. Whether it is for a surprise birthday event, or a group vacation,
an app that can save the money all in one place would solve this problem.

Proposed Solution

I am to create an app that allows you to collectively budget, save and spend
money as a group.

This app is to help make saving and spending money as a group less of a hassle. The app will be divided into many parts.
Groups ->Events with the group, and Add Funds or Spend Funds.
The groups can be created and shared to other users.

The group administrator will have all access to the funds. Once the group is created, users can add custom event categories. This will guarantee a more organized budget for the event/outing. Event examples can be specific outings, occasions, trips; or can go towards more specific items like, food, housing, transportation, etc. You can also set saving goals for each event.
I will have two button sections at the bottom of the interface within events, one for Add Funds and one for Spend Funds .
In the Add Funds section within the group chosen, users can select a specific amount they will want to add. Their account will have their bank/card information already from the initial sign up. Users will be able to see the total amount saved for that event.
In the Spend Funds section within the event chosen, the admin users will be able to either export their funds to a finance account, or pay for the items using features such as Apple Pay, Google Pay, or another mobile banking pay system. They will also be given access to refund extra funds back to all users if needed.

Target Audience

24-40 years old.

Millennials and older Gen Zs.

Friends, couples and coworkers who love to travel, go out to eat in groups, spend money collectively.

Preferably young adults who have money to spend on leisure activities.

Style-Guide and Mood Board

Moodboard originally created with Invision send then transferred to Photoshop.

Sample of My Design Process from Low to High Fidelity

wireframe sketches
User Flow from the start of app, creating a group and adding money to pails
low to high fidelity wireframes
Pails are saving categories, designed for organized budgeting
low to high fidelity wireframes
Easily add money to the pail

App Prototypes

See the full final presentation above!

Presentation and App Design Copyright of Arienne Johnson of Arienne Visuals.

Formal Dinner Print Advertisement

Sweet_Christmas Event Tickets_v2

Formal Dinner Flyer + Ticket + Program

BLVCCK – T-Shirt Logo Design

Driving Tips – Trucking Company

Emerge Web Mag -Website Design

EmergeTO is a large, innovative cross-collaboration media project that is led by fourth-year media studies students of all disciplines. Emerge Magazine and the Emerge Web Magazine in 2018 was focused on the success of individuals in music, sports and fashion in the Greater Toronto Area.

I was the Emerge Web Magazine web design team lead.

My team consisted of six web designers in total. This does not include the countless other graphic designers, photographers, videographers, journalism writers, sponsored/branded content writers and editors that made Emerge Web Magazine 2018 so successful. I was also the liaison for the web magazine journalism team.

chart for workback schedule
I was the liason between the journalism team and the web design team. This was part of our “workback” plan.

The Web Design Team’s Tasks

In Our Scope

Mobile View

• Designing the website’s layouts, integrating accessibility and responsiveness
• Search Engine Optimization (SEO), tracking analytics, and maintaining the website by troubleshooting issues and fixing bugs
• Creating an outlet for Journalism students to post, edit, and publish articles, and giving technical support where possible
• Managing WordPress, installing/updating plug-ins. Creating pages and a space for media content
• Providing photo and graphic size dimensions and requirements to photographers

Out Of Our Scope

Desktop View

• Producing written content and articles
• Social media and advertising content
• Producing photographs, graphics, and video
• Editing photographs, graphics, and video
• Creating and maintaining the Emerge Awards and Emerge Conference websites

Homepage Wireframe

wireframe for emerge magazine 201

Goals Met in This Project

Button added to web magazine for more accessibility options.
  • Website Accessibility. We added accessible buttons to alter the webpage visuals for those who are visual impaired or need a dark mode
  • Brand Awareness. Opened and expanded our audience more to other institutions. Improved SEO by adding alt tags, creating better layouts, etc.
  • Better UX. As a team we did more research on user experience. Having an easy to follow magazine theme with basic menu tabs. Improved our information architecture by creating magazine sections on the homepage. Easy to navigate, share and comment on the article pages.
  • Clear Project Plan. Being organized and setting expectations at the beginning. Delegating tasks to the graphic designers helped take the load off of the web team. Creating instructional guides for content writers, posting schedules and contact lists which added clearer communication.
  • Regular Feedback. Meeting with our faculty advisor regularly to get feedback. We also did a site launch feedback survey and sent it out to all of the Media Studies students. Surveys were available online and on paper.


First Place – 2019 EMA Award for best University web magazine or news site

Finalist – The Associated Collegiate Press (ACP) Pacemaker Award for online broadcast, news and magazine site