Thinking

eleanor mckenzie

[connoisseurexplorer]

Visual Update

To briefly show website’s visual update :

Business Card : 

 Packaging :

[connoisseurexplorer]

Social Media - side project

In my earlier post, I mentioned about using social media to help Little Stories earn its character. I decided social media was perfect for Little Stories to grow its audience and if I decide to take this project outside of class walls, Instagram will be a good base.

Visit Little Stories Instagram

[connoisseurexplorer]

Beta Test

For Beta test, I have been given the opportunity to study 8 users. I used an online form to receive feedback but the first step I took is to give the user a situation that required them to interact with the web as previously used for Alpha testing. This method was important because it helped me understand how users interact with the web without my assistance. In the process, understand users’ habits better. With the situations given, I have noticed that users don’t spend much time looking at flower options. I do wonder if it was the setting of it being a user test affected their habit. Other than that, their response to the website is what I expected.

*The numbers in bracket identifies how many users have chosen the answer out of 8.

Did it solve your situation?  (8) Yes (0) No (0) Others

Do you happen to know what the website sells and its brand?  • Yes. I think this is very helpful for boyfriends who are not romantic • Hmm.... no... i don’t buy flowers often •  Yes, it sells flowers, different type of it and educate the language behind the flowers • Its sell flowers that consist of meaning and story • Yes • Sells flowers and flowers related items according to mood or occasion. • Yes, I know what the online store is selling and also the brand. • Yes    

Was the navigation difficult? (0) Yes (7) No (1) Others : feels like something is missing

Would you prefer to have a list of flower to select rather than choosing through filters? Why? • I would like to choose flowers through filters as I'm not really know about flowers so I guess this interface helps me a lot by giving me a list of filtered selection. • I prefer it with the filters because it could help me decide easier on what may suit my chosen feelings/occasion. • As a person who doesn't know much about flower language, it is refreshing to learn about it through the filters and it helps in choosing the flower for the special occasion. • Choosing through filters is fine, because it is more easy for user to find the flower they want and what type of flower in which category • No,with filters is better • I think I would want to have both choices, choosing through filters and a list of flowers. This is so that if I wanted certain types of flower, I will have to go through the filters to look for it instead of directly searching for it. • I think that if it was a list, it'll be harder to view the product and my attention might be all over the place. The current view is fine but it'll be nice if i could choose more than 1 flower • Yes. So that can choose other types of flower if the filtered stuff is not suitable for me. Response : To cater to a wider audience, I decided to provide ‘Show all flowers’ button at the end. At the same time, have the list of flowers in the FAQ section.

What did you dislike about this site? • None • I would like to see this product come to live.  • "How are you feeling today?" section is slightly confusing where it seems like the user has to pick both the feeling (top row) and the occasion (bottom row) in order to proceed although in the instructions, it says pick either one only. It's confusing to me because both rows are split with a line of text in the middle so it seems like there are 2 different stuff to choose from. • All is fine to me • None   • I wasn't able to add to cart when I clicked into the selected item. There is no button for it. • The mood selection sort of made me confused a bit.. perhaps it was the play of copy-writing. I think the "or" between the 2 rows should be bigger because i did not notice it until the shading I saw when i picked "Happy" shifted immediately to "birthday celebration". • Some navigation missing but overall looks nice. Response : Filter area will be combined. As for the cart and missing navigation, it was a bug that I have looked into and fixed.

Rate overall look and feel of website (0) 1 stars (0) 2 stars (1) 3 stars (6) 4 stars (1) 5 stars

Any other comments? • None • It could be better if there are short stories about each flower? Like what they resembles and suitable for which stage of people in live. So people like me can learn more about flower in a short time through scrolling the website. • The bag section is missing the "pay" or "check-out" button? Maybe you can add a guide that says "click product to view more info" or something similar • I really like your style, can learn so much from your work! Good luck! All the best!  • I can't add it into the cart. • Font type can be nicer • Nice work  • I think the concept is good and it could be a full blown website with little more adjustments. Good luck. Response : I have considered giving flowers their own story or brief which I did write for few days after this feedback was given. However, looking at the timeline, it was difficult to write for 39 flowers in such a short time. I will consider this if Little Stories proceeds further.

[connoisseurexplorer]

Alpha test

From the previous post, I was updating my layout and changes. During alpha test, the best I could do was to replace placeholders and empty div with images. So some web page did not function fully but the core purpose of the web was which is all I need for an alpha test.

1) Users are given a situation that required them to purchase an item. Some examples are events of birthday, someone going away or a funeral. While they go through this, I study their behavior and compared them to what I expected users to do.

Noticeable habits: - Scrolled pass choosing an emotion - Clicked on flower instead of its name to select - Unsure of category to explore, how does one identify their emotion through the situation given? - Emotion button was too big to notice it arranged the flowers bottom Response: - Hide flower choices until user select their emotional choice - Clicking on emotion button will scroll down to flower options, allowing users to understand the flow better - Change clicking point to image instead of their name - Add filter for event related so users can have options based on event

2) Was the navigation difficult? - Yes, only for the product button which leads to the homepage - At some point, looking for flower was a little confusing Response: Change ‘Product’ to ‘Home’.

3) What does the website sell? - Flowers and some products Response: None, as it’s what the website is selling however I did wish they mention something along ‘emotions’.

4) What is the brand name? - Little Stories but logo should be consistent and implemented on majority of the web pages Response: I’m thinking of a way to place them on main pages without disrupting the whole design at the moment.

5) What are your thoughts on the design? - Classy, elegant, not cheap, meaningful - Simple and straightforward but unsure of the use of home page’s first image as it seems misleading Response: Currently, the image is a placeholder. I hope by Beta test I would have taken my own photos.

6) What are the positive things you experienced? - Easy navigation - Flower having their own meanings were meaningful Response: None

7) What are the negative things you experienced? - Tagline should have connect logo and product - Struggled to match emotional choice to event - Messy product navigation Response: - Will work on tagline - Add filter for event related so users can have options based on event - The link connection was mixed up and broken. Will fix it.

8) Do you have further feedback or comments?  - Links are broken at some areas - Suggestion to add more filter or have different filter choice Response: - The link connection was mixed up and broken. Will fix it. - Add filter for event related so users can have options based on event I have also looked into adding FAQ in the footer for list of flowers and other necessities.

[connoisseurexplorer]

Group Critique

Recent development and changes needed more than just myself to see if the website could work. So I took advantage of the group critique session that was organised. The main purpose was to see its design elements, flow and UI/UX.

In the Overall Web design, the breadcrumbs were not obvious enough and the new graphic added did not suit the whole web feel. Some recommended that I use images and add information for my earlier problem which was the web looked empty. Another comment was the footer. It needed information. My thoughts are to experiment with the layout and information to create a better web design. As for the footer, I am still considering about its additional changes because I don’t have much to add into it or more accurately, the information might not be suited in the footer.

To look into much specific, I requested feedback on each web page. First is Home which is the product page. The only feedback was the masking tape on the flower needed to be more transparent or removed. I decided to remove it as it did not match my current design.

In Product Choice, there was too much space between the breadcrumbs and product. While some suggest to reduce the space, others gave the idea to add the name of the flower chosen. I went with the former suggestion because it made sense to let the users know what flower they chose. While this particular page looked very plain, some suggested below the product choices, I can showcase how the product will look like on modals or closer information. While this is a great idea, I have to consider my content in another page that might be similar to this idea and it will seem repetitive.

Other pages such as Product Information, Our Story, Talk to Us and Shopping Bag did not have comments. I also allowed physical item to be evaluated. For Packaging, feedback were to thicken the graphic element and maybe add padding top to the package because it looked similar to a match box.

[connoisseurexplorer]

Technical and Graphic updates

