A spice company based in Windermere, Florida is looking to establish a website and social media presence that can compete with other companies online and bring customers in and buy spices to cook which can boost sales on their Shopify website.
The primary tool I used for this project is Adobe XD to create the mid and hi-fidelity of the website. I also used Lucid and Xmind to create the site map and information architecture. This was all used to create the final product inside his Shopify website.
I accomplished a website that the client was looking for and built a great user experience that can shop for spices and merchandise. I also made sure the website was responsive and made sure to utilize keywords for search engine optimizations for traffic flow.
One of the biggest challenges I had was working with Shopify, since I'd never personally used Shopify before until this project, especially the back-end since I was new to learning about Shopify, but learned quickly to create the website on Shopify.
My role for Spicelopedia is to create a website in Shopify by designing a brand new design and finding keywords to implement. I also was tasked with implementing marketing strategies that create traffic flow on the website and social media pages.
The completed website using the mid and hi-fidelity to implement onto their Shopify website took about a month to complete. But the website maintenance and updating keywords and social media was an ongoing process throughout my time working as a contractor.
For the market research, I wanted to evaluate the different companies that were selling spices and what they did for their user experience on the website. I came across great companies that were local in the Florida region and saw what they did. Then I expanded to small businesses in the united states to see what they did and finally researched larger companies when I typed spice companies. I found great companies with a great user experiences that can compete against Spicelopedia but decided to focus on two companies that I can examine and figure out how they create a great user experience and also some things that don't as well.
The two primary websites I discovered that rivaled Spicelopedia was Spice Tribe and Spiceology. Both were great websites but different at the same time with each other. I wanted to learn what a small business like Spice Tribe was able to provide on their website and how a larger company like Spiceology. Both were good websites that sold you on using their spices but needed to evaluate more on what aspects of each site worked and what didn't work. I created the pros and cons of each website to examine what made that website so good. But also analyzing ways of improving Spicelopedia without making the mistakes the other two websites made.
Both websites were great user experience and was hard to nitpick issues from each. I found some ideas that I wanted to implement onto the website like an email pop-up for users to sign up, which Spiceology had but spice tribe did not at the time of this study. Also including free shipping on orders over a certain amount of money. Spiceology did not have any free shipping from what I saw, spice tribe did. Both contained a great recipe page with filters, tabs for specific sections, and a list of ingredients for the product page. They both were great but had some stuff that may have been missing, which I wanted to include in the website, and also great ideas that worked for the experience.
I begin to construct the information architecture along the site map to help understand the content going inside each page and how many pages are needed for the website. For the page, I must include the home, about, recipe, and shop pages to help me understand who my client was, what he was selling, how to buy it, and how to make recipes with that food. I made sure on the homepage I can create different link-building techniques that will be easy for the user to add the product to shop or see the product itself. I also wanted to make sure that the website was easy for users to read and input all the important information on the home page so that users know what was important to that user. On the bottom is the footer which will have the collections of all the spices Spicelopedia has and their social media, policies, and about us.
I wanted to check how the website would look by figuring out the layout structure and evaluating how to make the design responsive for all screen sizes. I always make sure to create four different screen sizes that match each breakpoint for:
I made sure that each design fits those breakpoints. Next, I created 16 column grids for each page to help me lay out each section and breakpoint containing the max width of 1200px.
#BC423B
#191919
#F4F4F4
#27BFC2
The font we decided to go with was called Lexend, which was because it fit the tone we were chasing after. Which was fun but also can get down to business. The sizes of the fonts varied, but we broke them down into
