Veloci-Tech LLC
Veloci-Tech LLC was looking for a responsive, simple website design to showcase their portfolio of works. They requested both a landing page and portfolio page. As the only person on this project, I was tasked with ensuring that Veloci-Tech was given a product that was not only true to their aesthetic, but effective in driving users to contact the team for app designs.
Project Duration: 2 weeks
Identified To Do List:
- Create wireframe for landing page and portfolio
- Determine color scheme and typography for website theme
- Organize information and condense technical language to speak to a general user
- Iterate mock-ups while collaborating with stakeholder and developer
- Design hero images
- Deliver high-fidelity mock-up in 2 weeks
Landing Page
Wireframe and First Draft
To accelerate the design process, it was determined that after the first mock-up was designed the landing page would go straight into testing and iterations. First things first, a wireframe to articulate the user journey was designed:
Using the wireframe as an outline, the following designs were created with a simplistic, cartoonish theme. Stakeholders were asked to determine which color scheme best represented their brand.
I offered my opinion to go with a dark-blue theme. After studying color theory for many years as an art student, I learned that generally, blue hues are usually used to represent calm feelings and responsibility. I included that the color blue would also be advantageous considering that this company was a technology service and the color blue would convey feelings of reliability and dependability.
Iterations
Using A/B Testing, the design of the landing page began to shift away from cartoon-styled images and a hero image of a laptop was selected. The color also changed after the stakeholder developed a logo that involved a lighter shade of blue. These changes can be seen below:
A final A/B Test was conducted to determine which hero image was most effective. The choice for a laptop opened showing the keys proved to be more inviting than the image of the laptop facing away from the user. Below is the final high-fidelity landing page.
Responsive Design
To ensure that the user would have simple access to the website on all devices, the website mock-up was designed for a tablet as well as mobile devices. This responsive design was created using auto-layout. The new features on Figma were extremely fun to work with and made the design of this responsive website simpler and intuitive!
Portfolio Page
Wireframes
The portfolio page was designed to showcase Veloci-Tech’s top three projects. With this in mind, I designed a wireframe that featured all three projects in a clickable list. Once the project was selected, details of the project would display below on the same page.
Once this was designed and approved, I created the mid-fidelity mock-up of this concept using the original cartoon theme.
Usability Testing
I conducted a usability test and found that having all of the content about all three projects plus the details of the selected project was too overwhelming for the user. With that in mind, I redesigned the experience to showcase the projects at a high level, with clickable images and text that would guide the user to a new page including the information about the selected project. This proved to be a much more understandable and clean user journey. Each page included a button as a CTA for the user to easily contact Veloci-Tech for their project.
The final portfolio design is shown below:
Takeaways
This project was extremely fast paced, and due to the tight timeline, many steps of the traditional design process were removed. Despite this challenge, the website design was completed within the time frame and moved into development immediately. The outcome of the website design was positive and my client was extremely happy with the design. They ended up using my design as a stepping stone to develop new ideas for other pages that were implemented after my contract ended.
Although the timeline of this project was not ideal, it was a great experience and I took away many great lessons that I will apply to my future projects. These include:
- Create a style guide plan as early as possible with the client to ensure that the theme is as expected and fewer iterations need to be made
- Conduct as many A/B Tests as possible to give potential users the opportunity to see different presentations of the same information. This gives useful insight into the user journey.
- Since the future user was expected to access the website from a desktop/laptop, the design was first created with average desktop desktop dimensions (width of 1440). However, for future projects, it may be more efficient to create the mobile design first so that the responsive desktop design will be simpler to create without worrying about how the design will appear on a smaller screen. Going from smaller to larger is simpler than the latter.