Budding Writers
In collaboration with Kathleen Hung and Monika Soegianto
Project Type
eCommerce website
Timeline
Spring 2020
Tasks
UI/UX Design, User testing, WordPress development, Branding
BACKGROUND
Putting down new roots
In this project, we were assigned a fictitious company, which included a location and target audience. Through this, we were to work in teams of 3 to work through and present the complete process of building a website, from conceptualization to launch.
Goal
To showcase the brand Budding Writers and the services they offer. We were to utilize Elementor, WooCommerce, Yoast SEO and various plugins to create the site. The end-to-end process included a style guide, sitemap, content inventory, persona, task models, and user testing reports. We also had to consider responsiveness in our design.
EXPECTATIONS
Scope
The website needed to have the following functions and pages:
- Provide an overview of the business, it’s target audience, and ambience
- A menu page that showed various food and drink items
- An online bookstore, where customers could view and purchase books
- A login system for volunteers
- A calendar, or a list of, upcoming events
- A contact page with information on where the company is located and how to reach out for volunteering and events
- A way to allow users to subscribe to a weekly newsletter
Initial research
After defining our target market, the team and I set out to work on creating personas and task models. The personas provided us a representation of users who may use our services, and what kind of goals they want to achieve by visiting the site.
The task model helped us empathize with our user. It showed us what kind of frustrations they may run into our site, and what our desired positive feedback would be. It provided us a goal to work towards when it came to accessibility.
User Personas
Task Models
SITE ORGANIZATION
Building the foundations
At this point, we were ready to begin our information architecture to create the website. First, we started with a sitemap to show all possible routes a user could take from each page. After, we compiled a content inventory. This provided us more details about each page, a written description of what page should look like, where they are linked to and from, and what possible interactions can happen on each page. The content inventory also helped us keep track of who was responsible for creating which page and the status of each page.
Sitemap
Content Inventory
BRANDING AND IMAGE
A look for a blooming brand
When creating the colours for Budding Writers, we chose two contrasting colours. The duality of dark blue-purple and gold gave allowed the website to encompass two main audiences. On one hand, you have customers who want to grab coffee, sit down, and enjoy reading a book. In contrast, you have other creatives who may want to engage with the community, and attend events to learn more about writing.
Style Guide
UI DESIGN
Development starts
After our branding and information architecture was complete, it was time to build the site. Together with the team members, each of us were assigned different pages to complete. I was tasked to set up the online store. Using the WooCommerce plugin, I was able to set up a simple browsing and purchasing system, as well as individual book pages for more book details.
Website Pages
UX DESIGN
User testing and feedback
After our first version of the site was live, we were to start the user testing process to find any shortcomings to our design or accessibility issues. The team was able to user test individuals live in a desktop environment and observed the actions they took to access different sections of the site. We asked them various questions about the site, including their expectations, likes and dislikes. We also presented user testers scenarios to observe paths they took to complete the objective. These were later compiled into a report.
Based on the observations and the feedback we received from our testers:
- The site needed more levels of organization and additional features to make it cohesive.
- Access for volunteers needed to be visible and accessible.
- More graphics to showcase the brand identity and values.
From this feedback, we moved the gallery from the About page to it’s own page, gave each of the menus their own page, added a page for volunteers to contact the business, and added business details to the footer of the site.
Additional Pages
REFLECTION
A budding moment
Creating a brand identity and website for a business from start to finish was extremely fun. I am so happy I got to work with such a great team.
This was our first time performing user testing, and it was an eye-opening experience. I learned lots about how to create quality questions to observe the way others access and explore websites. This goes to show that our initial ideas and iterations aren’t always the best ones, and there is always room for improvement.