I joined the BMPD Storyteller team to help create the vehicle for sharing stories. I was tasked with the initial design of the website and providing visual ideas to aid in storytelling. Over two months, I worked hand-in-hand with Professor Katie Graham, Jada Rodgers, and Max Peacock to conceptualize the website and build its design system. During my time on the BMPD Storyteller team, I brought the design to the forefront of product and team decisions. In this story, I will introduce the design process and my future ideas for this project.

Prototyping and sketching are important in user-centered design. Such prototyping can significantly reduce development time by confirming the design in advance, and in turn allows us to conduct extensive user testing to obtain comprehensive feedback. I created the initial sketch in Figma on the product side – a vector graphics editor and prototyping tool. Figma is a free and easy-to-use software for creating prototypes, which is available for both desktop and mobile.

Prof. Katie provided her envision of the website layout at the beginning of the project. Based on this, I made some modifications and structural adjustments based on the sketches. As the image shown below is the first version of my draft design for this project. All images and text used in the prototype drawings are from Carleton University and other accessible copyrighted sources on the Internet and remain the property of the original creator.

The initial version is as simple and easy to use as possible. I only used some primary colours: black, white and blue as the overall colour scheme of the website. Thus, it is efficient to improve the user’s efficiency. When choosing a website layout, I opted for a multiple page design over a scrolling one page one. Since the project will have different categories and growing content, a scrolling page would become too complex and difficult to navigate. Therefore, I set up the home page as an easily updatable aggregated information page, with secondary main pages for separate categories.

After creating the first design sketch in Figma, I shared the prototype with the rest of the storytelling team. Design review and feedback is an important part of all creative work and it is important to get it before too much time has been spent designing the finished product. However, due to its news-style format, which makes our page look very collegiate. Based on the site’s overall tone, our team wanted the site to be more creative and not be limited by traditional content formats. Therefore, based on this, I reworked the overall visual scheme of the web page.

In the second version of the design, I added more creative elements, including some curious illustrations from absurd illustrations and a black and gold theme design, which symbolizes that the culture of BMPD Storyteller is diverse. As the project grows, I hope that Illustrations from other BMPD students can be incorporated into the design.

After finalizing the design in Figma, I began creating  the website in HTML using. WordPress and Divi, a visual page builder plug-in.  Although Divi allows for easy creation of responsive components in WordPress, it does create some unpredictable problems when adding custom CSS content. So when you use this plugin, remember to check both web side and mobile side display effects.

I don’t plan to only design the website where the BMPD storytellers will share their work. Stay tuned in the future for more creative endeavors – such as a visualization and guide of important BMPD tools and skills students of the program develop. Hope you enjoy it!:)

More Stories

© Copyright 2021. Carleton University School of Journalism and Communication. All rights reserved.