A single-page website designed for Novohit using WordPress and Elementor.
Note: Some aspects of Novohit's website have changed since my collaboration with them over a year ago and may continue to change. The screenshots in this documentation are my own and were recorded during the project's development phase.
Novohit is a software management company developing Enterprise Resource Planning (ERP) solutions for a variety of businesses in the hospitality industry. Located in Santiago, Chile, the company contracted me to redesign their outdated website, align incoming brand changes with existing products, and help build a foundation for their entry into the United States market.
- Automatic and manual language localization to serve pages to American, Mexican, and Chilean audiences
- Responsive styling for mobile, tablet, and desktop
- Product catalog with optional filtering
- Client scheduling system for in-person or virtual demos
- Increased page impressions by +2,000/month and implemented website translation services for thousands of monthly visitors
- Designed modern accessibility features for 3,500 monthly mobile, tablet, and desktop users
- Leveraged Figma to create a scalable design system for Novohit’s website
Since this was my first opportunity exploring the business space of ERP systems, I decided to do preliminary research before having an in-depth conversation with Novohit. Approaching the situation with pre-existing knowledge would create realistic expectations for the client and I moving forward.
I spent a week familiarizing myself with the who, the what, and the why of enterprise systems.
- Who is it designed for?
- What is ERP?
- Why do companies use it? etc.
This information was pivotal during live discussions with Novohit's CEO regarding the design and user experience of their new website. Becoming well-versed in the company's roles, responsibilities, values, and expectations had helped me create a more meaningful experience for Novohit and its customers, and allowed me to embody professionalism as a UI/UX Developer.
Following my initial research, I prepared a Q&A discussion with Novohit to:
- Define the project's timeline
- Generate ideas for the website's design and user experience
- Learn more about the company's product and target audience
This was an introspective exercise to help me understand Novohit's vision and resolve development issues in hindsight. My primary concern was feature creep and I wanted to define a set of guidelines before getting started. While there were many important decisions during the development phase, I adopted future-proof design practices to coordinate with any priority shifts or newly generated ideas.
For instance, when the company asked me to update the website in its development stage to align with their administrative portal's recent design changes, I was able to easily apply variations and change global styles in just a few clicks. The decision to leverage Figma as my design program of choice allowed me to create a scalable design system, collaborative environment, and the flexibility to meet the company's needs.
The previously mentioned Q&A only revealed a partial understanding of Novohit's expectations as a company. I needed more feedback from customers and users themselves to understand how the company's audience felt about the Novohit website.
Working with limited resources, I drafted a Google Survey that introduced respondents to Novohit's old website and asked them to answer a series of questions regarding their initial impressions. The feedback assisted us with making informed decisions about the proposed user experience and allowed Novohit to reflect on its customer impressions before moving forward.
User stories and scenarios help UX developers better understand who users are and ensure that features have meaningful impact on audiences. The primary methods for representing users accurately include:
- Identifying information to develop user personas
- Observing users through usability studies to implement design patterns
I continued my research by drafting personas from the information gathered in my initial Q&A with Novohit. While the portraits in the below image are fictional, the information represented in each card is indicative of Novohit's existing clientele and incoming customers from the U.S. The conclusion drawn from this exercise helped us narrow down specific demographic needs and prepare the website to service English, Italian, and Spanish speaking audiences.
The final step in my research process was a rudimentary competitive analysis of existing ERP developers to see how others solve similar problems. My challenge was to create or adopt a solution for managing the plethora of information that hindered Novohit's antiquated website navigation. The company wanted a more fundamental method for organizing and presenting information to new and existing customers which we solved with a single-page application and product catalog.
The below images represent an example my competitor research and include observations of SAP's method for creating user interfaces and navigational flow. I was able to draft my own sitemap for organizing Novohit's services and products into a digestible format that reflects the company's expertise.
Novohit's previous website was observed similar to the competitor analysis to identify user experience and interface pain points that could be improved upon or revised.
Novohit's previous sitemap.
Novohit's newly proposed sitemap for organization and information clarity.
Following the project's research phase, it was time to focus on the user experience. My initial introspection with Novohit helped to identify two key objectives that influenced the proposal pictured below — to be accessible and approachable.
Novohit wanted more customer outreach to users on tablets and mobile phones, as well as a design that would assist new customers with finding a product for their specific use case. This would ensure existing clients could find the information they needed while helping new clients identify useful services that Novohit offers.
Note: Some features, such as the "ERP Advisor", did not make it to production either due to time, priority, or financial constraints.
Pictured below is a comparison between the prototype and mockup designs of my proposed design for Novohit's new website. These designs would soon change in favor of a second, improved iteration that adopts a more traditional style.
The second prototype integrated Novohit's brand alterations with my previous design. It was necessary to update the website's color scheme to align with the new branding standards, and decisions were made to adopt a traditional top navigation bar. Below is a snippet of the second prototype's landing page and a preview of the product catalog in its development phase.
The product catalog's design was largely influenced by the aforementioned planning phase as shown in the card layout below, emphasizing the application of usability research.
The final designs were transposed to WordPress using Elementor as a low-code editor. Some elements, such as the navigation bar and product catalog, were hard coded due to limitations with the platform's preset components.
While I'm unable to share snippets of code related to the final product, I plan to recreate the website as a personal project using React.js or Next.js in the near future. Below are screenshots from the live website which you can visit at https://www.novohit.com/.
At the time of writing this, it's been over a year since the project ended and there's an incredible amount of experience and technique I've improved upon that would drastically change my approach. My responsibility was to understand the project at all levels, learning and documenting the website’s general features, comprehending industry specific needs, and implementing information in a meaningful way to consider a variety of demographics — all while taking into consideration best practices such as: clean and reusable code, minimal dependency on third party libraries, modern usability patterns, and scalable designs.
I recently had a chance to speak to the CEO in-person and he shared how the project garnered new clients for Novohit and allowed them to build on the foundation I created for their website. He shared his appreciation for my ability to grasp project requirements on-the-go, even if they involved different skills, which is an advantage when creating projects with certain complexity. He also commended my attitude towards learning and maintaining a detail-oriented mindset which expressed itself in my work.
Overall, I'm proud of my accomplishments as a UI/UX Developer delivering a product that helped Novohit break into a new market and hope to develop even greater experiences moving forward in my career.