Role
UX/UI, Prototyping
UX Research
Website Building
Branding
Visual Design
Tools
Figma
Webflow
Illustrator
Photoshop
Duration
16 weeks
Platform
Responsive
Website
Melarosa.com, a responsive website built in 2015, caused business losses. Therefore, its major client/partner, a wedding & event planner requested to update the website to make it more relevant and modern to appeal to today's audience.
Create a responsive website to address:
• MELAROSA’s most recent work.
• The brand’s values: romantic, luxurious, aesthetic, sensual, creative, and versatile.
Event & wedding planners and millennial brides & grooms.
I began by interviewing stakeholders and users. Moreover, I carried out competitive analysis and market research on other wedding florists' websites and the key factors people consider when choosing a wedding florist. Research enabled me to learn about current pain points and critical features that would differentiate this website from the competition.
Number of Participants: 4
• Melanie Arden (the owner of Melarosa)
• Wedding planner
• 2 brides
Key Takeaways:
• Make the landing page visually impactful with fewer words.
• The photography style should show that Melarosa is personalized, customized, andtailored to the client's needs. It should feel intimate.
• The photos should portray people's emotions. Currently, there are no emotions that are evoked in the current photos. People are not included.
• The current website does not show Melanie’s personality, who she is. In a social media driven world, people want to know the person behind the product.
• The Instagram icon should appear clearly.
• The current website is missing the contact form.
• The current website needs more usability. More legible and pleasant typography.
Through assessing competitions, I learned what makes Melarosa successful. Click here to view my complete competitive analysis.
• Social media connections (Instagram, Pinterest, Facebook) and an email link on the landing page help people engage with the brand easily.
• Presenting full-screen photos on the landing page is visually appealing and creates a strong brand value.
• A simple inquiry form only with crucial inputs encourages users to complete the form.
• The neutral color scheme supports photos to be heroes.
• Too much information to absorb on the first page is distracting.
• Sans serif, narrow-width & high-x-height fonts enhance the readability of the website.
• The unique, not generic, font makes the website personal and intimate to users.
• The gray types are not bold/striking but still readable. It creates a luxurious feeling.
Based on my market research, I identified the wedding flower trends.
• Couples take social media into account more than ever.
• Couples are getting more creative, ditching tradition in favor of more unique ideas. They want unique, playful, and dramatic blooms with various colors, textures, shapes, and sizes.
• Couples are embracing their organic shape—a perfect analogy to how they've had to adjust their expectations of what their wedding might look like over the last few years. They want relaxed, garden-inspired floral designs.
• The brand logo, color scheme, and photo style of Melaros on the website did not convey the brand’s values: romantic, luxurious, aesthetic, sensual, creative, and personalized/tailored.
• The website did not present the most recent photos.
• The landing page should be visually impactful with fewer words for users to engage.
• The users felt frustrated since the website missed the contact button or form which provides a direct way for them to open conversation with the Melarosa.
• The website is missing a direct way (contact or consultation form) for clients to contact MELAROSA.
• The website did not show Melanie’s personality, who she is. In a social media driven world we are living now, people want to know the person behind the product.
How Might We (HMW) solve the problems listed to increase sales by 10%.
My research led me to create a site map that shows the organizations of Melarosa's website to outline a site's goals and purposes efficiently.
My next step was to build a diagram representing users' path to finding a wedding florist in Long Island, NY. This allowed me to identify the critical screens for the website to be designed.
I met with the client once a week to concord with her on the website’s goals and get feedback for design decisions.
Using the research findings, mid-fidelity wireframes were created to get feedback quickly on the user experience and user flows before finalizing the high-fidelity prototype.
I explored design options for a romantic and aesthetic brand identity to visually communicate the brand's unique characteristics.
As photography is a major component of the website, the final photo style was determined over several meetings.
Since color was the crucial component of the website, three revision phases were required to finalize the color scheme.
I created the UI Kit using UI components such as logo, typeface, grid, color palette, button, and photography. In order to ensure an intuitive user experience, it was used to make the UI design consistent.
I developed a high-fidelity prototype to test user experience and gather feedback on the overall design.
Number of Participants: 4
• Melanie Arden (the owner of Melarosa)
• Wedding planner
• 2 brides
The challenges I encountered:
☼ The client was unfamiliar with the website design process, so it required significant effort to keep her on board in every phase. However, the weekly meeting with the client helped me concord with her on the website’s goals and design process and receive valuable feedback to guide my design decisions.
☼ This project required a great deal of coordination to achieve cohesive photography style for users to trust the website and allude to the brand. The website features photos selected from over 1000 photos covering 30 years of work. It also had to satisfy the clients requirements, so it took a lot of communication and collaboration throughout the project.
☼ I consider usability to be a critical factor in making design decisions as a UX/UI designer, however on this project, the client's influence over usability was unavoidable.
☼ Projected increase in sales = +10%
☼ Actual increase in sales after launch = +15%
© Jacie Lee
