Tankfarm Member Zone Design
UI Design and prototyping for the member's area of the Tankfarm website.
![Tankfarm Member Zone Design featured image](/images/tankfarm_hero.jpg)
Project details
Client
TankfarmMy role
I was the primary designer assigned while working at Engage BrandcraftBrief
To design a dashboard and admin portal for the customers of TankfarmThe primary problem that needed to be solved when I approached this project was how to greatly simplify all of the info and functionality available to the users. The majority of the users were already known to be less tech-savvy than the average American and so would need a user interface that would be very clear and to-the-point.
I prototyped both the mobile and desktop user-flows using Adobe XD, allowing the client to get a great feel for the designs before going into development.
![tankfarm login modal](/images/tankfarm_01_login_desk.jpg)
Login modal with errors view.
![tankfarm login modal mobile](/images/tankfarm_02_login_mob.jpg)
Login modal mobile version
![tankfarm dashboard](/images/tankfarm_03_dash_desk.jpg)
The welcome dashboard with primary info and a navigation grid to the other areas of the member zone.
![tankfarm dashboard mobile](/images/tankfarm_04_dash_mob.jpg)
Welcome dashboard mobile version
![tankfarm tank level view](/images/tankfarm_05_tank_desk.jpg)
Dynamic infographic showing the user's propane tank level.
![tankfarm tank level mobile](/images/tankfarm_06_tank_mob.jpg)
Portrait version of the tank graphic to work on mobile/portrait screens.
![tankfarm rewards dashboard](/images/tankfarm_07_rewards_desk.jpg)
The rewards program page, showing the user their various referral stats and how-tos.
![tankfarm rewards dashboard mobile](/images/tankfarm_08_rewards_mob.jpg)
Rewards page mobile version