Watercolor Illustrator Website - Redesign
Description
A redesign project on a watercolor illustrator’s website.
Project Duration
3 days
Role in Project
Interface design, Prototype
Background
The goal of this project:
Redesign the website to fulfil the purpose of showcasing previous works and projects, in supplementary to the client’s Instagram account
Increases cohesiveness between pages while maintaining a simple style, with white as main color and brown as accent
Process
After looking at the original site, several points for improvement were identified:
Information structure: Certain parts of the current information structure can be confusing to site visitors, rearrangement and renaming of pages would help provide a better experience.
Content: With the main type of content being images, it overlaps with contents on Instagram. To further fulfil the purpose of providing supplementary information, more written contents could be included.
Some screenshots of the original website:
(Left to right, up to down) Homepage, ‘Details’ page, ‘Shop Online’ page and ‘Get in Person’ page
To reconstruct the information structure, I started with sketching the structure map of the original site, and thinking of solutions for each problem identified.
I presented my ideas about extra contents and rearrangements to my client. After discussion and considerations on the constraints my client had, for example limitations on budget, the new structure of the website was constructed as follow.
Changes made:
The new structure starts with a landing homepage, with a main button ‘View my works’
Project information shown under the landing page, with buttons linking to respective details page
More details in the details page
Categories in the gallery page removed, with selection made on image as well
The separate shop pages combined, making it easier for viewers to get the idea of where to get the products
Contact page link added on footer
According to the new structure, I did some wireframe sketches.
Final Design
Here is the final version of the high-fidelity design after some iterations.
Landing page with a list of previous works beneath
Desktop version: (left to right) Details page, gallery page, event page, shop page, contact page
Mobile version: (left to right) Homepage, details page, gallery page, event page, shop page, contact page
Upon completion of the final design, I asked for some feedback from the client.
She is satisfied with the outcome of the redesign project, and thinks that the new structure is more organised, and the style more cohesive across the whole website.
One concern is that the purpose and content of the website may need amendments according to her needs in the future, for example when she is including an online shop in the website.
As for myself, some afterthoughts about areas that can be worked on in the future:
When the list of previous works get longer, it may not be suitable to place the full list on the landing page. A new page can be created for overview, and place only a selection of featured projects on the landing page.
Currently there is no eCommerce platform being used, and purchases are done through Google forms. An eCommerce on the site itself would simplify the flow of purchasing products, which would enhance the experience of the customers.
Learnings
This was my first project done with a client, and it allowed me to experience the process of working for another party. It is important to check with the client frequently for feedbacks since early stages, for example when I decided on the information structure, to make sure it aligns with the client’s expectations. This can reduces chances of making big changes in later stages. Moreover, I have also experienced how to work with constraints from the client. I think it is essential not to try ignore the constraints, but to think of the best possible outcome considering the given constraints, which means that some ideas might have to be given up to achieve that.
In all, this was a nice learning experience for me.