UX/UI case study of the Wordpress mobile app home screen.
Wordpress powers 30% of the internet and is used by more than 60 million websites. Being used by so many I felt that their mobile experience could be improved, so I decided to explore how to revamp the Wordpress app home screen. Hope you enjoy it.
Because of time constraints, I decided to focus on just revamping the home page and not the whole app. Without usage data or user interviews, I based my decisions on reviews of the app, benchmark of other similar apps, my own usage of Wordpress, my experience building products and also best practices.
To make the Wordpress app home screen a more easy and intuitive experience while creating a more modern user interface.
For this phase I decided to:
1. Identify possible pain points in the reviews of the Wordpress app.
2. Do a benchmark of the Wordpress app, the mobile browser site and also of competitors.
When I started reading reviews of the Wordpress mobile app, I noticed that a simplifying process would benefit the user. Below you can see some of the reviews I collected:
“It has steep learning curve but once you take your time and try to learn how it functions it’s pretty simple CMS plus there’s tutorials online in case you’re stuck”
“Wordpress is still clunky and more complicated than it needs to be”
“Please make on-boarding easier, how to setup and everything took me an hour to setup on website and then later 20 mins on mobile app”
When studying the current Wordpress app and the mobile site I felt that they are trying to offer the same experience as in desktop, which means lots of options and a structure that isn’t optimized for a mobile experience. Having the blog’s reader within the app takes the focus away from what I think users should come to the app; creating content and managing their sites.
While Medium home screen has a focus on consuming content created by others, Wordpress shows site management. When comparing both of them I felt that Medium had a cleaner look and I like that they have a dark mode.
After investigating thoroughly the Wordpress app, I identified what could be added to the revamped home screen and what changes on the structure could be done.
From here the users could access the most relevant information like recent stats, articles, activity and also having the most common actions, like switching sites and themes.
The reader feature of the Wordpress app could be separated to create a new app. That way, this app would focus on creating content and management of the sites.
I didn’t see necessary to have a tabs bar, the tabs on it could be perfectly integrated into the feed or combined to reduce the number of elements in the home screen.
Floating Action Button
The usage of a floating action button (FAB) for the main action which could be creating a blog post or page (depending on usage or settings), seemed a good idea and it would promote the creation of new content.
After this initial thought about the revamped structure, I worked on a sketch. On it, I draw the feed, didn’t include the tab bar and also I added the FAB on the bottom right.
After playing around with the elements that the home screen had to include, I felt it would be necessary to add the profile access also as a floating button, which we can see on the bottom left of the screen. This is the structure I decided to go with:
This widget is really important for users managing multiple sites. To be able to switch easily between those sites, having a slider would help to move from one to the other.
My supposition is that average users not may have more than 3 sites to manage, so that’s why a slider widget looks like a suitable solution instead of a sites list. In case there is only one site this widget would appear collapsed.
The sites widget also allows users to see their site settings and add new sites.
Here the user can access the more important data about the site, so they can be informed on performance but without getting overwhelmed with too much data. When tapping on it, it would open the stats page where more information can be consulted.
Comments, Pages, Posts and Media would have their access from here. The comments link could appear with a notification badge when someone has written a new comment, this behavior could apply to other links when necessary.
Switching between themes would also use the same type of widget as the site's widget has.
By having such an important placement in the page above all the elements and floating on the top bottom it promotes the creation of new content.
On the bottom left of the page, we find the access to the profile and settings, the notifications tab from the previous app would also be inside this section, as the profile button would display a notification badge when receiving important notifications.
Having a dark mode can help reduce eye fatigue especially at night, so it’s a nice addition to include on the app, besides I know of so many (myself included) that prefer to use dark mode to work.
Following Scott Hurff’s guidelines on how elements in an interface are accessible when holding smartphones in one hand, I checked my design to see how well it fitted:
After it, I decided to move the bottom action buttons closer to the center of the screen so the right action can be more easily accessed for right-handed and the left action for the left-handed.
When tapping on an option on the slider widget used by sites and themes, it would switch to that option. By tapping and holding, it will open the settings of that option. When scrolling the sites widget will collapse and stay floating on top of the screen, giving quick access to sites to easily change to another site.
Also, both the FAB and the Profile access button would be floating on the bottom of the screen.
I would like to test the concept with Wordpress users to see their reaction and discover if there’s too much friction compared to using the current app.
For now, I feel it was an interesting exercise of using a different structure and interface.
As I see it the major takeaway was to deliver a home that promotes the creation of new content while showing to the user the most relevant information for him as a feed.