Bunches - Login Page Redesign

I was tasked to redesign the main login page - the original looked rather basic and not fitting of the overall brand guidelines, so the goal was do achieve the following:

- It had to match updated brand guidelines

- It had to allow for modern login features such as the ability to log in via a magic link, or via social media such as Facebook.

- Show the benefits of registering a new account (if previously ordered as a guest).

- It had to be "Mobile First" aka. the design had to focus more on smartphone users, due to the majority of sales coming from such devices. At the time of this project, the aim was to make it look good with at least a 1st gen iPhone SE.

From here, I researched how various other ecommerce websites did it, ranging from competitor floral sites to others such as Reddit, Amazon etc, taking screenshots, notes and drawing quick sketches for any initial ideas that arose from said research.

After some idea play and iteration/feedback from the Marketing and Dev steams in Figma, here is an example of the end result. Careful consideration was made to ensure it looked good on all major breakpoints.

Bunches - Checkout Page Redesign

One main issue with the checkout process on Bunche's homepage was it was deemed confusing and lacked any consistency to the overall brand guidelines. It also lacked options to properly choose extras and a personalised card, so this also meant designing a UI for card customisation.

As per usual, the design had to be mobile first, and allow the ability to login via magic link and social media. Outside that, I more or less had to research from scratch on what made a good checkout process.

From observing other ecommerce sites, I realised some key points that made a good and effective checkout process:

- It had to have a step by step process, with a clear indicator on where the customer is at any point of the checkout process.

- It had to allow for guest checkout for people who just wanted to go for a quick sale; this was common for a lot of first time shoppers according to data.

- It progresses to the next step once a customer completes the previous step and clicks "continue", but also allows the ability to skip steps if certain aspects are not needed eg. the customer only wants a free card.

- The customer should be able to edit the order at any point of the process.

Designing the updated checkout took many interations in Figma due to the complexity and large scope of the project. I think it took around 3-4 months of going back and forth with Marketing and Dev teams for testing, feedback, bug finding and so on. Overall, really pleased with the end result!

Here are some examples of the end result:

Bunches - Freshness Guarantee Page

Bunches previously had an issue with customers being confused on how long their blooms would be guaranteed to last. As a result, it was decided to create a dedicated page to direct customers to, with direct and clear information on what is the freshness guarantee is for each respective product.

This was to be done from scratch, with only the data at hand. As a result, I took a look around what other floral sites has done, along with taking cues from other e-commerce sites in general to understand what are the common UI conventions in these kind of content pages.

- The main important thing here is that all relevant information was clear and presentable, on both desktop and mobile breakpoints.

- I would have to shoot photography to supplement, as we did not have examples showing each flower / plant type themselves.

Design, iteration and feedback on the design in Figma was a fairly quick process, but I had to assist the Dev team a lot because of the changes between mobile / desktop breakpoints and to think of an efficient way to have curved live text around the title hero image. Overall, a fun challenge!