MPowered Entrepreneurship is a student organization at the University of Michigan. They run several initiatives throughout the year to promote career building and entrepreneurial spirit at U of M. Each year, they hold about 4-6 events, such as career fairs, hackathon-style competitions, or workshops. This is a case study for the redesign of their current website.
I took on this project as their Creative Director. In addition to this project, I led a team that focuses on the branding of the organization and the creation of all event collateral, including posters, signage, swag, fliers, presentations, and digital/social media images. My goal in redesigning the website was to leave behind a system for future creative and tech directors, in the same way we’ve created a system to carry out the brand. See brand guidelines here.
Most of the research was done during the academic year, where I worked with my team of 3 designers to identify pain points and talk with the rest of the organization and potential users. The wireframing and redesign was completed post-graduation, where I continued to develop our findings as a way to teach myself about the UI process.
Analysis of Existing Site
My team and I walked through the website as it exists and noted all style inconsistencies, functionality issues, and areas of confusion that we could find. We had several people that hadn’t used the website try to carry out specific actions so we could observe what was and wasn’t working.
Identifying the Problems
While styling was outdated and inconsistent, and we had minor issues with functionality, we found the biggest problem was that people outside the organization didn’t know what MPowered actually did and the website didn’t make it any clearer.
White board session held with all executive and project directors
We met with the executive directors and project directors to get internal feedback and to see what problems they ran into when interacting with the site. The main problems we heard from them were:
The homepage doesn’t account for new content being produced (blogs, podcasts, etc.)
Teams can’t easily make text changes to their site without submitting requests, which sometimes takes too long if they are close to an event deadline.
We defined two main personas for the people that are most likely coming to the website.
From there we determined the main reasons people visit the website, and what actions they hope to complete. Due to the nature of the organization, organic traffic is rare. The site is most used during events or at the beginning of semesters when new members are applying. The main actions are as follows:
To learn about MPowered
To register, sponsor, or learn about an upcoming event
Define a Mission Statement and one sentence simple explanation of what MPowered is.
Determine the hierarchy of information
Create a solution for showcasing content and updates
Improve brand consistency throughout by creating a design system that can be applied whenever updates are made.
Below are just a few of the websites we found as inspiration. We looked for specific features, such as large, mission focused hero banners, content feeds, and company or product grids.
We met with the Executive board to help them define a mission statement. We also sent surveys to every MPowered member, asking them to tell us what they thought MPowered was in as few words as possible. We created the following visual as a way to see what words stood out, and began to formulate statements.
We pulled out the 10 most common words aside from the names MPowered, and University of Michigan.
MPowered Entrepreneurship encourages creativity, innovation, and leadership through student-led projects and initiatives.
After clarifying the statement, I needed to determine a hierarchy for the remaining information on our site. We didn't want visitors to be overwhelmed or confused. Based on the personas we created. We worked through several scenarios of why people would be on the website. We determined that they would be looking for information about us, looking for a specific event, or trying to contact us. Internally, it was voiced that we want to drive people to our blogs and media channels so that we can promote them and have a larger media presence.
From this information, I built a detailed sitemap to visualize what information should be accessible from the homepage and how it should be organized, with minimal thought to the visual layout.
Sitemap - Organizing Information
A/B Feature Testing
We used A/B testing to get an idea of what features would be most effective for different information. The areas we focused on were displaying the project teams, the contact page, and what to do with the full team headshots. To test these, we created a powerpoint that had each option on a different slide. We had a group of about 20 students and asked them to look at both for a few seconds, and then raise their hand for what they preferred. After voting, we asked a few people to explain why they chose what they did. We kept the design simple, enough to look like a website but not enough to be a distraction.
Test 1: Projects
We wanted to test whether these should be displayed visually somewhere on the homepage, or whether having a dropdown menu in the navigation would suffice.
Outcome: The visual grid was an almost unanimous winner. The group felt that they would rather see them on the home page than have to find them in a tab. They also felt that if they didn't know what projects were, the dropdown menu didn't give enough context.
Test 2: Contact
Here, we wanted to test the number of options that users are given when contacting us. On the old website, there was one contact email and the exec board would have to go through and figure out if the email was or wasn't real, if it was intended for a specific team, and whether it needed to be forwarded to someone else.
Outcome: While this was closer, the majority leaned towards multiple options. This did spark
a discussion as to whether there should be a form, or how many options were actually necessary. One concern was that now all teams could receive junk mail. Our solution was to not list the names but to provide form options for the reason you're contacting MPowered.
Test 3: Team Headshots
On the old site, they had a large photo grid of headshots. These are supposed to link to LinkedIn, but not all of them do. They also fail to differentiate who is on what project, or who the directors are. We felt that this took up too much space for how useful it was. We proposed a fixed version that would be similar, but would give more information when hovered over. The second option was to take a group shot (maybe more professional than the one shown, by maybe not) and have each person "tagged" so when you hovered over their face, you'd see their name and position.
Outcome: The group voted for the grid, but led us to discuss the necessity of the photos. One common suggestion was to leave the exec board's headshots, and move all other project directors to their team pages. Due to the turnover rate in directors (yearly, and sometimes by semester) we also felt that the upkeep of this section might fail. Our final decision was to leave these off, but design the style for teams to add them to their individual pages if they wish.
Sketching and Wireframes
Based on the sitemap, I began to create basic wireframes to quickly iterate on different layouts to show the information in an effective way. Below are my initial wireframes of the main page and a more detailed iteration that began to consider features and style.
Wireframe used to determine layout
Detailed Wireframe to determine design - Starting to enter information and add text.
Below are the final visual mockups.
Next, I'd like to get feedback on these designs from a wider audience, and allow the team to replace the filler content I've left. I'd also like to build out a template for the team pages that allows for variation depending on each team's needs. I also feel that developing a style guide and system would be useful for keeping the website looking as intended when changes need to be made.