As a web agency, we design and redesign websites.
A lot of portfolios are shown so we thought it would be interesting to also show you our User Interface (UI) design process along a project and illustrate this with before-after captures on one of our case study: WKD online dog training website design.
Websites are one of the most important marketing tools to attract potential customers. Our client wanted us to take their outdated, underperforming and non-responsive website and transform it into a visually well designed and user-friendly website targeting very non-tech savvy users, to help them grow in their market. In this article, we dive into the details of designing user interfaces and the before and after of this website redesign project.
First of all, we’d like to share our process of user interface design with you.
Phase 1: Analyzing the old website
During the UX process, we analyze the problems and needs of users throughout the study of their website, but during this process, it is more about user-experience. In this next phase, we will identify the problems of all visual parts and interactions between them.
Phase 2: Analyzing and researching market and competitors
Same as the UX part, analytics is very important in the UI part. We carry out market and competitor research to understand certain groups of users using their website, and patterns of their behavior to avoid including unnecessary features and create proper guidelines during the user interface process.
Feel free to read more about our UX workshops we conduct: https://outsourcify.net/how-we-facilitate-a-ux-workshop-at-outsourcify/
Let’s jump to the core topic of this article, the UI design.
Phase 3: Gathering Inspiration
This is where the UI design really starts.
As long as we analyze the market enough, we gather inspiration such as gathering imagery, colors, motions whatever inspires us based on the research and information from the client to define the concept of design style which we want to apply for the project. With all gathering inspirations, we hold several brainstorming sessions together for more creative ideas and narrow down our opinions to several common ones.
Phase 4: Set up the guidelines
When we narrow down our opinions on the design concept for the project, we start to design the landing page first to see the overall atmosphere of the design and when it’s done, we present it to clients. During this phase we set up the basic guidelines such as headings, color theme and style of design components such as buttons or menu, you name it. This process can either be done starting from the Desktop version design or actually Mobile First which means starting with the design of the mobile responsive depending on User Experience data, if users are more likely to use the platform on their mobile devices.
This Mobile first process helps to structure the information architecture better and also helps for the development to start with a lesser code base to adapt when the desktop version needs coding.
After we get the final approval on the landing page, we set up the further guideline of the rest of the design component. Style guideline helps designers and developers follow to ensure the every page of the website will be always consistent and maintain a cohesive experience. Based on the design components and guidelines we apply to the landing page, we design the rest of the sub pages.
Phase 5: Present the design to clients
When the design is completed, we present design to clients through the platform such as Invision or Adobe xd and we receive some feedback back and forth with the customer until we both are satisfied with the design. After this stage, our design is developed by professional developers at Outsourcify.
Now, we’d like to introduce you the result of the before & after redesign of the website for WKD.
Before redesign
The older version of WKD’s website was very heavy with a lot of contents. Especially pages under online courses were full of unorganized contents. It seemed to be difficult to find the information users are looking for quickly. Overall, along with the content overload, the site wasn’t optimized for responsive.
In addition, each component on the website wasn’t harmonized and didn’t really show the identity of the brand. As we studied through their website, we realized that they were using colors such as neon green, pink and orange which don’t seem to harmonize with each other. It needed a jointed color scheme and design components for sustainable and consistent design.
What is our solution?
Solution 1: Use consistent colors and themes
To make the website navigate easily through the contents and make it easy to read, we had to make the great choice for the font and colors. We chose the colors and fonts which represent WKD to generate a positive impact on users to the website.
We offered our client a new color consisting of pink and navy color that can help the brand make a big impact. Something that stays trendy and friendly that stays accessible to everyone, something popping out for non-tech savvy users and something that still represents the “online” side of WKD which is an ‘Online dog training’ platform. These colors also stand out from their competitors.
We setted up the pink color as a primary color to highlight the important components such as primary buttons or hover status, on the other hand, we set up the navy color as a secondary color to use mostly for the font and secondary buttons.
Solution 2: Use clearly readable typography
Choosing the right font is as important as choosing the right color scheme for the better user experience and brand identity.
When we checked through the previous website of WKD, we realized that there was no guideline system for typography such as headings, subheadings and paragraphs. We chose fonts styles which are relevant to the brand identity and reflect the brand personality with the readability.
Solution 3: Use UI elements and good images reflecting brand identity
An image is used as a good asset to convey the story of the brand to users. For successful branding imagery, we focus on using consistent and good qualified images throughout the website. (Usually it is strongly advised to have unique, proprietary images of the client’s team, offices and whatever scenes they want to highlight).
In addition, we applied the roundy rectangles-including fills and borders- for imagery and texts to keep consistency with other UI materials such as fonts, colors and icons.
After redesign
Our main goal was to update the outmoded UI part of their old website looking modern and clean while maintaining their brand identity but also to redesign the whole user journey of their online training platform.
Here this was not only a matter of look and feel of the public pages but how to harmonize both the public website pages and the whole online training platform with courses, groups, categories and lessons.
After redesigning the website, it is more clear what visitors should do, for example, signing in and subscribing to courses, paying for a course and assisting to its lessons.
All of this not only desktop but also mobile, considering the user is a very non tech-savvy audience, we had to make hard choices one what is fundamentally simpler, easier and yet still modern looking and appealing to all eyes.
In addition, well organized and harmonized design materials strengthened the brand identity. Most importantly, our client is really satisfied with a brand new design for their website. Overall we could successfully achieve our goal and targets on this project.
