UX | Product Designer | Visual Merchandiser
SigLeis Port Mockup.png

Signature Leis: Product Design

Product Design from concept to launch

signatureleis.com

“I needed help designing a business website. I had a few ideas, but with the help of Arlene, we came up with a sleek, yet easy-to-use site! I can’t believe that my website is up and running! As a small-business owner, I felt the ease of knowing that I had someone on my side to help me make my dreams come true. Arlene has been friendly and very helpful to answer any of my questions.
The help of the new website has helped me acquire new accounts! I love my new website!!! Thank you, Arlene Hipe!”
- Annaliza A. (Owner of Signature Leis)

What

Signature Leis is a floral company that makes custom flower leis for graduation season. They are the only authorized lei vendor for the commencement ceremonies of their partner schools in the San Francisco Bay Area.

The Task

To create an e-commerce website from concept to launch before graduation season!

Getting it Together

The Tools

  • Pen/paper

  • Email/text/phone calls

  • Squarespace

Deliverables needed

  • "About" section

  • All image files

  • Product information

  • Payment information

The Challenge

Although I have redesigned a user flow for an e-commerce website, I have not designed, executed and launched an e-commerce website solely on my own. 

Interview

Questions and brainstorming ideas with client 

  • What is the purpose and vision of this website?

  • How will your customers know about this website?

  • How many schools do you have a contract with?

  • Who will use this site?

  • Can I use the schools' logos?

  • How many product images and descriptions will you sell on the site and to whom? Are they specific items (client has a main lei business)? Will you sell specific items to one school or all the same items to all schools? Will you make custom orders?

  • Will you ship/deliver?

Competitive Analysis

flowers4grads.com

 

On flowers4grads.com, when a customer clicks their school, the page will go directly to the product page (the same product is offered to all schools).

flowers4grads_combine.png
 

In graduationleis.com's case, they are currently servicing only one school, and the site seems dated.

graduationleis.png

UX Design Process

  • Client suggested to have a drop-down menu of the schools on the homepage (to mimic flowers4grads.com). When the school is selected, it will go to the product page.

  • Signature Leis is selling the same products to all schools.

  • It made sense to have the drop-down menu of the schools and their graduation date on the checkout page rather than the homepage.


Empty Shopping Cart link back to "Leis" page

shoppingcart_toleipage.png

Shopping Cart Process

shoppingcart_tocheckout.png

Persona

High school student at the partner school

Parent/relative/friend of student

User Testing

  • Squarespace has some restrictions with certain templates and I was unable to customize specific email layouts, so Signature Leis' customers would not get confused. I ended up including disclaimers on the invoice.

confirm_email.png

Challenges

  • Limited layout and coding for specific templates to customize confirmation emails and invoice

  • Test emails directly sent to client instead of myself, so I could not view the test emails that reflected each change in the coding

Learnings

  • Learned how to customize HTML, CSS and manipulate Squarespace's template restrictions (style, formatting)