Octarine website

UX/UI Design - HTML/Less


πŸ“‹ 1. Description of the project

Octarine, a cyber security company in stealth mode, needed a website to go with the launch of their platform. Up until now, Octarine had never had a public website and were planning to opportate in stealth mode until the launch of their platform. My colleague and I were hired to design a website that would present the product for their public launch. Most of the marketing content was provided by Octarine and we were in charge of the UX, UI and code.


πŸ‘¨πŸ»β€πŸ’» 2. Process and work

2.1 Theme and brand

The Octarine team asked that we work with Weebly so that they would be able to easily manage the marketing content when we were done with the design of the site. Prior to selecting a theme we made sure we fully understood Octarine’s vision and goals for the site. When we chose the theme we took into account their brand, what websites they liked and what features they wanted on the website.

Colors palette

Colors palette

Octarine logo

Octarine logo


2.2 Mockups

Following theme selection, we started drawing the UX of the website. Octraine let us know at the onset that we had under a month to design, code and launch the site. It was essential that we produce a simple and clean design that would fit with the companies timeline.


2.3 Sketch and code

Once the mockups were approved by the Octarine team we switched to Sketch and InVision. The Octarine team was able to use InVision to easily ask for changes, on both the marketing content and UX/UI.

In order to save time we only used Sketch for the complex design parts of the website. For the simple sections we directly coded the UI into Weebly.

In order to get the UI right, all of the complex sections were designed with Sketch

In order to get the UI right, all of the complex sections were designed with Sketch


🚧 3. Difficulties

The difficulties we had during the project were mostly related to the Weebly platform. Personally, it was my first experience with Weebly and the platforms constraints made the project more painful than others I have worked on in the past.

One problem we had to overcome was the Weebly’s preview mode. The preview only renders half of the CSS properties which makes it really difficult to code anything. Ultimately, it was an issue for the UX/UI flow because it forced us to limit the number of iterations.


πŸ’Ž 4. Outcome

We were able to produce a fully functioning site for Octarine in one month. They were pleased with their outcome and by the end of the project we were able to achieve much more than we initially anticipated. Here are some screenshots of the website that we delivered:

Allie and Kevin were super efficient and easy to work with. Power Design was also very responsive, and they made structural changes to our site in days. Powers design was able to produce a fully functioning site for our startup in a little over one month and took care of everything from UI/UX design, brand, site build, custom code and project management. I highly recommend working with Kevin & Allie and the team at Powers Design and would use them again.
— Wiliam Choe, VP Product at Octarine