Redesigning website for local floral business as a pre-university student | Floral Horizon
In early November, I signed up to CareerContact to learn digital skills and help a local SME. Here is a brief consolidation of my progress and reflections…
The CareerContact Pilot Programme was conducted over seven weeks in November and December 2020. CareerContact collaborated with a travel and tourism startup, Tribe Tours; an edtech language learning startup, Perapera; a kopi hawker, Coffee Break; a seafood wholesaler, Guang’s Fresh Mart; a floral artist, Floral Horizons; and a bicycle sole proprietor store, Hon Kah Trading. After acquiring basic digital skills, students carried out content strategy and digital marketing projects, market and consumer research, UX design and brand marketing for these SMEs under the guidance of mentors.
Following the introduction to digital skills during skills week, we were assigned a challenge by several SMEs. My attached SME was Floral Horizon, run by a Singaporean local floral artist, Mdm. Chua Lee Hong. Floral Horizon provides two main services, Ikebana (Japanese floral arrangement) and pottery. Customers can buy and attend lessons as well as purchase custom works done by Mdm. Chua, however, her primary service is conducting lessons.
Our given task was to redesign Floral Horizon’s existing website as well as to launch a marketing campaign to promote her business. As I was mostly in charge of Figma, I focused on the website.
Preliminary Research
Before we began designing the website and carrying out marketing, we did preliminary UX research.
We analysed Mdm. Chua’s existing customers by interviewing the client as well as investigating her active Facebook and Instagram followers. In order to broaden the scope of our UX research, as well as to help the client to reach potential customers, we also created a google form and surveyed people’s interests and preferences regarding floral arrangements and pottery lessons.
After gathering data from the surveys and existing customers, we created a preliminary customer persona. With a focus on digital marketing and the client’s goal of spreading knowledge of floral arrangements to the younger generation, we targeted a younger tech-savvy audience (Mdm. Chua’s secondary customers).
We also did a competitor analysis in order to analyse Floral Horizon’s strength and specialities. We investigated competitors in Ikebana, pottery and generic floral arrangement workshops and realized that most generic floral arrangement workshops teach a Western-style of floral arrangement, while few Ikebana workshops exist in Singapore. In addition, most floral arrangement and pottery stores were matured chain stores. Thus, we could also highlight Mdm. Chua’s identity as an independent Singaporean floral artist.
Lo-fi Structure and moodboard
Remembering our target audience, as well as Floral Horizon’s USP, we began to redesign the website and create an Instagram marketing campaign.
The original version of the website was cluttered and messy. The background was not clean nor standardised. Furthermore, the website resembled a personal portfolio rather than a product catalogue. My aim was to make her website flow consistently with a targeted theme as well as to incorporate business elements within the website.
The first step to creating a prototype website is to create a lo-fi structure. I used pen and paper to draw out the skeletal structure of the site. The first version was, initially, nowhere near the industrial standard as I hadn’t referenced any existing UI designs. Through several rounds of redesigning, I finalised the structure and proceed to the next step.
I designed a moodboard using purple, pink and white as the theme colour as I thought those colors suited a floral theme. However, after discussion, we realized those colours were too saturated and westernized and adjusted accordingly.
For font types, I chose Allura as I thought the cursive font suited the flowery elegant vibe of Floral Horizon; and Merriweather simply because it was ranked as one of the best fonts. However, cursive fonts are actually difficult to read and Merriweather as a serif font did not suit the Japanese vibe — in which most Japanese characters are round and without corners.
In the subsequent designs, we began to consider the Japanese elements more closely. We researched Japanese themed designs and concluded that the majority of Japanese aesthetics were minimalistic with plenty of white space. the color palette was generally woodish, mild and comfortable. Font wise, we decided that a san serif font without sharp edges would be a suitable choice.
Charting out the Hi-fi prototype
My first hi-fi structure was completed before finalizing the moodboard and it was still in the pinkish theme. Besides the thematic problem, the webpage was single-page and thus required multiple clicks before users could reach their desired destinations. This user journey resulted in a lot of friction and inconvenience.
To avoid having to start from scratch, I first designed the landing page for the second version to check the suitability of the theme before proceeding. I used a pale woodish colour and san serif Monsterrat font for the design. With a single webpage, users were able to find their desired information by simply scrolling down.
After my teammates and mentor vetted the second version, I used the coordinated theme to design version 3.0. The main problem of this version was that the description on the product page was cluttered at the top with large chunks of texts that threatened to disengage readers.
I researched and compared existing websites such as courses on Fave, and adjusted the layout. Below is the finalised version with Figma prototype. Feel free to browse through and leave comments and suggestions :)
My teammate later converted my Figma prototype into a Squarespace website and concurrently launched an Instagram campaign. We did not manage to get much traction for our product but we hoped to collect feedback afterwards.
In Summary
My seven week journey in the CareerContact Pilot programme was exciting and rewarding and I would not hesitate to do it again! (I hope to participate in future projects with CareerContact too!)
My first UI experience was not a smooth one. I designed four different versions before arriving at the final product. Although it sounds cliche, getting to design a website allowed me to realize the difficulty and hard work that goes into completing a project. On the morning the design I stayed up to 1 a.m. to complete got rejected, I truly understood that web development is not easy. Yet, with every difficulty comes growth, and what matters what we learn from it. I now realize the importance of getting the basics right before proceeding to design the hi-fi structure. The lesson of consolidating foundation before moving on will always stick with me.
Redesigning a website is not easy, especially to a person like me who has a limited background in digital skills. At first, I was intimidated by the very idea of using unfamiliar software to deliver a prototype within such a limited time. However, although my prototype definitely has a lot of room for improvement, I completed it to the best of my ability. This SME challenge allowed me to think big and make practical contributions. The greatest gift I received from the Pilot Programme was more than the ability to use Figma, Squarespace or any sort of software, but the willingness, courage and confidence to always be open to learning something new.
The world is constantly evolving especially with the aid of technology. Without lifelong learning, most of our skills are going to become obsolete in the future. I hope to always be open-minded and always excited to try new things.
CareerContact is an ed-tech platform designed to bridge the gap between school and work. We help students develop digital skills and connect them with SMEs in Southeast Asia. Feel free to reach out to us at CareerContact.cc or check out our courses on Thinkific.
