UI / UX redesign

Steve, the Client, is a very experienced software engineer, entrepreneur and business consultant from Arizona. His business, AllThingsWWW, focuses around building website presence for other business owners. I’ve been brought in as a designer on the team, with a first task of redesigning AllThings website itself.

Background

Challenges

The main goals I needed to keep in mind were:
1) Keeping the website extremely fast to load and easy to navigate
2) Coming up with a design that clearly shows what the AllThings services are about
3) Creation of MVP design that can quickly be put to use

Mockup of the finished MVP homepage

Solutions

Starting the process, I narrowed down the typography, color palette and imagery that would be used across the website.

I worked closely with a copywriter in order to determine the content structure of the site, as well as with Steve himself to determine what parts he feels are most important for his business.

Part of the challenge was to make the site look appealing and interesting, so I thought about where to add some simple interactions and animations that wouldn’t make the site work slower.

Overall, the site took the old blue-inspired color scheme and while I kept the waves, I made them look a bit more unique.



In the end, knowing this project is a long-term and daunting task, we created the “minimum viable product” version that lacks some of the animated effects and in-depth information, but it hosts basic information about the AllThings business and ways of contact.

Process

Process-wise, I thought a lot about the entire planned structure and how the hierarchy for all of the different componets should be established.

For the most part, we have been testing the site internally between developers and copywriters, through the Figma prototype screens.

At the end, I’ve created a prototype using Maze platform, that a project manager from AllThings can then use to test with potential users and get direct feedback. This project is still in progress, but the team is confident it’s on the right track for future needs of the business.

Tools

For wireframing and design: Figma

For developer handout: Figma

For prototyping and testing: Figma, Maze

For asset edits: Affinity Designer, Affinity Photo