After searching and finding the closest theme, I realize there was some technical challenges that required me to rethink some design outcome in terms of structure. These additional challenges however, was not negative but it gave proper ideas on how a realistic e-commerce website is suppose to look, feel and function. Some of the design problems were the organic leaf elements. It did not match overall brand but removing it would make the web seem empty. I decided to try different graphics and update several things in the web design.

Landing page

Product choice

Product Information

About Little Stories

Contact Little Stories

Shopping Bag

[connoisseurexplorer]

Web Design Update

After understanding that I would want to concentrate on the web design, I have decided to use ready coded themes. That way, I only need to edit and change certain layouts to suit my own. The theme does not come with database or proper linking. Therefore the process would be to code the structure, content then data. The design below will have amendments as the project goes along to suit users’ needs.

Your Story (Landing page) : 

Product :

Product (info):

Our Story :

Contact :

Shopping Bag :

[connoisseurexplorer]

Business strategy

Other than having a website, I will use Instagram as a platform to get closer to the target audience due to the fact that most of them use it. It brings user on the journey of creating and launching the product. I will also encourage users to visit the website by mentioning the link in descriptions.

Promotional Video The video will promote the thinking that flowers can be given at any occasions. From romance to friendship, family, loss, saying goodbye. Visually, it’s a video collage of hands giving to other hands with little background clue of what the events may be.

[connoisseurexplorer]

Packaging and Materials

This is the overall design for packaging and business card. Books are usually seen as great adventure as it brings stories to people. Sometimes a story one never imagine could happen. Also like a book filled with collected poetry from unnoticed writers. It brings meaningful stories into one place. That is my main reason for a book looking business card. I do have another idea that is to create a bookmark instead. So it would be useful rather than just a business card. However, I did shared this ideas to my targeted audiences and asked them what they would keep. The feedback leaned towards the book as it was more attractive and that bookmarks are usually lost somewhere in their homes, unused or forgotten. While that, I have looked into what is so far needed to create the products and the cost. I will be working on the physical packaging and product samples soon. I hope it will give users the idea of how it will look in front of them and whether it would be attractive and suitable in size and material. Any changes will be updated!

[connoisseurexplorer]

Branding Board

Logo It’s seen as a little gift but how ‘little’ is this gift when it’s able to speak more than words can. Colors Gold for luxury, White for pure, relating to nature and blue for a calm and a little serious approach.   Pattern It was made from painting real leafs and then stamping them. The idea is to keep it raw and real like how users stories will be. Photography The style for it would seem as it’s being worked on. As the brand creates, the users has the last say to how their stories are being told.

Vision - Little Stories to be establish and known for their diverse stories through  giving flowers. - Giving flowers not only on eventful days.

Mission - The idea that flowers can be given at any point of time. Whether it’s to  offer comfort to someone or to show affection. - To create meaningful and personalized gifts that tells their own story.

[connoisseurexplorer]

Mock Up 1

Here is a rough mock up. By rough meaning it does not contain proper scrolling method, transitions, full experience (Check out page is not present) and final design look.

Link : https://marvelapp.com/702gigi

[connoisseurexplorer]

Visual Exploration Progress

Moodboard

To credit and share the source of this project inspiration would be to the Victorian who created this ‘Language of flowers’. It was made to express emotions which otherwise could not be spoken. Therefore like many website that also gives floral aesthetic, I decided to lean towards a more Victorian feeling of old flowers and brown papers. However, my target audience also care about how the website looks in terms of a modern style. Having this in mind with women being the main target audience, I have decided to give it a modern Victorian design. The aim is to be feminine, modern and royal like treatment that hope to give users the feeling of ‘they are the queen’.

Storyboard

In total, there will be 7 pages of the story. The ones not shown above is landing page where the logo is quickly shown then transits into the story. Users are required to click on next for the story to proceed or skip the whole thing to shop right away. The end scene shows both friend happy side by side with Kate’s mother faintly beside her. Under them will be the tag line “Everyone has a story no words can say. Let them speak for you”

UI Design

Overall design. 1. Story 2. Flower choice 3. Accessories  4. Bouquet 

1. Story

2. Flower choice

3. Accessories and 4. Bouquet

