DiamondNet Website Redesign

First Project for Cactus Media Group

Design Proposal

Below is the exact design proposal I wrote for DiamondNet, which also captures a template of how I deal with other clients as well. When I am approached with a redesign request, I first begin by talking to the client about what their goals and preferences are in seeking out my services. I then make a list of every noticeable flaw from the user’s perspective of interacting with the product design. I openly communicate those flaws in the proposal to the client, and offer some suggestions for solutions to the flaws, in line with their previously stated goals and preferences for the design. Finally, I open up the conversation for them to veto any aspect of the proposal, and modify the design accordingly if necessary. 

Design Explorations & Brainstorm

After the client approves or voices their preferences for the suggestions made in the initial proposal, I then brainstorm some different visual approaches to the UI design with Adobe Creative Cloud Apps. For this sample of project, I will focus on the icon buttons as a sample of my design process.

This client voiced their concern over having already-paid-for photos that may not necessarily work with a vertical order change of the icon buttons, so I kept the original horizontal order.  I initially played around with different shapes for the buttons (examples in above screenshots) to explore different routes. After trying the above button styles out on the images DiamondNet had, I realized that they looked awkward and unpleasant with the background photos.  Some of them covered the focal point of the image, and looked too rigid in comparison to the rounded “book appointment” button at the top right hand corner. So I decided to keep consistency with the rounded “book appointment” button, and go with a more simple rounded shape (below). The simple rounded shape also kept consistency with the mobile version as well.

 

Final Button Designs Below:

Final Wireframe

Once I’ve worked out the details of the design on Adobe XD, I then ask as many people as possible to use the wireframe as they would if they were the target audience / customer, and give some constructive feedback. After simply observing the users interact with the website, I make note of any behavioural patterns during the interaction, as well as address any components that may need to be restructured or changed according to the users’ feedback.

Once the wireframe has been through the above process, I then add comments for all the design changes and properties necessary to make it a bit easier for the software development team during implementation. 

The final wireframes for the DiamondNet website design can be accessed in the below links:

Design work for a Vancouver artist

I was hired by Linda to help with designing her website and ended up learning so much more!