Leaders & Best
Overview
REMOTE INTERNSHIP
Website for the digital version of University of Michigan's print publication Leaders & Best
In the summer of 2020, I interned with the Marketing and Communications (MarCom) team at the Office of University Development, University of Michigan as a UX Designer and Web Developer. During my time there, one of the projects I worked on was creating a website from scratch for UM's print magazine- Leaders & Best. I was originally hired as a UX Designer, but as the work and projects progressed and given my computer science background, I worked on 2 projects as a Web Developer as well.
Leaders & Best (L&B) has long been used to publish stories relating to the university- its students, faculty and leadership, and to present funding opportunities to donors.
The main aim for this project was to convert this physical media to digital mainly due to Covid-19 and to take this opportunity increase funding and directing donors directly to the funding platform.
Role & Responsibilities:
UX Designer
WordPress Developer
UI Design
Tools:
WordPress, Figma
Duration:
2 months, 2020
Team:
Project Manager
2 Graphic Designers
2 Writers
Me - UX Designer, Web Developer
PROJECT
"Design and develop a website that successfully delivers a publication experience and presents funding opportunities to increase readership and funding."
Overall Process
Since we already had an end goal for this project- a website, we did not have to come up with a solution in terms of the main product, rather we had to come up with the best way to present information, the features, the navigation and incorporate user needs.
1
Define Design Develop Deliver
The aim of the project originally started out as just converting the physical magazine into a website. After a few meetings and realizing the potential of this change, increasing the readership and funding through L&B became the project's main aim.
Research
The research for this project was focused around the readers, funders and the people & organizations whose stories and presented through L&B.
After a few meetings with the team and stakeholders, I carried out interviews to understand:
-
What readers like and dislike about publishing websites.
-
What motivated people to provide funding?
-
How funders want "Giving Opportunities" presented to them to make the Giving process easy and efficient?
-
How people & organizations want the world to see and feel their story?
"A website that focuses on publishing to clearly highlight the stories and articles rather than the "extra features" and advertisements. The more linear navigation like a magazine, the better."
Ashley Lynn
UM Student
"Nobody wants to do something willingly if it is a hassle, specially if it is not for themselves. You don't want to or have the time to go looking for opportunities. It should be right there."
Name Undisclosed
Regular UM Funder
"When someone reads my story, I want to them to understand me and understand why this particular thing is so important. I want my story to read partial yet powerful."
Carmelita Perrien
UM Student
After my research, I wanted user experience of the website to adhere to the findings:
1
Make the stories the hero. The stories are the design. The stories are the experience.
2
Simple, Simple, Simple.
3
Highlight "Giving Opportunities", make them stand out.
4
Reads like a magazine, not news. Present stories in an unbiased, compelling manner. - I conveyed this and to the writing team, as this fell mainly under their domain. I worked with make to put best version of their vision on the website.
I also researched other websites with similar goals and audience to get a better sense of the market and most preferred solutions. Some of these were Harvard Magazine, Notre Dame Magazine, Red Cross, etc.
2
Define Design Develop Deliver
For the design of this project, I aimed to follow the principle "Less is more".
User Flow
The first step in the design process was creating the user flow that acts like a sitemap. For a website, I find it particularly helpful to create a sitemap before the wireframes to finalize and get a good feel the navigation, which can be easily updated later, if required.
Wireframes
Based on the research findings and the navigation from the sitemap, I created the wireframes using Figma.
Click to enlarge.
Branding
The branding for this project was supposed to follow the usual University of Michigan branding guidelines.
TYPEFACE
The typefaces used were IBM Plex Serif for the headings and subheadings, Oswald for a few headings and subheadings and finally Nunito Sans for body text, according to the Michigan branding guidelines.
COLORS
The color palette of the website was based on the university's brand colors Maize & Blue.
LOGO
The logo and the favicon of the website were decided to be kept the same as previous print versions to maintain a sense of uniformity and familiarity. Since it uses the basic UM branding, it fit in perfectly with the website.
3
Define Design Develop Deliver
The website was developed using WordPress and Elementor.
Website Development
The first step in the development process was to set a WordPress sandbox. The site was later shifted to main domain. I created the basic structure of the website based on the sitemap - created the navigation, header menu bar, footer and the required pages.
I kept the header navigation bar simple and straight forward. Nothing too fancy and distracting. Logo on the left and a right aligned menu bar.
Based on the research findings, I added a GIVE NOW button in the menu bar. This would direct users directly to the University of Michigans funding page in new window.
The footer was designed to mainly carry basic University information and links like most UM websites. The University logo on the left hand side, links on the right and legal text at the very bottom.
I made use of Elementor to set up the basic page structure. To make it easier for the team to use the website and collaborate, I made the page layouts exactly the same as the wireframes. It helped in giving the graphic designers and the writers a better sense of what they need to work with in terms of creating content.
UI Development
As the writers and graphic designers worked on the material to populate the website with, I worked on creating a functioning UI. I added the basic university branding - fonts and colors.
Header
Footer
I changed the design of the footer form the original wireframes. The new design had 4 widgets on the top part, containing logo, social media links, office address & major links, and bottom half contains the legal text.
Final Website Testing
HEURISTIC EVALUATION & USABILITY TESTING
After getting approval for all the material provided by the graphic designers and writer, I pushed them to the website. I then carried out a basic testing of the website within the team using Heuristic Evaluation method. I set up some basic parameters and asked the team to evaluate, rate and comment on those points.
The result of the evaluation showed that most people were satisfied by the look and basic functioning of the website. Some people had the issue of the header logo not rendering and few people had some difficulty figuring out the buttons and links.
The Usability Testing was carried out by a Usability expert and I used Wave and AXE for general issues.
After analyzing the result of the evaluation and usability testing and making appropriate changes, the website was sent for approval. Soon after the website got approved, after a little back-and-forth, it was time to shift it to its main domain and make it live!
Final Design
My goal was to create a clean and minimal feel. The final design was changed only a little from the original wireframes, which honestly almost never happens!
Here is the look at the final website -
HOMEPAGE
The homepage contains the cover story, A Little Girl's Big Legacy, right at the top as a big banner style and the rest of the stories follow as the user scrolls further down.
As you can see, the GIVE NOW button is clearly highlighted and draws attention, achieving the goal of making giving opportunities easily accessible.
At the very bottom of the homepage, the website visitor can again find the GIVE TODAY button. This was to draw the reader's attention back to the funding opportunities. The button is companied by a small message that adds a warm human touch, urging people to donate.
STORY PAGES
The pages containing the different articles and stories start off with a graphic or image related to the story as the main banner.
The design of the page gives strong emphasis on both the text and imagery. Since this is a magazine, the graphics and images play a vital part in portraying the story.
At the end of each story, there is an option to share it using any of the social icons. This feature was added as an effort to increase readership and on later analysis it was found that a whopping 33% readers shared the stories using this feature!
Further below, the website visitor can again find a GIVE TODAY button. This time, the button leads to the specific funds relating to each individual story.
Reflection
The year 2020 was like no other. Covid closed a lot of opportunities I had planned, but this opportunity was unexpected but turned out to be a great experience.
This was my first time working on a publishing magazine project. It was not something that I had thought of before, but I really enjoyed the process of creating a magazine issue. The most fun part for me was working with the graphic designer and writer. Trying to understand how they want to portray a story and working with them to make their vision come true, was really rewarding.
The project was really well received by the President of Development and higher ups at the University and the 3 month analyses report showed that readership went up by 40% and donations by 13%.
Through this project, I learned to collaborate within a very big team that consists of not just other designers, but executive directors, creative directors and project managers. At the same time, I learned when to make decisions on my own and when I should ask. This helped me feel a lot more confident with my skills and presenting my work.
I was offered to continue work with the Office of University Development as UX Designer and Developer over the fall, which I happily accepted! Here is another, similar, project that I worked on during the fall - MIP