Kodifly

Background

From STEM Educator to Software Development Startup

Kodifly is a software development startup that originally operated as a STEM education provider under the name AI Academy. After completing its transition, it sought to create a new website to showcase its rebranded identity and the new services it offers.

‍

Sketch

Interpreting the content with quick sketches

After receiving the initial content created in PowerPoint, I reviewed it, asked questions, and sketched out some wireframe ideas.

Wireframe

Align with the team on page structure

Next, I created a wireframe with 12 pages to facilitate discussion with the team before moving on to the high-fidelity prototype.

‍

Iteration on Wireframe

Updates based on usability and development best practices

My manager, developers, and I had a discussion about the wireframe. We agreed that the overall direction was good, but it would be even better to iterate on some modules to align with usability best practices and enhance ease of development.

Vertically align content for easy scanning

I proposed combining the "work" section and the "client" section to build trust with the client regarding the company's ability to deliver high-quality solutions to large corporations.

The team agreed that this was a great solution, and they suggested vertically aligning the content to make the message stronger.

Put contact information into the footer

To simplify development, the "contact us" module has been relocated to the footer as it was duplicated on multiple pages.

Additionally, I have made accessibility improvements by changing the text to white on a dark background.

Convert form into a single column

To prevent users from skipping fields when filling out a two-column form, I have edited it to be presented in a single column instead.

Mood board

Explore visual direction with two options

After reviewing the initial prototype with the team, I received feedback to explore an additional design direction. The stakeholders expressed a preference for a clean and modern style. To gain further clarity, I created a new mood board, which served as a guide for designing the second prototype.

Highlight

Intentional design that helps the business grow

Homepage: Introduce the business and establish trust

The goal of the homepage is to quickly introduce the company to potential clients and generate interest in working with us.

‍

Portfolio & Blog: Use cards to organize contents

Reusable modules that make it easy for user to scan and the business to update content.

Service: 1 templates, 6 services

The company provides technology solutions in 6 categories. A template is designed to make it easy for the company to build, edit, and add new service pages as the business expands.

Get-a-quote: Easy-to-fill-out quote form

Since quoting is an important part of acquiring new clients, it is designed to be seamlessly easy to understand and fill out.

Style

Organized style guide and file structure

When I first joined the company, I discovered that there was no proper file set-up established. This could be due to the small team size and close communication among team members. However, implementing a more organized system would greatly improve efficiency. Therefore, I introduced the benefits of a systemized design to the company and initiated the establishment of this project.

Outcome

Establish Kodifly as a trusted software development company

This redesign achieves the goal by showcasing the services and strengths of Kodifly. It effectively communicates the modern and reliable quality of the business in a clear and concise manner.

‍

What I Learned

Ask questions and be open to feedback

I remember feeling quite confident when presenting my wireframe and prototypes to the team, only to discover that it wasn't quite there yet. This experience made me realize that I should have asked more questions at the beginning to fully understand the project goals and technological constraints.

It is also important for me to be open to feedback and be willing to incorporate it into my work.

‍

Reflection

Collaborate with the developers when building the website

During the design phase, I maintained close communication with the developers to understand the technical constraints. However, I did not have the opportunity to work directly with them during the development phase. I wish I had collaborated with them to gain a better understanding of how the design translates into a live site. Additionally, I wanted to assist in the process and identify ways to improve its efficiency.