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.
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.
i designed the following...
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 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
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.
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.
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 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.
If the user are signed in, the "SHOP NOW" button will take the user to the shop. An interstitial will appear.
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.