The Pose® procedure is a weight loss operation that is performed endoscopically. Meaning it is done with specialized instruments that are passed through the esophagus and into the stomach. The procedure is incisionless and takes less than an hour to complete. No cuts are made in the abdomen and there is little downtime.

website 

UX/UI DESIGNER
As a UX/UI Designer for the Pose procedure responsive website, I work with the founder to develop his bootstrapped startup. The first product that I designed for The Healing App is the logo. I used Illustrator to create a few logo ideas for The Healing App.
The founder liked the simplicity of C1, V1 and he wanted to see whether I could come up with more variations. 
THUS,
i designed the following...

personas

 
Before I designed the user flow, I have to first define the personas for The Healing App. 
Sarah is 38 years old and is a Product Manager for a successful tech company in Brisbane. She makes $140,000 a year and she has the disposable income to spend on higher end brands. She has the tendency to pay full-price on her shopping trips. She shops online regularly, is fashion foward and is designer labels savvy. She donates to charities from time to time. 
 
Sarah enjoy shopping through The Healing App as it has all the high-end retailers that she would usually shop from. One of the biggest advantage is that she will receive a portion of her purchase back for which she can use for donation purposes.
Nathan is 42 years old and is a Director of Marketing for an environmental nonprofit organization located in Sydney. He makes $100,000 a year. Nathan is tech savvy and is always researching for both conventional and unconventional ways to promote the nonprofit organization he is working for. 
 
The Healing App allows Nathan to reach a large number of audiences without having to do much advertising and marketing on his end. 
Olivia is 32 years old and is the Marketing Manager for a retail company based in New South Wales. She makes $60,000 a year and she is responsible for the acquisition and retention of customers. 
 
She use The Healing App to acquire more sales for her retail company. In addition, The Healing App helps her company build an awareness.

user flow

user stories

USER STORIES FOR SHOPPERS

As a shopper I want to be able to
 
1. see a list of retailers
 
2. know the percentage of "giving fund" that I will receive if I make a purchase from a particular retailer
 
3. go shopping
 
4. communicate with the nonprofit organizations if I have questions
 
5. contact The Healing App if I have questions
6. track my "Giving Funds"
 
7. see my donation history
 
8. learn about the nonprofits that I am interested in donating to
 
9. earn "giving fund" so I can donate to charities

portfolio

USER STORIES FOR RETAILERS

As a retailer I want to be able to
 
1. easily apply to be a retail partner
 
2. allow shoppers to visit my website
4. promote my online store to shoppers
 
3. show the percentage of "giving fund" that the shoppers will receive for their purchase

USER STORIES FOR NONPROFITS

As a nonprofit I want to be able to
 
1. easily apply to be a nonprofit partner
 
2. allow donors to learn about our cause
 
3. thank our donors for donating
 
4. continuously connect with our donors
5. view our donation activity
 
6. view our list of donors
 
7. promote our cause or any special causes

responsive web app

UX/UI & VISUAL DESIGN

Aside from the user interface, the interaction helps increase the usability of The Healing App. While designing The Healing App, I have to make sure that every interaction successfully accomplishes 5 things—mobile first, touch-screen friendly, increase usability, great storytelling and it stays within the budget of this bootstrapped startup.

1/4

INTERACTION OF THE LANDING PAGE

Storytelling with moving images
 
Initially, I wanted to show a video that demonstrate a series of events that touches the users which will prompt them to support The Healing App. However, the video will be over the budget of this project. In place of the video, I came up with the idea of carousel banners with static text overlay on top. The static text allows each user to take their time to absorb the mission statement behind The Healing App while the carousel banners introduces some of the nonprofit organizations that collaborated with The Healing App.
 
 
 
 
 
 
Sticky Header
 
I am a lover of sticky header. For The Healing App, the initial UI header will transition into a sticky header as the user scroll up.
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
Sign Up/ Sign In
 
Every user can browse The Healing App without having to sign up/sign in. However, in order to shop through The Healing App, every users are required to sign up/sign in. There are also many other features of The Healing App that are restricted to "members" only. 
 
When the user click on any cta, the user are prompted to signup if they haven't signin already. 
 
If the user already have an account, the user have the option to signin as a member.
 
 
 
 
 
 
 
User's Profile
 
User's profile will show up after the user signed in or sign up. If the user never upload their profile picture, they will receive a generic avatar. 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
Showing the Retailers
 
One of the biggest challenge for designing the interaction to show the retailers is that we do not know how many retailers will participate during the initial launch and how fast it will scale. Hence, the interaction has to accommodate for these factors as well as it being a mobile first product.
 
The interaction to show the retailers is as follows:
 
1. It will display according to categories—women, men, kids and home.
 
2. If it is the beginning of the carousel, only the right arrow will be present. Each click/tap on the arrow will show the next set of three stores. It the following set is less then three, than it will show whatever is remaining.
 
3. If it is not the beginning of the carousel, both left and right arrow will be present. Each click/tap on the arrow will show either the previous or next set of three stores. 
 
4. If it is the end of the carousel, only the left arrow will be present.
 
5. The user will be able to save their favorite shops. When the shop is saved, the heart turns orange.
 
 
 
 
 
 
 
 
 
 
Shopping
 
If the user are signed in, the "SHOP NOW" button will take the user to the shop. An interstitial will appear.

DESKTOP

mobile first & responsive design

Designing the responsive experience for The Healing App has many challenges. Eventhough, this product is an MVP, it's still a very complex site and in addition, I have to consider the scalability as well as the potential of having millions of users access The Healing App with their mobile devices. With this being said, The Healing App is a mobile first design. I designed the UI and interaction with the smallest viewport and touch screen experience first while simultaneously work my way up to devices with larger viewports.

TABLET

MOBILE

©copyright 2020 by Jaymee Luu