.png)
Expressing Brand through Storytelling & Design.
Web Design, Web Development
UX Designer, Web Developer
Northeastern University
6 weeks in July 2022
Figma, Miro, Squarespace
Enabling Engineering is a student organization that designs and builds low-cost devices to improve the lives of older adults, individuals with physical and cognitive disabilities, and the caregivers who assist them. The website serves as the face of Enabling Engineering where students, volunteers, mentors and donors would explore and learn more about the organization.
However, the website has not been updated in the past 6 years and therefore some of their content become outdated for the current audience. The goal of this project is to redesign and make the website more modern, easy to navigate, and display relevant information.
My first approach was interviewing the stakeholders of this project: the project manager, faculty advisor, and student management team member to understand their goals and pain points. Since it was first created in 2016, the organization has not updated their website and the organization finds it challenging to keep up with the new way of connecting with students, clients, and donors.
EE feels that there is a gap in communicating their missions, projects, and programs to their audience especially after the pandemic hits. Therefore, in order to strive in this new normal, the organization needs to be able to adapt and alter their strategy by advancing their digital and social presence.
The next step was to crawl all the pages on the site and then analyze them one by one. My focus was to take note of the content, visual look, and the backend (how the page is developed and structured in the CMS). Then, I also met with the stakeholders and 2 users to review those pages and take notes of their comments.
Lacking of balance between content and visual elements.
Majority of the content displayed in each page on the site relies heavily on text. The images are grouped in a gallery and so users will either only read text or scroll through photo gallery. Beyond that some of their images are old and in a low quality; while some of the content is outdated.
Complicated page and content structure.
There are too many items in the main navigation tab and it is lacking of organization; there is no clear flow of information and what to expect on each page. ln addition to that, the content is lacking of hierarchy and as a result of that, users found it hard to navigate and difficult to spot information they need.
There is no clear call to action.
The direct consequence of the poor structure, many users are having difficulties to take actions upon exploring this site. For example, there are 3 ways to connect with EE: join us, contact us, send email. The problem is, there is no difference between those 3 contact points and what purpose it serves. The site simply fails to speak to their audience.
%202.png)
Our team created a project plan and brand discovery documents to define the scope of the project. The team agreed to focus on: design, information architecture, and content when revamping the site. In addition to that, the brand discovery is a useful tool not only to understand the organizations’ vision and missions, but also to identify user groups with their goals and needs.
Project Showcase
Displaying students' projects through visualizing the final product and describing the process of developing it.
About the Organization
Telling a story about the organizations' vision, missions, and all the people who work behind it.
How to Join
Adding information about different ways for users to connect with the organization: donate, join, and contact.
Once we understand the business goal and users’ needs, the next steps are creating a sitemap and collecting all content. The goal of making a sitemap is to restructure the main navigation by simplifying the main navigation and organizing content based on a similar topic.
I first documented all the text and visual content, then I gave each content block a label. Using a very similar technique to card sorting, my next approach is to find the common theme and group those content together.
To make sure that the design is consistent throughout the site, I created a style guide that will govern the brand identity and overall look of the site.
%20%E2%80%A2%20Instagram%20photos%20and%20videos%202.png)
The final stage of this project is to develop the site in Squarespace. One of the main requirements from the management team is to maintain the back-end structure of the content in Squarespace. The team wants to make sure that they will still be able to update content in the site without having to learn a completely different framework.
Due to the need of creating this website in a new workspace, the final step of this project requires a technical domain migration from the old site. Site propagation usually takes between 48-72 hours to complete, so timing is very crucial to ensure a smooth transition.
This is the page which experienced the biggest transformation. In the beginning, information about the organizations are scattered in different pages at the long-listed navigation menu. Beyond that, the info is very text heavy and lacking of content structure which affects the findability of information.
Create sub-page
To solve the complex navigation, I divided the content into 3 categories: the organization, the facility, and the stakeholder. Our Organization page focus on capturing information about the vision, mission, and showcasing real projects to help users understand about what they do. Our Lab page is created to highlight the space, tools, and all machineries available at the lab facility. Lastly, Our Team display all the people who work and organization who partners with Enabling Engineering.
Balancing Text and Graphics
Implementing high-quality photos, color blocks, and backgroud image are the main strategy used in breaking down content into chunks. This way, users will be able to digest the information intuitively. Images are a great medium to tell stories beyond words, it is used to visualize the content and help deliver the message more effectively.
Font Hierarchy
In complementing the graphic elements, my strategy is introducing font hierarchy. I created a style guide to assist the consistency of the font size scale. Using different levels of typography help users to navigate through the content and give the user the options to sort it themselves. Therefore they don’t need to skim through the whole page to find what they need.
Projects page is the main attraction of this website, it showcases projects done by students from 2014 to date. In terms of content structure, there is not a lot of alteration.
Projects (2.1) are grouped by the year (2.1.1) and each project is assigned to a case study page (2.1.1.1). Projects page is developed using a Blog feature in Squarespace, this will make sure the consistency of the page layout and content organization. Beyond that, blog also allows to add multiple contributors who will have access in updating content.
Applying the same strategy developed in the previous pages, Donate is modified to be more interactive by adding images, font hierarchy, and design elements.
But the most important part is the introduction to the element of storytelling that allow the organization to communicate their needs respectfully. It starts of by explaining the needs and how donation sustain the organization. Followed by a section that explains the step-by-step process along with attaching the link to the donation site. The final section is a historical list of EE’s annual reports to promote openness and accountability to their sponsors and hence boost trustworthiness.
Implementing high-quality photos, color blocks, and backgroud image are the main strategy used in breaking down content into chunks. This way, users will be able to digest the information intuitively. Images are a great medium to tell stories beyond words, it is used to visualize the content and help deliver the message more effectively.
Finally, the contact page goal is to be informational and straightforward. We want the users to be able to know how they can contact the organization and where it is located. While the form is added to promote an instant call to action.