Orange Blossom Design
An online store design for handcrafted signs
CLIENT:
Orange Blossom Design
ROLE:
UX / Visual Designer
TEAM:
Solo project
PLATFORM:
Website
DESIGN TOOLS:
Photoshop, Illustrator, Sketch, Wix
SERVICES:
Logo Design, Wireframing, Prototyping
About the Project
Orange Blossom Design is an online shop for a small business owner who creates her own handcrafted signs. This was meant to be a very simple shop setup using Wix. I would be taking a minimalistic approach to the site with just a few necessary sections: the shop page, an about page, and a contact page.
Challenge
The first challenge to this project was that my client did not have the budget for UX research. This is why I would consider this to be more of a Visual Design project, rather than a UX design project. I did a stockholder interview to understand her goals and to understand who her intended clients would be. I did a little bit of comparative analysis of online retailers like Amazon and Ebay just to get an understanding of some of the user flows. I attempted to make informed design decisions based on these successful online retailers, so this would not be a fully self design project.
The second challenge was that I was doing this all myself -- as in, I would be doing the design as well as the implementation in Wix. The client is using Wix, so I had to make my design decisions as per the limitations of Wix. I had to do a little bit of research searching for online shops hosted by Wix, so I could understand the capabilities and limitations of Wix a little bit better as well as understand what commonalities I could gather for best practice design ideas.
Ideation
I wanted to create a flow that would be intuitive for users to jump onto the site and get an understanding of who Orange Blossom Design is and what products they sell.
I enjoy starting out my ideation phase by sketching out some ideas. These act as brain dumps, just basically so I can get all my thoughts and ideas out on paper. Things I was considering was the storytelling aspect of how to deliver the message of who the company is. I broke up the ideas into the larger components: home splash screen with primary CTA, store showcase, contact info, company info, the store, and a FAQ section.
Logo Design
My client had created a logo on a website, and due to this, it wasn't in the best format for all uses. It was a 500 x 500 PNG file with a non-transparent white background. There would be a lot of limitations to the design if we were going to use this logo. She let me have free reign to redesign her logo to fit the website I wanted to make. My client had an idea of the colors (orange and aqua) she wanted to use, but was not specific on the exact hue or tone of colors she would use. I went ahead and picked out a Pantone color that was similar to the orange in her original logo. I wanted to pick out a Pantone with matching web color in the case that she wanted to make some prints, she would have a consistent orange in the web and print. I recreated the blossom in vector and put in a simple bold serif font.
-
File format PNG
-
500 x 500 pixel rastered file with white background
-
Only RGB web colors
BEFORE
-
File format Adobe Illustrator
-
Vector
-
Pantone 1665 + 20% black | Web color EF582B
AFTER
Implementation
This was my first time setting up a Wix store, so I had to learn on the fly how to work with the Wix system and to be able to implement my ideas. Wix is great because it allows a designer like myself to be able to put together a webpage using a GUI, but with that automation of coding, there is a limitation on functionality, so it was important for me to keep my wireframes loose and keep to the basic components in the order that I wanted it to be consumed.
I incorporated the contact dialog in the 'home' page, so users would be able to contact my client directly for custom orders or quotes. With the 'shop' page, I wanted to make it very simple and clear. I have some breadcrumbs at the top so the user can navigate. There is a sort and filter drop down options so the user can narrow down their search.The 'about' page takes a storytelling approach as it guides the user's eye zig zagging from the story to the process to the details about the frames interwoven with mood setting photos. It then made sense to me that the FAQ would follow that flow of knowledge building of the company.
I kept the design aesthetic on the light side. I have the colors that she requested with a black and a light grey tone. Not too many distracting colors. I created this in a flat design style and kept it minimalist, yet clear in navigation.
Closing Thoughts
At first, this project was very daunting to me. The thought of putting together an online store by myself seemed like a huge task and would take me forever. My stockholder, of course, did not have forever. But once I got down to working out the elements and components of the website and was able to put together a plan for how the site would flow, the work just seems to put itself together. There were definite challenges with working with Wix and not a developer. You have a lot more freedom with a developer putting the site together. Working within restrictions really pushes you to be creative in how you will tackle design solutions.
"I had the pleasure of working with Jimmy Duong on the creation of my company's website. As a new business owner, I knew the importance of having a powerful and comprehensive website, but I was at a loss of how to do it myself. Jimmy made the process easy. With his depth of understanding for web design coupled with his artistic eye, he was able to create a beautiful and user friendly website for me. He offered feedback, suggestions, and new ideas on how to create the best end product with my business goal in mind. We were able to work together remotely, and he was prompt and timely with all deadlines. I am thoroughly pleased with the website he created and would recommend him highly."