Developing an e-commerce website requires a careful balance between customer needs, technical challenges, and developer creativity and style. Finding the right point in this triangle is essential for launching a successful digital product. Here, I present my work in creating the digital front door for “360 Café” restaurant.
Choosing the right site builder
Choosing the right site builder or platform is one of the earliest and most important decisions in any website development process. This decision influences various aspects such as design flexibility, functionality, scalability, and long-term maintenance.
Small businesses or individuals seeking a quick, affordable solution might find drag-and-drop builders like Wix, Squarespace, or Shopify suitable. These platforms provide user-friendly interfaces, pre-designed templates, and require minimal technical skills, making them ideal for teams without dedicated developers. However, they may have limited customization options if a highly personalized experience is necessary.
On the other hand, open-source options like WordPress or custom-coded solutions provide greater flexibility and scalability, allowing more detailed customization, third-party tool integration, and control over hosting and performance. The downside is that these usually require more technical skills and ongoing management. The right choice depends on our project goals, budget, timeline, and growth plans.
I selected WordPress.org as the development platform for the 360 Café website due to its extensive integration capabilities, supporting their current goals and future expansion plans. The domain is hosted with Hostinger.com, a leading provider known for its performance with WordPress and e-commerce sites, offering benefits such as improved SEO and cost savings. The domain name for this website is www.360cafecr.com
Problem statement:
360 Café is a popular local restaurant in the heart of Costa Rica, serving authentic cuisine to residents and visitors alike. Its online presence was limited to social media platforms, with no dedicated website.
The 360 Café website offers a seamless digital experience, allowing customers to browse the menu, place orders online, find important information like hours and location, and stay updated on new offerings and promotions—all available in both Spanish and English.
I held multiple meetings with the 360 Café stakeholders to understand their needs better. Additionally, I created three user personas to gain a clearer picture of users’ needs instead of relying on assumptions. These personas provided insights into users’ goals, behaviors, frustrations, and preferences. As a result, they helped me identify the most important features and content for the website.
Planning and design phase
During this phase, I designed the information architecture by creating a sitemap for the 360 Café website, outlining all essential pages and their subpages. I also developed wireframes in Figma, specifying layouts for main pages like the Homepage, Menu and Order, About Us, Contact Us, Cart, and Checkout.
The website is designed to be very user-friendly and to create a warm, family-like atmosphere that effectively conveys the cafeteria’s ambiance.
Later, I established the color palette and mood board, drawing from their branding, wall colors, and restaurant elements like plants and paper walls. Each color was carefully analyzed to ensure it conveyed the intended message in every detail.
Development of the website phase
During this phase, I began developing the website using WordPress.org. I selected the highly recommended ‘Astra’ theme, known for its compatibility with e-commerce sites. Over time, I incorporated various plugins to customize the template into a distinctive 360 Café website. Some of the plugins I used include:
- TranslatePress: This plug-in enabled me to translate the entire website, allowing access for both domestic residents and international tourists.
- WooCommerce: One of the most popular e-commerce plugins that offers security and flexibility.
- Advanced Product Fields (Product Addons) for WooCommerce: Allow adding personalized addons and text on the WooCommerce product page for customers to leave customization comments.
- Tilopay: This was the third-party service that enabled the WooCommerce Store to accept credit and debit card payments.
- WP Café plugin: Enabled me to craft a seamless and unified experience centered on the cafeteria website, including reservation forms and robust integration with WooCommerce.
- Elementor plugin: This helped me improve flexibility in the design with the chosen theme.
- MC4WP: Mailchimp for WordPress: This plug-in integrates with Mailchimp and enabled me to create the subscription E-newsletter in the website’s footer navigation.
- Yoast SEO: Allowed me to improve the website’s search optimization through integration with Microsoft Bing and Google Search Console.
Analyzing Site Performance
In this phase, I assessed a preliminary version of the website through user testing. The research goals during the user testing were:
- Assess whether the website’s navigation, layout, and overall design are user-friendly and intuitive.
- Identify essential improvements based on user feedback and interactions during the website’s user testing session.
The insights gathered from this process were incredibly valuable. User testing enabled me to enhance the reordering feature, which was absent in the initial version. As a result, I added an ‘Account’ section to the top navigation, allowing users to view their past orders. Now, with this feature, users can also save their personal information, making checkout smoother.
An additional key insight from user testing was that users struggled to understand the “confirmation page” due to its unclear design. Consequently, I enhanced the visual layout by adding a clear title and incorporating an animation to improve its visual appeal.
Finally, I conducted a performance speed test using the “PageSpeed Insights” website, which offered suggestions to improve the website’s load time. The results were positive, and I have implemented some of the recommendations on our site.
Launching the website
Ultimately, once the website has met all required functionality, including pages, security, performance testing, order processing, and staff training, it is officially launched. Today marks the official launch of the 360 Café website, celebrating the brand’s digital debut online. Here is the link to know more about 360 Café: www.360cafecr.com
For more detailed information about my project, I have attached a comprehensive presentation report.
