Twenty Second Tea… (drum roll) FINAL!

Hey, hey, hey! Look at us! We made websites!

Ok, so unfortunately, I need to start this off with a disclaimer:

It’s best to look at this site in a browser window that’s 1280 x 1024, but hey, I don’t own you; do what you want. And I don’t recommend using Safari. The parallax becomes very jerky in Safari. You’re all smart people and are probably using Firefox or Chrome anyway, so carry on!

So, now that I am totally ashamed of myself, and my lack of figured out parallax at different sizes, carry on.

Here’s the real deal: final site!
I created my own product for this website: a tea I wish existed, a tea that steeps in twenty seconds.
My target audience was primarily busy people who already love, or at least enjoy tea. To sell this product to those people I decided the best course of action was to emphasize the ease and simplicity of the product. To do this, I tried to keep the page very clean and and simple, and make sure none of the interactions were too distracting, or that there were any unnecessary “fancy” things that would just distract.

The colors, I deliberately chose to be soothing and cheerful, though not too bright, and I stuck with soft black and white photography, to set a mood and experience for the client.

My goal for the information on the main page, was to have it relayed piece by piece, holding the viewer’s attention, and not becoming overwhelming. For this, I used parallax scrolling and a lot of fading in (as well as out) to keep from having too much information on the page at any given moment.

I also kept the call to action fairly subtle at the top, but once the viewer has taken the journey down the page, and learned more, I give a nice big, “buy now” button.
Quite honestly, I think my favorite page is the “how it works” page. I really wanted to show in real time how the tea steeps, so I worked out a page which has the teabag scroll into a mug, then begin steeping (and be fixed in the mug) while a countdown ran underneath. I’m so glad I did this; to my mind, it’s one of the more compelling pages.

The about page is probably my least favorite part; it’s just very clean and simple. I almost wish I had done more with it, but I’m honestly not sure if that would be appropriate. I think this might be an instance in which it makes sense to not have interactions and “tricks,” but just information. However, it just feels a little dull after the previous two pages (but that may be for me, because I know what to expect.)

The “teas” page is again very simple, but ties in the black-and-white photography on the hover; which shows the actual plant that the tea comes from, and then points to the location on the body that it is primarily geared toward. (although some have multiple additional benefits) I would like, in the future, to maybe use an svg which draws a line toward the location, instead of just a hover… but there’s always so much more it would have been nice to do. 🙂

The “buy it now” page keeps with the simple theme, and is the first place you see the price. (Since it is a bit spendy, I felt this was something better kept on the back page.) While all the content forms are nice, if I had had time, I would have liked to have the price calculate and appear. This works, but it’s not the best option. (It does keep it nice and simple, though!)

I’m oddly fond of the “purchase” button… I felt you all should know. It just is really cute to me.

The process finishers out with a little splash page appearing when you purchase your tea, and gives you the option to go back to the home page. In real life, I would need to put a warning if all the fields weren’t filled out, but I didn’t want to do that here, so you all would be able to complete the process without putting in a bunch of information. 😉 (Also, it didn’t seem like a great thing to spend time on.)

So there you have it! My biggest regret is that I wasn’t able to make the page responsive. That was something I really, really wanted to do, and I became really bogged down in the mobile version having a really weird buggy thing happening, and I could NOT figure it out in the time I had, so I left it at working well in the browser. In the future, I’d really like to just make at least two desktop versions; one for really wide browsers, like on a monitor or iMac, and one for small laptops. Ideally, there’d be a mobile version, too, but I must have done something really strange in my code, because it is just super screwed up. (Don’t look at it!! It’s hideous!!) (Also, I forgot to use the CSS reset until it was too late… that wasn’t something I’m used to doing. Sad.)

I think my favorite thing/ biggest accomplishment is that I finally made a site with parallax (that, while not super impressive, actually works, which is awesome) and that I made the “how it works” page. That was an idea I had from the very start, and didn’t know if I could pull it off. Thanks to Thom setting me off on the right path, I did make it happen, and that page just makes me smile.

So, now, go make yourselves a cup of tea… and have an awesome Spring Break!!