SwapLanguage Blog
Project duration
Project name
Project type
Client
Type of work
For this group sprint project, we worked with SwapLanguage, a company offering online language lessons. The project entailed coming up with a new design for their blog while working with their already-existing brand identity and design system, which is based on Atomic Design.
During the project, we sketched and built a prototype for the new blog. The prototype was built in Figma while referencing SwapLanguage’s component files, using their design system we added new functionalities.
Illustrated assets
In our design, we decided to display the categories of the blog posts right under the header, for them to be more eye-catching we wanted them to have some illustrated icons. Using SwapLanguage’s color palette and the color-block asset style, I drew 4 icons in Paint Tool SAI.
Prototyping
For the prototype, we built the front page and the templates for the category page and post page. Throughout we referenced what SwapLanguage has done with their main website and what elements they have in their component library. The blog posts are shown in cards in 2 different states with 2 versions for each. We made sure to stay within the conventions of blogs.
Components
While we had the components from SwapLanguage’s design system, we wanted to build more. I had the idea of having a quiz or a poll at the end of each blog post to encourage user interaction, so using their components as a base, I built the quiz/poll component. The component has 3 variants: true-or-false, 3-options and poll; it was built by layering components inside of each other.
