The Journey to BeFresh.
My journey to create BeFresh was inspired by my passion to create a website that allowed users to eat good and live healthy.
I was was inspired by the meals subscription services I’ve used that make food fun, fast and exciting. Because of subscription services like Blue Apron and Hello Fresh, I’ve tried so many new foods that I wouldn’t have otherwise. To achieve my mission of satisfying customer’s smoothie cravings I set out to build a clean, modern, easy to use and to understand subscription service.
Ever since working as a smoothie barista in high school, smoothies have been my favorite healthy snack to replenish. After a lot of research about smoothie subscription services, I decided to re-create Daily Harvest’s website.
Front-End
While planning the project I realized the final product would require many different routes, pages and sections. Because of Reacts performance benefits and separation of concerns it was the obvious choice. React allowed me to create each component separately and improved code maintainability.
By the end of my project, I had over 18 components. By separating out concerns I could easily reuse components such as the navigation bar. I also implemented Redux and Thunk in the fetching of products so there would be one single source of truth.
User Experience
The advantage of subscription services is that they help simplify complicated choices for customers and make their lives easier. With this in mind, I knew the user experience for BeFresh would be very important to the project’s success.
To start, I asked myself some questions. What goals is the customer trying to achieve? How can customers choose the products and services? How should we explain the service to potential customers? I decided top priorities included explaining the plans to subscribers and creating a smooth flow for ordering smoothies.
To answer these questions I researched how other companies solved these same problems. I studied other meal subscription services websites to see how they handled things like the checkout process to make sure I was following industry best practices.
After a lot of sketching and planning I decided the BeFresh website needed a home, products, individual product, checkout and login page. Once I finished wire-framing these pages and the relationships between them I moved onto the visual design.
CSS
To bring my wireframes to life I started by choosing colors, typefaces and button styles. I chose five colors that were harmonious, warm and bright but not too bold. I wanted the colors to call to mind fresh fruit. I chose colorful, brightly lit images of fresh fruit and smoothies to convey the deliciousness of the product. Once all the design decisions were made I used Zeplin to translate the wireframe to my website.
For layout I mostly used CSS Flexbox which allowed me to quickly make my site responsive using media queries. BeFresh is currently desktop, laptop and mobile friendly. Lots of hover and cursor styles were used to clarify which items are clickable. I implemented a sticky header to the order-products page so that a user can easily identify how many items they have in their box. Modals were utilized on the order-products page to give more information to a user about the specific product they clicked on.
Back-End
Rails, Rails, Rails
I began planning the back end by sketching out all the models and relationships I needed to have. I needed models to store users’ names, emails and subscription status to name a few. Users needed to be able to see their order status when they log in; thus an “order model” was created. I also created a model for products that included attributes such as product name, kind, tagline and description. Because products have many orders and orders have many products, a product_order model was created to be the join table and belong to both the order and product. I also used an order serializer and user serializer in API.
Perhaps the most time consuming part was seeding my database. I started by creating 4 users, 4 orders, 17 product orders and all 14 products. The products each needed a name, kind, tagline, description, tastes like, ingredients and images which I hosted on Amazon Web Services.
Overall, I was very happy with my the API I created because I was easily able to make get requests to pull all my product data. When a new user is created upon checkout I make a post request to create that user with their order details.
Accessibility
After learning more about web accessibility from a fantastic meetup I attended, I went back through and made changes to my website. These changes were fairly easy to implement and I wish I’d made them sooner. I added better semantic markup such as: nav, header, footer, article, and aside instead of having a lot of divs and spans. I made sure there were correct alternative text to all my images. I also went through and tabbed through my website to see that it flowed left to right and top to bottom. Lastly, I ran my website through a contrast checker to make sure it contrasted well to ensure that everyone can distinguish between various elements on my site.
Features I would add in the future. I would love to optimize my website for faster performance and add tests. Reviews for the products would also be a great feature. Also, instead of adding each item to the “box”, the interface could have plus or minus buttons for quantity, so there’s only ever 1 unique item displaying each time.
Questions? Comments? Feedback? Let me know! I would love to talk more about this project.
Next up i’ll talk about my experience using React native while building the mobile app for BeFresh. Stay Tuned.
✨
