Eman Abdou

UX AND GRAPHIC DESIGNER

About ForestFund

ForestFund

— App Design

PROCESS

The purpose of this project was to create an app geared towards the eldery population of Canada. I chose to create an investment app to give the eldery population an option to invest some of their disposable income in an effort to grow it. The only process of this app that was animated is the "buying a stock" option, under the explore menu.

Forest Fund on iPhone mockup

Prototyping

The most challenging part of this project was prototyping the app functions. Even though I was focusing on just one action of the app - buying a stock, I spent a signficant amount of time thinking about how every function of this action was going to look like. Overall, the concept was illustrated in a way that would be simple enough for an elderly person to use. I wanted my buttons to be big and include a lot of drop-down menus, so that the users would not have to type much information and could just click to make their choices.

prototypes
Step 1 Step 2 Step 3 Step 1

ITERATION

The most critical part of this project was iteration. I had the privilege of getting my app tested by a user at the Sheridan Elder Research Centre, and made changes according to the feedback I received. On the left you will see the design I started out with, and to the right are the iterations I made after receiving feedback.

Homepage of Forest Fund Homepage of Forest Fund

My landing page evolved quickly over the course of designing this app to make nagivation easier and give the app a cleaner aesthetic.

Homepage of Forest Fund Homepage of Forest Fund

During my iteration stage I made a few changes to my page designs. On the “My Portfolio” page I changed the background of the account balance to a darker green and expanded it to cover current holdings and stocks sold, since it was related information. I also increased the size of the “View” buttons to make it easier for the users to click.

Homepage of Forest Fund Homepage of Forest Fund

The second part of my iteration was the “Explore” section of the menu, where users can view stock prices and percentages at a glance. The main changes I made to this design was increase the space of each stock option, widen the buttons and align the prices with the “Buy” buttons. This would help users scan options quickly and scroll without being too overwhelmed with information.

Homepage of Forest Fund Homepage of Forest Fund

Finally, the last part of my iteration was the “View a Stock” option, where I listed the company name, a graph where users can see trends by day, week, month and year and buy a stock. I changed the background colour of the account balance to attract more attention to it and added an “equal” sign between the percentage and price of the stock to indicate that one will equal the other. Lastly, I changed the “Buy” button to fit the entire screen to emphasize it’s importance.

Empathy Map

I created an empathy map to better understand my users and what obstacles they were facing in order to create an app that suited all their needs. Answering these questions before beginning the planning process gave me a clear image of what problems I was attempting to solve.

Empathy Map

Logo Design

The ForestFund logo came a long way. I couldn't move forward with the app design before perfecting the logo, because it didn't match the aesthetic I was aiming for and I couldn't ignore it. To the left is the final logo design, and below is the three stages it went through before becoming what it is.

ForestFund Logo

Style Tile

A style tile helped me create a consistent visual design for the app by following the theme colours, button styles and font faces I chose.

SKILLS

This was the first app I designed and therefore learned the most skills from. Empathisizing with my users, prototyping and using inVision to create the final project were all aquired skills from this app design.

inVision

I used inVision Studio to design the visual aspect of this app, and inVision app to animate it.

Couple

Empathy Maps

This app would not have been effective without an empathy map. I truly understood my users after completing an empathy map and which fueled my design.

Prototyping

Prototyping

I learned to draw out the functions of the app and what each action would do and created a prototype that was used to bring a design to life.

My Other Projects