Spanish By Mary Website

Website design visual on screens

Website & Brand & Visual Design

Redesigning a website for a small business, Spanish tutoring, to help the business grow and to provide value by showing previous clients’ testimonials.

tools

Sketch, HTML, CSS, Adobe InDesign, Adobe Photoshop

tasks

Responsive Web Design, Web Development, Content Development

Process

⇝ Ideation Phase

When I met with the client, she explained that her current website's appearnce is amateurish and she wants a more professional and modern looking website. I looked into the website to decide what kind of change would be better for the business goals of the client.
I researched similar business websites to find out how to create the basic design and interaction decisions as well as how well the websites serve the purpose of the businesses.

⇝ Findings

When a person lands on the page, it is not clear enough what kind of business has been offered. Even though the content itself looks enough for marketing the small business, the visual design doesn't give the effect.

A website evaluation notes

⇝ Information Architecture

While creating initial navigation I tried to preserve the previous one, since the content was already ready. I just added extra testimonials and lessons tabs.

Website navigation design

Initially, I created the hi-fi project focusing on the navigation, but after a few iterations and user feedbacks, the final navigation became slightly different, as seen on the final project.

⇝ Hi-Fi Prototype

I created the prototype based on the first iteration of the initial navigation and the evaluation of the prior website. As a primary color, I chose the color blue, since most blues convey a sense of trust, loyalty, cleanliness, and understanding since it is matching with the business of teaching. The second color, brownish color, is chosen as an accent color due to it is complementary of the blue hue and its tint used as a third color.

A website prototype on Sketch

⇝ Final Project

I developed the website by coding with HMTL, CSS, and simple JS implementation. While keeping the tagline, I wanted to give visitors a clear understanding of the business, so I added a little information on the landing page.


The second change that I made was fixed positioning of the contact information on top of the prototype, so on every web page the information can be accessible.


The last change was the slight change in the navigation names to make their names reflect its content better.

Screen captures of a developed website Screen captures of a developed website

reflection

What I have learned

TOP