Impactrio is a Toronto-based management consulting firm founded in 2015 run by a small team. They provide coaching, training, consulting and virtual CIO services to social enterprises and non-profits. They help organizations design, evaluate and communicate their impacts.
The founder of Impactrio, Ashraful came to us with a need to have more online presence and prepared for the pandemic challenges. His current marketing channels include LinkedIn, Meet-up and in-person. He doesn't have enough online-presence, and his old website doesn't have complete content. He wants to get the projects that are desirable (complex projects). To get a complex project that he wants, he needs to establish himself as an authority in the market. He believed that having a blog or other material that supports his expertise in the marketplace can achieve this goal.
Employer
Invest Ottawa
DMS Future Proof Program
Type
In-House | Agile Team
Tools
Paper | Pencil | Figma |
Adobe XD
Role
UX/UI Designer
Services
Research | Design
Timeframe
3 Weeks
(Sep 21, 2020 to Oct 9, 2020)
Agile Teamwork
This is the first project I had at Invest Ottawa as a UX/UI design intern. This project improved my skills of prototyping with Figma and collaboration in a multi-disciplinary environment.
I worked as the UX/UI Designer in a ten-people multi-disciplinary digital transformation group at Invest Ottawa's DMS (Digital Main Street) Future Proof Program. It has UX/UI designers, graphic designers, web developers, copywriters, and digital marketers. I was the only UX/UI designer for the first two weeks.
My work included research (product audit, company research, user research, competitor research), wireframing, prototyping for this project. The process and methodologies I used were based on the UXD process I learned at the college.
At teamwork, I liked to receive feedback from different specialists, which kept us aligned and helped me see things from different perspectives. Throughout the project, I communicated with developers about the feasibility of the design to avoid technical issues and asked for the graphic designer's opinions on the application of style guides.
UXD Process
In the first week, I obtained the necessary information about his business and outlined the project's goal and tasks. In the website audit, the site map and current issues were also taken down.
The next step is user research. His business target audience includes Social Impact Facilitators (Universities, Co-working spaces, etc.), Social Innovation Sector (non-profits, charities, Government, etc.) and Social Finance Sector (Foundations, Impact Investors, Government, etc.), so I built three hypothetical personas to represent each audience group and used mind maps to analyze users' possible behaviours and personalities that might affect design decisions. To finish these personas, I researched many websites of social enterprise, government departments and non-profits to collect the possible traits and needs of the executives.
User Research Report
Thanks to our graphic designers who researched competitor websites in their free time, they provided me with a report about those designs. Later I took a deeper look and wrote a document that mainly focused on their disadvantages (mistakes we should avoid).
With the results of company/product research, user research and competitor research, now I had a solid foundation to start building the new layout of the website.
Since I had set 5 goals at the beginning of this internship, I challenged myself by learning Figma in this project and setting higher quality standards. I planned to provide two layout options with the clients. Firstly it is because that I didn't have much confidence in the first design for consulting industry. Secondly, more brainstorms usually lead to a better solution.
I used digital sticky notes to brainstorm contents and organize them into sitemaps on Figma. For reference, I looked at the client's version of the site map. I mainly reorganized "who we are," "what we offer," into a more logical order.
The first site map preserved more of the original structure while a "case studies" page was created. For "home" page, the testimonials, collaborator list were added to build brand credibility. Call-to-actions were also added to most pages to promote user action. For services, I organized the contents into "who," "how," "what" to help users understand them progressively. For "blog," a subscription section was added to build a mail list.
Meanwhile, The second site map was an exploration of the first one. The team image was prioritized being the first section on "about us." Also, I noticed that "AMAs" was not significantly associated with blogs and many websites have a separate page for questions. So, an "AMAs" page was created.
In class, I learned to draw thumbnails and link them with lines to represent user flows. I used the same method here. To differentiate different user flows, I used different colors to indicate possible traces customers would follow. The function of user flow was to check if the site map was arranged in a logical order. So we didn't show it to our client.
We then visualized these site maps into low-fidelity prototypes to be reviewed by the client. I allocated this task to our developers to improve our efficiency after explaining the site maps and thumbnails to them.
low-Fidelity Prototype 1
low-Fidelity Prototype 2
The client gave me valuable feedback on what he liked or not on both designs; then, I redesigned a final version of low-fidelity prototype.
Through the building of high-fidelity prototypes, I became more collaborated with the whole team. Meanwhile, one new UX/UI designer joined my team in this stage; I quickly introduced her to this project and explained my design ideas. And we had a smooth collaboration and became good friends. When selecting the images for the high-fidelity prototype, I tried to choose practical ones that reflected the content and the brand mood. Unexpectedly, we had two style guides (it could be a mistake our graphic designers made). Fortunately, both style guides shared 90% content, and our schedule was a bit tight, so I didn't ask for a revision and just applied them flexibly. However, I realized it could be a problem for future development without a unified style reference.
Communication always pointed out inconspicuous issues. To have a good content SEO score, we should have at least 300 words on a page. Our copywriters wrote 5 short articles to explain the framework. But we should not make a web page too long to scroll through (unless we have anchor points) while maintaining a fair SEO score. Inspired by the pop-ups in the Team section, which keeps those content within page HTML, I suggested that we put articles into drop-down boxes so that users can click to read more. The other interesting lesson I learned was about color use. I used red and green from one style guide on the blog tags and call-to-action buttons because of their brightness. In one meeting, our graphic designers pointed out that red and green had a strong suggestion of "success" and "failure." So I discussed it with my team to adjust the color. To maintain branding consistency while distinguishing them from other items of the same kind, we chose a neutral but different color: black.
In the development stage, every time the developers finished a page, I would go to check it to ensure no mistakes and technical problems on the live site.
We successfully developed a brand-new website for our client on WordPress and he was delighted with the outcome.
I learned many things in the process: 1. the font size on the prototype can look quite big on the live site. It might be because the size of the presentation on Figma is smaller than the full-screen size. 2. I gained more knowledge about consulting industry and experience in designing this kind of website. 3. Some colors have strong indications (red and green); more care is necessary when used together. 4. The way to maximize the utilization of a multi-discipline team is to accept all people's feedback openly.