BCAMA Website - Case Study
Web design, information architecture, project management
Project Description
The BC branch of the American Marketing Association was looking for a redesign to their current website, and a better way to highlight their main calls to action: subscribe to the newsletter, become a member, and register for events. As the project manager, I worked directly with the client and drove the creative vision for everything up to high fidelity wireframes for this client.
Initial Research
In this case, the American Marketing Association already has an established brand. Our goal was to find out what makes the BC branch of the association different, and how they can stand out to their users here in BC.
Findings
- Less formality is needed than their American counterpart.
- Other marketing associations don’t feel enough like a community. People don’t gather for events, or in general interact very much. Marketing specialists in BC need a
“home base.” - The balance of outdoors and beautiful cityscapes is what makes BC special to so many. We need a way to highlight this subtly in the new brand.
- BC is also a welcoming place for tourists, and cultures around the world. In the brand, we need to reflect this sense of community.
- Mobile is the main way people will be interacting with this site. We need a design that is mobile first.
Competition research, user persona,
and initial mood board ↧
↤ Competition research
User persona based on findings ↧
Initial moodboard for the client ↧
Gut tests
In this test, we prepared 10 examples of websites of varying styles, and our client gave us their immediate and then secondary reaction to each website. This allowed us to quickly narrow down the things our client liked and hated in other designs. The elements they liked best were used as inspiration for the
final design.
For example, in slide #8, they loved the cards popping over the hero image. We took a version of this that fit with their brand and incorporated it into our design.
We found these gut tests to be an incredibly helpful step in
our process.
Design
Using the existing site map provided to us by the client, we began organizing some information architecture.
Once done a few iterations of sketches. we took our design concepts from paper to
Adobe XD.
Our initial sketches vs the layout of final high fidelity wireframes ↧
Testing
At two stages in our design – mid fidelity, and then high fidelity, – our users tested prototypes of the website. Our user pool was comprised of marketers who have memberships at BCAMA, new users within the demographic categories we had laid out during the research phase, and important stakeholders such as owners of the organization and their web development team.
Due to covid, all testing was completed remotely. To accomplish this seamlessly despite not being face to face, we created a user testing script, and using Adobe XD links, had our users talk through what they were thinking and feeling while navigating to the three main calls-to-action on the site.
In the first round of testing with very basic wireframes, our users were able to complete all tasks, but many found issues with the navigation on the header and footer not being intuitive enough. Working with the client, we made some changes to the site layout for more straightforward navigation, and proved our changes were effective with a second round of testing.
During this second round, our users were easily able to complete all tasks, and they especially liked the fixed position on the subscribe button for each page. Interestingly, the high-fidelity prototype with images and colors also made the site easier to navigate since the user’s attention moved more quickly to important areas.
Biggest Challenge
Organizing more than 20 pages of content between desktop and mobile into a user-friendly layout to increase engagement and draw the target audience to main calls to action.
Final wireframes
Solution
Breaking the content down into relevant sections was key. Working on such a tight timeframe, it was also crucial that each section of work was given to a group member who felt it was their strong suit. Organizing tasks among the group was one of my main roles in this project, and we were able to succeed through these processes to deliver quality work on time for the client’s needs.
Other takeaways
This project gave me a unique take on what it’s like to be in a leadership role. There were times where I felt like my role was less in design, and more in facilitating group discussions, providing feedback to keep the team on the same page, and holding group members and clients accountable for tasks and deadlines. I found all these takeaways equally important as the work we were able to create.
Final wireframes
Thanks for reading!
Check out more of my projects below ↧