One of the core products since the beginning of the company had been living on a commercial theme for years and we all knew it needed to be re-designed.
As the number of users grew and technology evolved, we needed to update our magazine site to serve our users better as things started to break, especially on mobile devices.
Old design on commercial theme
We were still a small team and I was the only designer on the team without much data to work with for the new design.
Since we didn’t have much data to start with, we spent a lot of time researching and studying not just competitors but any other news, magazine, blog, and e-commerce sites and apps that we could think of.
Identify the problems
It was quick and easy to establish the site with a commercial theme but it came with the cost. We identified multiple problems we would like to address in the new design.
- Loaded very slowly with all the libraries from the commercial theme
- Not optimized for the actual content with all the pre-defined ad spots from the commercial theme
- Not easy to navigate
- Not easy to engage with content with all the layout breakages
- Unknown elements loading on the page
We started the process with a brainstorming session. We sat down together in the room and went over all the sites and apps we found. After putting all of them together in a document, we found the direction we wanted to take for our new magazine site while keeping business goals in mind.
We studied bunch of other websites and apps to get
- Easy to use navigation
- Good legibility for the articles
- Better user engagement with content
- Better conversion
We ended up with a giant document with a bunch of screenshots from the research and the direction we wanted to head in with the wireframe.
Based on the brainstorming, I came up with a couple quick wireframe. Since we narrowed down the direction at the brainstorming stage, it didn’t take that long to come up with a couple wireframes that we want to start from.
I started design mockups from the finalized wireframes. I worked with the art team who’s in charge of all our physical products such as box design and printing materials to make sure that we have the design consistency and brand identity on the new magazine design. Also, followed the styleguide that we had been using to build main site.
We went thought multiple meeting to adjust and improve design mockups to the point that we all agreed it was ready to go to development.
Pixel perfect mockups and prototype
After we agreed on the design, I went over the all the mockups again and made them pixel perfect mockups for developers. Then I created prototypes to show main user flow and how the UI would interact.
I created 2 prototypes in InVision and HTML pages for the team and developers to understand how the new design would work and look.
InVision prototype shows the user flow and Inspect mode view for developers to code the pages.
HTML prototype shows the UI interactions and animation/transition.
Work with a developer
There were no developers involved in the process until this point. We had the design mockups, original Sketch file, and 2 prototypes that would explain how the new design would work and look. It actually didn’t take long for the developer to understand how things will work all together in the new design.
I worked very closely with the developer to make sure that all of design and UI interactions were implemented correctly into the new site. I had the developer convert the design mockups to the plain HTML pages first to make sure that all the pixels & UI interactions are translated properly. Then I had the developer convert HTML pages to the actual dynamic webpages.
Launch & follow up
The new design was launched on Oct 17, 2017. We have been communicating with users and keeping an eye on data to improve user experience and polishing the details.
Since implementing the new site, we’ve:
- increased users by 32.35%
- increased page views by 45.59%
- increase avg time on page by 9.14%
- reduced bounce rate by 2.30%
- reduced page load time by 34.39%