Case Study : Delta Kids Website Redesign
Task
- Revamp and redesign an existing website(deltakids.ca) which needs improvements by making it more user-friendly
- Consider responsive designs for both mobile and desktop
- Communicate with the client, understand what needs to be improved and satisfy the needs
- Research and information of the specific website and target audience
Project Length
- 3 weeks
Tools
- Sketch App, Photoshop CC, Illustrator CC, InVision
Team
Our team consisted of 2 UX designers(Alban and Kevin) and me(Rachel) as the only UI designer. Though we had different roles for the project, we worked together in the interview portion so that we asked enough UX and UI questions to all our interviewees.
Our Client
- Delta Kids : They are a non-profit coalition of 20 community partners. They work together to connect families in Delta with information and services. Their current website aims to host information for all partners in Delta.
Our client came to us with these goals…
- Increase usability of information
- decrease abandonment of the site
- Increase awareness of the programs and services offered in Delta
In order to tackle those goals I had to first become an expert of their current website and understand what needs to be improved.
Design process
1. Creative Research
Before conducting interviews, I collected 20 screenshots of websites for kids and families and did a ‘20-sec gut test’ to see their gut reaction in 20 seconds by showing these websites’ images. These four websites are what our client and interviewees liked the most from the test, and this test was really helpful to set my art direction since these websites definitely had something in common.
During the interviews, I asked people what colours or images they think of when they see kids and family. Almost all people mentioned bright colours, and most talked-about colours were blue and yellow. People said it’s because kids are cheerful and active, and those colours are usually positive and high in energy, which remind them of kids. I also found out that blue is the most trustworthy colour from many psychological studies.
Then I filled out this design inception work sheet to specify my design. First of all, I thought about ‘why’ the website exists and found out that it is to connect families in Delta, to inform them of what activities or events are available in their area and to provide them with child development resources. So I thought the mood of the website should be cheerful, happy and inviting because its main function would be posting events for children. But at the same time, I wanted to create an informative and trustworthy mood as well since parents would rely on the website to get reliable informational resources for their children.
2. Mood board
After research, I created this mood board. To show “Happy Families, Healthy Children” as the motto in the logo says, I placed bright and cheerful kids photos to show the happy and healthy mood. From the research I learned that people usually think of kids playing outside and of blue skies, so I put those images as well.
I set this colour palette on the right side— teal blue, light blue, white, yellow and deep sky blue. I wanted to create a mood that makes people feel happy and fun but still feel trustworthy and informative, since the target audience would be parents who are looking for information. So I tried to keep these two moods, which is fun yet trustworthy, and tried to balance both. And by adding these images, I wanted to show the diversity in kids and parents as well.
3. Colours & Logo
The website already had a logo. Our client wanted to keep the logo rather than redesign it because there were already too many pre-made materials. Fortunately, the colour palettes that I chose from the research were very similar to the current logo colours so I tried to match with the current logo colours to look harmonious. One thing that I wasn’t sure about was the butterfly part, but from my research a butterfly is a symbol of brightness, guidance and hope in North America, which I think is nice to show what the website should pursue.
So here is my final colour palette. Teal blue and light blue are calm and relaxing colours, while yellow and deep sky blue are bright and cheerful colours. The former (teal blue, light blue) colours represent parents, and the latter (yellow and deep sky blue) colours represent kids. Even though they look quite different from each other, they look harmonious when put together. By choosing these colours I wanted to show the harmony in calmness and brightness.
4. Illustrations
I learned from my research that people like cute and cartoon-like illustrations, which the current website doesn’t have at all, so I drew these illustrations for the Delta kids to match with the ‘happy kids’ image.
There were several changes throughout the process until it was confirmed by our client and the committee. I tried to show as much diversity as I could and I revised the illustrations based on the feedback. We ended up coming to an agreement with the product above and I think it adds more value to the friendly and approachable mood by showing a greater ethnic and cultural diversity.
It was quite challenging since it was my first illustration, but I really enjoyed the process and learned so much from it.
5. Style tile & Style guide
- Typography
I chose Bree Serif font for the heading. It looks energetic, young, charming so I think it matches very well with the whole mood of the website. If you look at the font in the logo, it looks similar to Bree Serif so it keeps the balance. As a heading it works nicely too since its slab-like shape makes for a strong impression. It is optimized for both web and mobile interfaces. On the other hand, I chose Open Sans for the body texts. It is a sans-serif font that looks clean and modern and has a rounded and friendly shape. It also has diverse weights and an oblique style to show hierarchy nicely especially because our main purpose is to inform parents of events or information by showing the calendar. Moreover, this information in the calendar will be shown with a small font, so I wanted a font that has clear legibility even in small sizes. Open Sans has a nice legibility even in small sizes and is optimized for web and mobile interfaces as well.
- Button
Considering their consistency, I kept the same height and shape(rounded; applying same radius) for all buttons. I also highlighted the main CTA button in the home screen by adding a shadow.
- Iconography
I used flat, rounded and friendly-looking icons so that they look more approachable to the users.
6. Hi-fi prototype
Planning the responsive design for both desktop and mobile was difficult for me at first and took time to understand how they differ. I inspected plenty of other websites and compared their desktop and mobile versions. In the end, I created these responsive hi-fi prototypes.
On a side note, these screens are the ones that appear when you click the global search menu on the top right. When users try searching for something on the website, there’s a happy-looking child, but when there’s no post to show, the child looks disappointed. I think this would make users feel that the site is more approachable by giving more of a playful and cute experience.
Hi-fi Prototype Invision link
- Desktop Version : https://invis.io/CXASICBQ6
- Mobile Version : https://invis.io/WQAQORPYZ
Summary
This was quite a challenging project for me because it was not creating the whole design from a blank slate but redesigning it with limitations unlike other projects that I’ve had so far. Also, drawing illustrations was also a challenging part because I only learned Illustrator two weeks ago(which was only drawing a line and make it curvy), but I taught myself and I managed to draw artwork that totally satisfies my client! It was such a rewarding moment to see our client happy after the final design showcase. We got amazing feedback from our instructors as well, which made us even happier.
With every project that I am assigned, I feel like I am learning the necessary skills to become a full-fledged designer. I am confident that I will be able to overcome future challenges and develop my skills even further.