top of page
Bloma-Logo landscape

Bloma Organics Ecommerce Web Development

Project overview

THE PRODUCT: Bloma Organics Responsive Website

​

Bloma Organics is a cosmetics start-up from Namibia that needed a promotional & information website to highlight new organic skin care products. The company needed a website to drive leads and drive sales from promotions of new products.

Shopify at the time was not available in Namibia and the client needed a site that would drive sales to their Facebook store.

​

This project consisted of UX Design as well as Front-end coding to enable the client to host the website.

Contact-page-mockup

Project Duration

​

February 2020 - June 2020

THE PROBLEM

​

Facebook alone was not driving enough sales traffic for the client. They did not have a website with information about their products and company which did not present customers with the necessary level of professionalism. The client needed a central way to keep customers up to date with products and start sales journies.

THE GOAL

​

The Goal of the project was to provide an easy-to-navigate platform that Bloma Organics can use to manage content, highlight promotional products, drive sales and integrate with the companies microblogging platforms on Wordpress, Facebook, and Twitter.

MY ROLE

​

UI Designer, Requirements analyst, Web developer

RESPONSIBILITIES

​

  • UI design

  • Relaying client needs

  • Digital and Paper Wireframing

  • Website development in Bootstrap framework utilising CSS, HMTL5 and Javascript

Understanding the User

User research summary

User research was limited here as the client insisted on a quick turnover of the project. In this case, secondary research was used to develop the platform along with limited usability testing within the client's sales network.

​

The secondary research consisted of customer information from the client on what a typical customer persona had looked like in the past.

User research: pain points

Information Access

​

Bloma and customer community needed a new way to access information about new promotions, products and inventory.

Integration

​

Brand is not integrated well across platforms and therefore brand messaging is not consistent.

User Journey and Site Map

Site map was intentionally kept simple as a form of link tree with increased promotional and product information.

​

After browsing products on the product page users would be directed to the Facebook store to complete the process.

Information provisions for this would need to be provided to users so conversion rates are not hurt when directed off-site.

​

The blog was already run on Wordpress and therefore needed to be integrated on site, with the intention of scaling more content and more of the purchase process migrating entirely to wordpress.

Bloma Organics Site map architecture

Design procedure

Digital wireframes

After feedback additional carousels would need to be built in as client needed the page to interact like a catalogue book

Bloma-Organics-Wireframe-Products

On each page, there will be a hero image to encourage customers to try different and new products. This is followed up on the about page with information on the company and their beliefs. Products with current discounts and promotions are added at the bottom of page to link back to the purchase product journey.

Digital wireframing was used to in ideation and design processes to feed the program architecture within Visual Studio.

​

Using MVC and Bootstrap, a clear structure is needed to understand where the catalogue of products would sit before links and code could be built in.

Bloma-Organics-Wirframe_home.about-page

Mockups

Large product cards were used to entice customers to follow through with purchases.

​

Using the brand colours in the background, the colour created a playful guide for the eye to move through the information hierarchy.

Contact-page-mockup2 UI
Product-Card2-mockup Bloma UI
Product-Card1-mockup Bloma UI

By aligning the text of the companies values alongside products this created an increased pull for customers to browse and try the products.

​

The design was built to allow picture to be swapped in regularly with content management demands.

High fidelity prototype & Debugging

High fidelity prototyping was conducted through debugging within the Visual Studio program platform.

Takeaways

IMPACT

​

The impact of this project was to increase the sales volume and customer base within Namibia for the Bloma Organics products. The founder of the company was still working through school and the increased efficiency of the site would make balancing her business and school easier while being able to fulfill orders more effectively.

WHAT I LEARNED

​

Client requirements can hold just as much importance as users' needs. Finding the balance between the two is a large responsibility of the UX designer.

Next steps

Although the responsive website would adjust for smaller screen resolutions such as tablets & mobile. The experience would need to be continuously optimised for mobile.

Migrate more of the website functionality to Wordpress once the client had traffic metrics and revenue to warrant premium service on Wordpress.

Cart payment functionality hosted on-site rather than link to external payment service. - Payment service must be supported in Namibia

bottom of page