Logo

Chosen option after several sketches is number 7

[connoisseurexplorer]

Design Planning

To give a clearer look on how the flow is and how it functions in an everyday life situation, here are some chart and made up situation.

Flowchart

Users land at the ‘story’ page where they read how one person can use this gift to comfort her friend who has lost her mother. Users are given a button to skip this page and continue their goal to shop. The ‘home’ page consist of the brand logo and below it is a scroll-able choice of flowers and their meaning, arranged alphabetically. Once users pick their flowers, they proceed to ‘content’ where they pick how they wish to present this flowers, whether it is in the form of a flower bouquet, necklace, earrings or a bracelet. After picking an item, users have the choice to continue shopping or check out.

User Journey

[connoisseurexplorer]

Design and Technical findings

(Figure 1)

(Figure 2) Source: https://www.sbs.com.au/margarete/ Source: https://koox.co.uk/food The display for gift products would blend in like how the apple cinnamon is on the plate (Figure 2) but it will be obvious enough to let users know it’s clickable. The design element would involve the products being on a book that with the feel of what (Figure 1) gives.

Source: https://www.etq-amsterdam.com/store/category/men/#! Source: https://www.flatseven.net/ Choice of flower arrangement will be presented in a container as shown as above. It will contain shortcuts like ‘Buy’, ‘Info’ and other needed features. 

Source: https://daintyjewells.com/women  Once the user click on ‘Info’, users will only be able to see detailed information about the product.

Technical Research Considerations for the website are similar to majority online websites. I will be using a theme to complete this project but if the theme is unable to fulfill the design elements I have prepared, I plan to source the code and change them on my own using atom software. Most of my concern is just the possibility of arranging the products in the desired way. Websites like CodePen and w3schools can help aid in reaching this goal. These are some of the themes I am considering: https://wordpress.com/theme/dyad-2 https://wordpress.com/theme/radcliffe-2 https://wordpress.com/theme/dara/ https://jones-demo.squarespace.com/ https://goo.gl/owG2zh https://goo.gl/nLMRG7

[connoisseurexplorer]

Target Audience

Online Shopping Globally, 80% of the internet users shop online. 50% are frequent shoppers.

Specific Store Category Flowers and gifts, are known to be the highest by 19%.

Who are they? 67% of the majority are young adult between the age of 18 to 35. 37% of these people buy items from specific stores.

What they dislike Paying for shipping unexpectedly causes 28% of buyers to abandon their cart.

Considerations When shopping online, more than 50% considers price, site navigation, brand reputation and visual overlook. It can also be their key deciding factor.

Why design it This website has a little story at the beginning and after some research, I have found that 73% online shoppers are likely to purchase after watching or interacting with a video. 

[connoisseurexplorer]

I have recently been thought of the Ikigai diagram and it made me think where does these projects lean on. Both of them, is what I love. x’otic is what the world needs. Little Thoughts behind the curtain purpose is to actually pick up coding skills so it probably lean towards what I can be paid for but it can be more than just picking up skills and creating another online store. I have decided to go with Little Thoughts and open it’s possibilities to create an online store that is based on personal stories, creating a meaningful gift and experience.

[connoisseurexplorer]

🌸 Little Thought - Potholes and sketches

Feedback (Din and Lin Yew) - Are you creating own brand / business?  - Find aesthetic difference and have a bigger difference in core experience. - Consider a story / narrative at the beginning of the web since the main selling point is flowers with a meaning. - More studies on competitions in different platforms.

What I think I am thinking of my own brand and looking for visual direction. Since it’s inspired by a Victorian culture and book, I thought I could work around it. Like to take a little of Victorian design and create a more modern design. As for the story, it sounds like a great idea to leave a more lasting impression for users. All flowers having their own meaning makes it suitable. Currently, I’m thinking of making the highlight parts of the inspired book but I understand if I’m going to make my own brand, I might want to be more original. Competitions researching is still in progress so I might have to update later.

Sketches I’ll leave this here as an idea on visual.