A new home for Wordpress

UX/UI case study of the Wordpress mobile app home screen.

Why Wordpress?

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.

Goal

Research

Reviews

“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”

Benchmark

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.

From left to right: Wordpress iOS app, Wordpress on the mobile browser (safari) and the Medium iOS app

Structure

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.

Feed

Reader

Tabs bar

Floating Action Button

Initial Sketch

Initial sketch made with Tayasui Sketches on the iPad Pro

The Revamp

The home screen in light and dark mode

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:

Sites

Stats

Links

Themes

FAB

Profile

Dark Mode

Accessibility

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.

Interaction

Also, both the FAB and the Profile access button would be floating on the bottom of the screen.

Collapse when scrolling down and stay floating on top

Next Steps

Takeaways

Hopefully, you enjoyed this, if so you can take a look to my portfolio and my website.