Designing and building a responsive website for Seven Mile, a nonprofit serving Detroit students.
Team
Solo Project
Timeline
Fall 2020, September 15th — November 3rd (7 weeks)
Skills
Information architecture, Sketching, High-fidelity prototyping, Web development
📌 Background
Problem Context
Seven Mile Music, Arts & Coding originally launched a new website in 2019, but quickly ran into several problems. The website was coded in React, which limited the number of people who can update it to our coding teachers proficient in front-end development. The website soon became out-of-date due to the barrier to entry and a lack of documentation about how to update it. It also lacked Seven Mile branding and colors, a clear path to donating, and information about joining.
Old website, with minimal colors or branding and coded in React.
In order to keep their website up-to-date and reach prospective donors and volunteers, Seven Mile needs a new website with streamlined information architecture, engaging visuals, and no-code web editing.
💻 Final product
Seven Mile Website Reimagined
View the full website at www.umsevenmile.org
📚 Research & Design
Understanding the User
A new website would need to serve two main user types: Seven Mile board members and interested website visitors.
Board member
Goal: Keep Seven Mile community informed and up-to-date about the org.
Problem: Doesn't know how to code and nobody knows how to update the website.
Interested visitor
Goal: Learn about Seven Mile and find out ways they can support.
Problem: Can't find information about donating or volunteering.
First, I focused on the interested visitor's goals through a website redesign. After designing a user-friendly website, I would return to implementing it in a way that satisfied the board member's needs.
Information Architecture
To better understand the user experience, I diagrammed the information architecture of the existing website page-by-page and with the content of each page. Afterward, I identified the key issues causing visitors frustration and addressed them in a new content map. (click images to view in full screen)
Old
❌ Donate button is hidden and tucked away.
❌ No information about how to join.
❌ Link to Coding branch page is broken.
New
✅ New pages for joining and donating to Seven Mile.
✅ Consistent content structure across each page.
✅ Streamlined navigation and header/footer content.
The new content map would become the blueprint of the new Seven Mile website, serving as a what-goes-where guide for the redesign moving forward.
Moodboard
To address the dull visuals of the existing website, I reviewed dozens of websites in the education and children's nonprofit space. I compiled some of my favorite uses of color, imagery, and layout in a moodboard.
The moodboard inspired ideas for how to put more life into the homepage, the about page, and the new donate page.
📝 Prototyping & implementation
Low-fidelity Sketching
In several sketches I envisioned redesigns for key pages on the website that benefited the most from an overhaul through sketches of web and mobile variants. I imagined ways to give wow factor to the homepage and drive visitors to the donate page. I also wanted to bring Seven Mile's mission, vision, and values to the forefront of the design.
Some of my ideas would change as I iterated in the prototyping stage. For instance, I dropped the hamburger menu in the mobile layout in favor of a simple navbar. However, many of the ideas I sketched would make it into the final website.
Style Guide
Before diving deep into prototyping, I developed a basic style guide to ensure consistency across the website.
High-fidelity Prototype
I designed a high-fidelity prototype in Figma that would represent the final website. Much of my effort went toward creating a personality-filled homepage, an impactful About Us, and developing content for the new Join and Donate pages.
Interactive Prototype: Click on the prototype and press "F" to view in fullscreen (desktop).
After some quick informal evaluation with friends to validate that they could find out how to join and donate, I moved on to website implementation and addressing the needs of Seven Mile board members.
Building in Webflow
Seven Mile needed a website designed with the freedom of HTML & CSS, but easily editable for non-developers. I opted to build the website in Webflow, a website builder and visualized HTML & CSS editor.
Webflow has two editing environments: the Designer and the Editor. The Designer is a powerful visualized code editor — it affords the freedom of building a website by hand with HTML & CSS, enabling me to replicate my prototype in full and adjust it for responsiveness. The Editor is a much more stripped-down version that only affords editing text and changing images, which is perfect for a Seven Mile board member's needs.
An early prototype of a step-by-step vertical test creation flow.
The desktop-optimized layout that better fit the needs of our users.
After developing the website, I wrote a brief guide to updating the website with a walkthrough of Webflow for Seven Mile to reference in the future so that the website may serve their needs for years to come.
🕑 Looking forward
Impact & Results
With the website newly launched in November 2020, I'll begin measuring the impact of this project. I set up Google Analytics for the new website to start collecting data about the website's usage. As for immediately measurable impact, the new website received a higher performance grade on Pingdom and maintains the same or faster load time across the site.
Old: "B" performance grade, 900ms load time
New: "A" performance grade, 600ms load time
One of the key ways I plan to track the website's success will be donations. The previous website earned relatively few donations, so I anticipate the new prominent call-to-action will drive more visitors to donate.
Reflection & Future Considerations
Seven Mile's website was my first full web development project (excluding this portfolio). Knowing that I would pass this off for future Seven Mile members to maintain rather than myself encouraged me to build the website in professional, readable, semantic code. It was also my first real-world end-to-end project from ideation to design to implementation.
I made a lot of tradeoffs in the design process to speed up the release of the website: Namely, I skipped formal evaluation and iteration. I also skipped wireframing, going straight from low-fidelity sketches to a high-fidelity prototype. Next steps to refine the project would be user testing to ensure the website meets the requirements for board members and visitors.