LindiTilli Floral Designer: Interactive Prototype Design
LindiTilli is a floral designer website, designed to appeal to users who need to hire a florist for their wedding or event, and order floral gifts. LindiTilli is not only a floral website, but a personal brand. I was able to work with a client who wants to make this a potential full-time job from part-time experience. While working together I was able to create a fully interactive prototype for her future business.
This project needed to happen because a client needed a website design for a business that she wants to start casually doing. I expressed interest in designing something for her so she can start small with a career that she loves and wants to get into. My client has had more experience creating beautiful designs for weddings, and with me knowing that I began creating it as a wedding floral website only. After doing more research and hearing out my clients thoughts we pivoted to a website that sells more than just wedding flowers, but also included other events and gifts for sale from her. During this research I found that flowers are most sold as gifts, and floral designers are most used for weddings. Therefore, the outcome I wanted from this site is to showcase flower arrangements and designs for the user, and have the final outcome of users to be to contact my client for a consultation on any of there flower needs.
When finding who the users and audience would be I began with lots of research, reaching out to past caterers and party and looking at wedding contractor websites. The main site that I looked at was The Wedding Wire, on that website you can search by location and look for other florists for weddings. From there I looked at competitor's websites and saw what they had to offer.
My roles and responsibilities included research, information architecture, task and user flows, wireframes, responsive design, prototyping, testing, and design implementation. I also made sure to keep in touch with my client giving them weekly and daily updates through email and in person meetings. During the meetings I took detailed notes on what my client though and listened to their thoughts.
My process began with looking at the competition. I found all the competitors through a website called theweddingwire.com, on this website people can search for floral contractors for their wedding. Once on the website I decided to search by location in Denver, this is because my client is only doing in-state or local deliveries. The best way to find the local competition is to search locally and see what else there is in the area to provide floral designs.
These were the four main competitors that I found and felt the most comparable to LindiTilli.
After reviewing what the competition had to offer I looked for patterns and who their audience was for each site. I narrowed it down to two personas. The main persona is going to be a bride to be, she needs to have a simple, stream-lined process to figure out what wedding flowers she needs. She also has a vision board filled with ideas, but needs help to find what will fit her budget and ideal look.
The second persona is a person is a relationship looking for a beautiful floral gift for there partner. This person wants something personable and to be able to work with someone who will help them to create something as special and unique as their partner.
After I created my personas I decided to work on what I thought the user and task flows would be. I started with a general task flow the task flow of the user. I found that I want the end goal to be that the user contacts LindiTilli for a free consultation and ends up buying flowers.
From the main task flow I created two user flows the two main flows that will be used. One flow would be the user searching by event looking at past work based on the event they were used for. Another user flow option is to search by type of gift.
After creating my main task flow and user flows, I was able to create some wireframes for the site. I had a few ideas for each page and how I wanted them to look, I started with a desktop size for the wireframe templates.
These four wireframe templates include (from top left to bottom right) Prices page, About me page, Contact page, and Home page. From these sketches I created desktop pages. From my client I gathered what she wanted her brand to look and feel like. These are the statements I took to direct my design:
Whimsical like the flowers, the earth is speaking to them Rust orange Brick red Tan Minimal/typewriter “if you were a grandpa you you say ‘oh this I recognize’” Notices minor details/perfectionist
The wireframes I created included a homepage, about me, prices, contact, and search page. With this first draft I also created my first style tile page to show the client. I began with a light design as many other competitors had brighter sites that had minimal color so the eyes could be drawn to the products.
When creating my Logo I kept to the rust orange for her name and decided on the green leaf background because my client does a lot of work with greenery and I think that makes her stand out from the competition. I thought I would incorporate the typewriter font for all fonts used. For the colors I picked a red color that goes well with the orange and green.
This style tile was minimal due to me wanting to make sure the client liked all the fonts and colors before I continued to make a full design. I also showed my client the first draft of my logo for her.
After showing her my work I had some notes and fixes to work through
Once showing my client my first design she was really impressed with it, but did not feel it fit her brand very well. I took her input and wrote it on a copy of the original design. She wanted a more antique, clean look with more flowers instead of greenery.
I then created a minimalist logo that included the mountain-like flowers she wanted. I also included her name in serif “typewriter” font that she liked and wanted as well. I decided to create a few more color schemes for her to choose from as well.
I then started to create and fill in the wireframes for her website. I decided to use a lighter colored logo for her site, this is due to weddings and other events being bright and fun occasions I thought the white would work well with her shop mission.
Once showing her my first draft she liked the highlights and main tan color used for her site. She loved the logos and fonts as well, but felt like the site was too bright. So I decided to try out using my darker logo with the site and used that base grey as the header and footer.
For my second draft I took my clients needs into consideration and made a darker looking site. I still did not want it to be too dark so I kept the buttons light and hover states lighter as well as to not make the site too dark.
Once I settled on a color scheme and my client was happy with it as well I created my style tile for the company.
My style tile includes both logos used on the site and all the colors used. It also includes the font used and the sizes used and each button state and color. This also shows the photos and textures I used to help direct me and inspire my style. It also helped me to understand and communicate my style with my client.
Once my style tile was done I was able to work and complete the LindiTilli UI Kit.
Once done with my third draft I started my usability testing and was able to find patterns of things people had questions on, what worked well, and suggestions of features to add.
My final draft has come together as fully functional interactive prototype.
The outcome of this prototype has shows a fully successful test and an understanding of functionality from all users and testers. This project was different from my past ones, because I had a real client that I needed to work with and keep up to date on my work.
My initial intent for this site was to make a site that would just cater to wedding flowers and design. Since working with my client I had to pivot and adapt to create a site that fits her needs and her creative vision. This site has been a success for both the client and myself.
