Adrienne Cheng


💡 UI/UX
Pathfinder
VPlant


🖱️ Other
Ad/Socials graphics


🛝 Play

    
About

Adrienne Cheng

Perch Pathfinder Tool






Project Overview

Project Type: Professional
Duration: 3 months
Role: UI/UX Designer
Tools: Figma
Platform: Web based app


To comply with my NDA, the background on this project is very brief. The screens you see are also available to see here. All information in this case study is my own and does not necessarily reflect the views of Perch.






Background

The Perch Pathfinder tool was a tool that was created from parts of the old Client Portal.

It became a standalone tool because it was a feature that was quite popular for users to compare mortgage offers.

The Pathfinder tool was one of my main projects at Perch while I was working on a part-time basis. The time frame of the project took a few months and was completed with some assistance from a Senior Designer.

There were design limitations at the time where our team did not have the resources to build the tool as an embed. 




Base Features & New Features



The main features that we kept in the Pathfinder tool were:
  • Three objective pathways (buying, switch/renew, refinance)
  • Offer details (rate, savings, rate type, term)
  • Additional details within each offer card (general info, mortgage, breakability)

Through the various iterations, we incorporated new features that we found to be helpful for users of the tool.












Penalty calculator


A convenient calculator was added to the card so that the user can quickly calculate what the potential penalty would be if they were to change their mortgage before the term was over.















Term Assessment


A short questionnaire is also available to users if they’re unsure about which term to choose for their mortgage offers. The result is based on how many years from now the user can see themselves growing the family, refinancing their home, relocating for a job, and selling their home.











Overhauled Filters


Filters have been given a UI update and are grouped together with the stats to allow the user to get a general overview of what other users are picking to give them a starting point in their journey.



Interested in working together?


Contact form î‹ï¸Žï¸Žï¸Ž click to open form
Email ︎︎︎ adrienne.cheng97@gmail.com
Linkedin ︎︎︎ linkedin.com/in/adriennec

VPlant







Project Overview

Project Type: Academic - Group of 4
Duration: 4 months
Role: UI/UX, Branding
Tools: Figma, Illustrator, Unity, Maya
Platform: Mobile app



Background

This project was created for our class. VPlant was developed from one of the three product concepts that we proposed.

A quick summary of the other two concepts:
  • 👁️ Iris: contact lenses with built-in AR functionalities (possible use case for this was wayfinding or for other personal use)
  • 🧫 Plexi: assistive AI assistant made of liquid programmable matter (the Plexi matter could transform into all kinds of wearable tech and assist the user with tasks)

VPlant was the concept that ended up proceeding with because it was the most feasible idea to build a working physical prototype for.

The context was to imagine the future City of Experiences and what products we predict would become available with technology in the future.

So, this project is a little unusual since we had to come up with a product for users that would exist in the future.



Problem

How can we keep produce healthy and accessible?
︎︎︎This was the main problem we decided to explore in this project.

As more and more people live on Earth, we will inevitably run into housing and food shortages. Taller buildings will be built to accommodate for increasing populations, but having easy access to food is still a challenge that does not have an easy solution.

Prior to this assignment, we had an exploratory assignment where we explored the technological developments from 1920s - 2100s. Through that research, we knew that our potential users would be facing overpopulation and food scarcity was brought about from that problem based on our research.



Competitor Analysis

We did a competitor analysis of three personal vertical farming systems to pin down the features we wanted for VPlant -- and here are the main selling points we had:
  • 🎨 Various colours and patterns that fit any home
  • 👩‍🌾 Seed pod options - buy from local farmers to support the local market or buy/trade with other VPlant users
  • 🧠 Intelligent system that maximizes yield
  • 💡 Adjust brightness levels to fit your home environment
  • 🌙 Night mode - reduced noise disruption from the water pump
  • 💵 Affordability - accessible on an individual and city-wide level


Personas

The personas we developed were created so that we didn’t get caught up with the tiny details and were able to understand their needs from a more general perspective.




Touchpoints Diagram

Diagram details the connections that the bluetooth planter will have with the mobile application.


Systems Map

The Systems Map is a more detailed depiction of the technical aspects of our physical prototype. It highlights the specific connections that we need to achieve our desired end product.


User Journey

The User Journey shows how Skyler goes from receiving the VPlant planter, troubleshooting during connecting, and beginning to grow her own plants using the system.


Experience Map

This Experience Map goes through a user’s typical experience from figuring out what type of product they want, searching and comparing options, and finally buying the product.

Branding and UI

As we ideated on the key screens that we wanted to show, we developed the lofi wireframes as seen below. We gradually expanded on certain sections, such as the loading screens when the user is connecting to the planter.

Wireframes of the VPlant app

Midfi wireframes with flow

The next step for VPlant was to flesh out the branding and overall feel that we wanted for the UI. We described the voice to be friendly, dynamic, and modern. This was brought out by using a lot of neutrals in our palette and a familiar green that is commonly associated with plants.

The roundness in both our logo and UI elements reflects a more natural feeling that parallels VPlant's goal to provide users with quality produce.


VPlant’s UI Kit


Physical Prototype

We encountered a lot of technical problems when we tried to connect the mobile app to the physical prototype via Bluetooth because the initial Bluetooth module we wanted to use had a very complicated setup.

Once we found a suitable module, we rebuilt the VPlant app within Unity so we could have the app connected to the planter wirelessly.
Below are some images (both wip and the final result) and a video of the physical prototype.



︎ See the physical prototype in action here


Result and Reflection

Overall, I'm really happy with the result. My team and I worked on VPlant over the course of two semesters while juggling our other courses. I learned a lot from this project and it was really amazing to see how fleshed out the idea got at the end, compared to where we started off with our initial three concepts.

This project was probably the most collaborative project that I've done and required a lot of coordination to meet the various deadlines we had for each part of the project.

If I could redo this project, the only thing I would change would be the app UI and cleaning up the slides a bit more. I'm super proud of the work we put in for the 3D renders, connecting the app to the physical prototype, and making a video for the product.






Interested in working together?


Contact form ︎︎︎ click to open form
Email ︎︎︎ adrienne.cheng97@gmail.com
Linkedin ︎︎︎ linkedin.com/in/adriennec

Perch - misc.






Project Overview

Project type: Professional
Duration: -
Role: Branding/Marketing, Web design
Tools: Figma, Illustrator
Platform: Digital

A collection of Marketing work that I did alongside Product/Design work during my time at Perch.



L: Partnership page example (partially redacted) // R: Revamped FAQ page


Various ads, social media posts, and banner example


Interested in working together?


Contact form ︎︎︎ click to open form
Email ︎︎︎ adrienne.cheng97@gmail.com
Linkedin ︎︎︎ linkedin.com/in/adriennec

Playstation contoller render using Illustrator

Game boy render using Illustrator

Data visualization poster
3D environment created using Maya
Experimental animation using Touch Designer