Immigrants of Distinction Awards Gala
IMMIGRANTS OF DISTINCTION AWARDS
A WEBSITE TO PROMOTE A CANADIAN IMMIGRANT REGOGNITION GALA
Project
Work with a real client, Immigrant Services Calgary (ISC), with their gala page for the Immigrant Distinction Awards (IDA) based out of Calgary, Canada.
Problem
Client wants to decrease unnecessary complexity in the user flow and provide a seamless experience for users.
Solution
Re-design the current Immigrants of Distinction website to provide individuals with:
Relevant information about the event.
An easy way to nominate an immigrant or refugee.
Simple steps to sponsor, purchase tickets, or give a donation.
Tools
Tasks: Lightning Demo, Personas, User Flows, Sketches, Wireframing, Usability Testing, Prototyping
Programs: Invision, Miro
My Role
UX Designer, UI Designer
Background
I had the opportunity to work with a three other UX/UI designers from Springboard’s program to apply our design skills to research, ideate, and re-design the product.
We met on a weekly basis as a team and also with our client via Zoom.
Research
Persona
After the affinity map was created and organized, 3 personas were created: Alec, Maya, and Leah where a short bio of their background, thrifting habits, struggles, and goals were listed:
Constraints
While Immigrants of Distinction had an existing website, our client expressed goals in smooth usability and visually appealing components. Our client uses Wordpress for their domain and Elementor for assistance in any further personalization. This provided a limitation since our design team was not allowed access to the Wordpress site and since our client did not have a specific developers team. While the limitations arose, we made it a key goal to design and prototype a website that had simple components that could be included to IDA’s limited domain platform and developers team.
Lightning Demo
To explore the client’s main concern, we conducted a lightning demo to research other websites who have similar processes and goals of Immigrants of Distinction.
Design Journey
Moodboard
Our team organized a moodboard to further inspire concepts that would be compatible with Immigrants of Distincition’s website and brand. Amongst doing so, we decide to tie in a color scheme that includes Maple and Shadow to match their main service Immigrants of Services Calgary.
Style Guide
For consistency throughout our design team and our client, we created a style guide that could be applied to the website. In this style guide we included components such as spacing guides, buttons, and icons.
Site Map
One of the key goals of the client was simplifying the usability of the website. Our client wanted to maximize simple usability for our wide age ranged users. With this being said, we organized a site map to categorize key pages and main navigation for users. This allowed a smooth transition into creating a more complex journey map.
Journey Map
In continuation of the site map, we created a journey map to further layout a simple flow for usability.
To view high quality version, please visit here.
Wireframes
Our team produced wireframes in consideration of keeping basic layouts to IDA’s current website as our client showed value in its original design and simple components. We modified elements that we found could significantly improve usability and visually appeal to users.
Prototype
High Fidelity Prototype
Once our wireframes were complete, we transitioned each page to a high fidelity mockup. Between the 4 individuals in our design team, we divided key pages to focus on while all inputting work and feedback on each page. My primary focus on behalf of our team was to construct the Nominations page and form. When completed with our mock-ups, we shared the screens with our client who expressed support in the visual appeals and simplicity of the screens.
To view our first interactive prototype, please visit here.
Usability Test & Reiteration
After finalizing our first prototype of Immigrants of Distinction and adding interactions, our design team decided to test the usability of the product. The key goals in doing so were to:
Analyze and highlight any key issues users may experience in user flow
Validate design choices and gather feedback
To view a full details of the tasks presented to the users, please visit here.
While all users were able to complete the usability test successfully, there were hesitations in actions and feedback that could improve their usability. The main issues were highlighted and organized below by priority along with the reiterated solution.
To view full and final prototype, please visit here.
Recap
Working with a team of fellow UX designers as well as a real life client has been extremely insightful. I was supported and motivated by great individuals who faced difficult challenges in this project all together. Some difficulties included time constraints, time differences, and constant brainstorming for our clients needs. These were resolved in great ways with consistent communication with my team and our client, weekly zoom meetings, and our team’s ability to make quick decisions under limited time. If more time was available, I hope to research and narrow down further needs of our clients by getting involved with more members of their team.