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.
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.
🚧 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: