A story about Friendship, Passion and Product (Part 2)
This series is about the journey of two passionate students getting involved and creating something magnificent
Part 2 will illustrate my journey as the Product Specialist exploring ways to bring our idea to life.
Our goal was to provide students with a platform where they can share their knowledge whist also being able to connect with one another. We met mid summer to try to brainstorm what the new site could offer, and also figure out how we would fix the website’s navigation.
Before we could tackle the big changes we had to address the issue at hand… Our old Wordpress website.
This was going to be a long term project so we knew that we had to do it right so before we hit the art board and text editor we made google forms our best friend. Our first objective was to understand our target market. The survey we put together allowed us to learn what people used our current website for, how often they used it, what they thought about the features we were thinking of implementing, and etc. We were able to collect almost 100 responses which spanned with people from all years and programs. The response really helped us better understand what people were looking for on our website and also how interested they were in our new features. This allowed us to better prioritize certain features on our website which made a big impact on how we ended up setting up the UI.
Navigation
Now that we had a better understanding of what was most important we got straight to work. We started by tackling problems that our current site had, and navigation was the first one. Our wordpress site had a lot of choice overload. This really hindered the ability for students to explore the site to see what our student society had to offer therefore failing it’s primary purpose; to inform. The survey results we collected earlier came in super handy because they showed us what sections student’s considered most important of checked out most. Using this data we condensed the information our website had into 5 sections, allowing easy navigation while still containing all the information a student might need.
Within a lot of the pages, we noticed that a lot of the information provided really added no value to the site or to students. There were also many links that did not work which ended up just wasting space on the site. Another example of poor use of space was the amount of documents that were laid out throughout the “Resources” section. Within this page, there were numerous links leading to downloadable documents. After going through all them I realized that a lot of these files were either official documents that we were required to have on our site, or files that students would find useful. Understanding the importance of these documents we decide to split the Resources into 3 sub sections; Student Resources, Official Documents, and Discount Program.
We included a document viewer feature for the Student resources and Official documents pages, where users would be able to view any of the documents we offered, and if you need more information you would be able to download them as well. This was a huge upgrade from before where users would have to download each document on its own to view it which would waste a lot of time if the document they download was not the one they are looking for.
Website layout
With the core navigation of the website finalized it was my turn, as the designer to start developing some rough wireframes. I knew that I wanted to go with a triple panel type of layout, similar to what Twitter, LinkedIn and other newsfeed oriented platforms used. It would also be good, because everyone would be familiar with it so students using our site would find the navigation easy.
With that in mind I started doing research and analysing the layout, observing how it was normally used, how the elements were layed out, and what made this the best option for our platform.
I knew I wanted to keep the profile and any important call to actions on the left, because traditionally that is where most website’s put their’s. I decided that I would keep a calendar with upcoming events on the right. This made sense to do since our online learning website for Laurier did the same so our user’s definitely be familiar with a somewhat similar layout. This left the middle panel with the newsfeed. The newsfeed would contain all the upcoming events and event pictures which users would be able to filter through based on multiple options. The feed would also have articles written by Laurier students for Laurier students to read.
With a much better understanding of what I wanted the landing page to look like I put together some rough whiteboard wireframes and decided that this would be the best option.
I decided that having events/ posts in a card would be the best option, since it is widely used throughout many platforms. They would stand out from each other better, and people would be able to observe in more detail without being distracted by other posts. The right would just be an at-a-glance look of events happening that week. The left side took the most thinking, since this was where most of the features lay. I first made a simple layout for the side, but then I started adding more features. I knew I did not want too many features in the nav bar so I put all features that had to do with the profile on this side, easily accessible when needed. I also put event- related features like “Saved events” on the side because this profile card would only show up on this page for now so having these options on the side would be most convenient.
Sketch
With a layout in mind I putting together some rough but detailed wireframes. I knew which layout I liked most but just to test out sizing and UX feel I created wireframes for all my whiteboard sketches
Looking at these detailed wireframes I was able to better weigh out the pros and cons of each layout. I also kept the wireframes as simple as possible, avoiding colour and actual information. This allowed me to really focus just on the layout and nothing else. The first layout stuck out to me most beacuse it had a standard 3 grid layout, that a lot of social media sites already use. When making the 2nd layout I noticed how I had to really stretch the image placeholders (which I used a standard facebook cover size for) showing that it would create problems in the long run. Since a lot more space would be available for the newsfeed for the 2nd layout, I had to make the font size really big going past the typical font size on sites making it look unnatural. It made sense to continue with the 1st layout after laying everything out. Now that I knew I was sticking with this size, it was time for the fun stuff. Adding colour and bringing the site to life!
With a basic wireframe laid out I started looking over all the small details and thought about the impact it would have on the user and if it was adding value.
PAUSE: Taking a step back
When I started this project I was very new to UI/UX design so I was naturally not very familiar with the fundamentals of design thinking/ processes. I knew I wanted to improve on this skill because I was passionate about it so I reached out to some industry specialists to check out my project. Through a discussion panel about design I had met Ilia Larionov who was a UX lead at Shopify. I reached out to Ilia last summer to guide me on how I can break into the industry and he advised me to work on side projects and then write about them. I took his advice and started taking on projects. Once I had gotten a good amount of work done for this site, I decided to show him and get some feedback. Ilia is a really mellow and chill guy, but I saw past that I’m like 98.5% sure he was impressed. Being the mentor he is, Ilia told me a bunch of design principles to check out because he noticed a lot of consistency on my wireframes, and a lot of “eyeballing”; not having reasons behind some of my decisions. After taking his advice and learning more about design principles through medium articles, youtube video’s and forums I looked back at the site realized that there was a lot of changes to be made.
RESUME: A developer’s living hell
I was using any and every Lato variant on the site. I had 18 variants ranging from Hairline to Black Italic and I used almost all of them. Coming from a graphic design background I had more of a visual approach to the wireframes than technical. I was making Richard’s (developer from Part 1) life a living hell not following a strict guide.
Font sizing was inconsistent as well with multiple sizes on every other page, even if it was for the same elements.
After realizing these things I made some major changes to the site making decisions more consistently, and viewing the wireframes from a developer’s perspective on top of a designer’s. This really taught me a lot about product management, and prioritizing usability before anything else. I was not only helping the developers but also allowing the user’s to familiarize themselves with important elements that reoccur on the site.
Product Vision
After acquiring this new superpower of a vision, I viewed decisions a lot differently. I naturally stumbled across product management and it was amazing.
I was pursuing a business degree at school and I was a self-taught designer with a huge passion for it and now I was slowly developing a more tech related perspective. This really allowed me to understand the product better and make the best decisions going forward.
With this new super power I continued making changes to the site. I started nitpicking a lot of small details I was not happy with on the site and decided to change them up. Here are some of the small changes I made on the wireframe that really added value to the site.
- For a start I was not a fan of the contrast the navigation bar was having with the rest of the site. It looked really plain and it did a poor job visually
- The icons I had on the right in the profile tab were not laid out properly. Each icon would be a button, with the first one leading saved posts, the second to coffee requests (a feature still in the works) and the last to what you have in your shopping cart. 2/3 of them were completely irrelevant to the page so I decided to remove them and the saved events one I displayed in a better laid out way
- Since I was building this platform for my school’s students’ society I had to follow the brand guides they set. This meant that I had to use a font that was not made specifically for the web. When I first made the
- This platform being for my university’s students’ society had a pre-set brand guide that had to follow. The font “Calluna-Sans” was the official font for our brand and when I made my first wireframe I used this but did not like the look of it. I wanted a modern look to our site and this font was not doing it justice. Calluna-sans was chosen before because it was a good font when it came to graphics for promotions, but it was not very web friendly. Due to this, I decided to switch over to using Lato. I was familiar with Lato, I knew it was used all across the internet, and it brought in the modern look I was looking for. I also wanted to change up our colour palette to something a bit less dense, and more vibrant/ flat as well but I was not given the permission to so I made the best out of the colour palette I had.
- I also reached out to Travis Hines, another specialist in the industry who gave some amazing insight. He advised me to keep the website fold (First part of site people see) as clean as possible. The filter’s I had at the bottom of the profile made the side look crowded and caused confusion for user’s being in that location. It was also hard to navigate with it getting longer and longer when you expand one filter. Travis advised to move it to the top above the newsfeed where it was more relevant. Now the filter would be accessible right above the newsfeed it controlled, and selected tags would go right underneath the filter, so people can select/unselect them.
After making all these changes, I was super proud of what I had created.
Slowly I kept making changes and followed a similar template to create the rest of the site’s pages. I re-created all the old pages on the site so that I could not only improve on my design skills, but make this new site look the best that it can be. With all the wireframes finally finished, it was Richard’s turn to bring the site to life. We both grinded out with the goal to release the best MVP we could produce.
After 7 months of work put in, and an all-nighter making sure the site was presentable the day before launch, we finally released the platform on January 10th to everyone. We had a huge launch party with lot’s of free food, and show cased what we had made. This site was made my students, and being students ourselves we were still blown away by the amount of feedback that we got that we did not even realize before.
Our team is still continuing to work on this project, and as for Rich and I, we’re in it for the long run so we are already working on what is next. If you want to check out our MVP you can see it here (If you’re on a phone, we promise we will make it mobile friendly soon).
Thanks for reading this far, it really means a lot to me. This was a project I voluntarily took on because I wanted to learn more about web design, and I was able to learn more than just that. This is only the beginning and I hope I can continue learning more from working on projects just like this one and become the best product designer or manager I can be.