mobile v. desktop site comparison

I noticed that one of the stakeholders that I work with was viewing website updates that I was doing solely from his phone. This normally wouldn’t be a problem, but I he mentioned that he couldn’t see some of the navigation. I checked the desktop version and sure enough it was there. What did he mean?

Out of curiosity I checked the newly created page on my phone and found the issue. The mobile version was nesting the side bar navigation at the bottom on the page in a blue dropdown and it wasn’t very clear.

“Oh, great,” I thought, as I wondered what the rest of the website looked like on mobile.

I scrolled through a lot of pages and found similar issues. Photos weren’t positioned correctly. Components were bumping into one another. Gradients looked great on desktop, but terrible on mobile. Some components weren’t even responsive at all.

To start to remedy this, I went to my UX Team and created a Miro board of all of the pages I could find and took side-by-side screenshots of the mobile site versus the desktop site.

I used sticky notes in Miro to indicate each of the issues on the pages, and used their arrow feature to point to certain problem areas. This felt so easy and seamless.

Since I thought the mobile page flow could be improved, I created low-fidelity wireframes to show an improvement to the existing design. I also found an external resource with color blocks highlighting the areas of the page that should be seen in a certain order from the mobile view.

To give the stakeholders reviewing it some context, I wrote a small blurb on what the issues were.

I also wanted to give some context to how other mobile websites look in higher education, especially for specific departments. I chose the university communications department from each school, and took screenshots from my phone to show their set up.

I noticed they used simpler icons. The didn’t have removed “menu” and “search” and only had the icons. They centered the school logo which I think looks much better for branding purposes. The department name was clearly indicated, and not all the way at the top like how it is on our mobile site.

I also included a short description to indicate what I liked about these sites so that if I were to share this whiteboard anyone reading it would understand my thought process.

Lastly, I added two columns. One for JIRA tickets in case these were going through some user acceptance testing that I was not aware of with IT. The other for the Sitecore component type indicated by name. I think there could be more text added below those boxes, as well, if you wanted to discuss the current behaviors of the component and how you could fix it.

Overall, I hope some of these Miro boards can inspire you with showing your thought process. I’ve been learning day by day how to use different templates, workflows, and how people use these digital whiteboards by watching a few minutes of Miro videos on YouTube each week. I figure learning a few minutes each week and then trying to share and explain is the best way for me to learn new skills, as well as help my team.

🍦 What I’m Eating: Noona’s Black Sesame ice cream

🎧 What I’m Listening to: Blank Banshee (2012) by Blank Banshee; Old Japanese City Pop playlist on Spotify; Haunted (2004) by Poe

📚 What I’m Reading: It (1986) by Stephen King