Central Station
Summary
Team: You Jin Lee, Mimi Shalf
Role: Product Designer, later Lead Product Designer
Deliverables: High Fidelity Prototypes, Design System
You Jin, Mimi, and I were faced with two main problems:
Ubiquity Press’ products are spaced out over a variety of platforms, and customers often didn’t know where to go for what, and
Within UP products, back-end settings are confusing to users, and they often need UP developer help for simple changes.
I worked alongside them to create Central Station — a one-stop-shop for Ubiquity Press’ customers and clients to manage all of their publishing services, from the initial set up a journal to tracking the articles in production. Later, after they ended their time at Ubiquity Press, I conducted testing on the product and incorporated final insights.
Product Context
The main predecessor to Central Station was Jura, a platform which UP administrators and customers used to set up and manage their journals and presses. We were tasked with not only redesigning the platform as it exists now, but also consolidating different product offerings into it and reimagining key flows for all the different types of users that would interface with it — 19 user roles in total. Below, you can see a few key issues with Jura from a usability perspective that guided our work moving forward.
Additional Requirements
In addition to providing a place for our customers’ journals and presses to go and maintain their services, we also had to include a way for presses to customize their own websites, for article production team members to perform their duties, and for administrators to access data in the backend. Many of these features builded upon Jura’s original purpose, so it required us to expand our understanding of the user flow. See below for a glimpse at the typesetting interface as it existed in Jura.
Research Summary
I joined the project after it had already started, so I didn’t take part in user research interviews. Here’s a summary of what You Jin and Mimi learned and the insights that guided our design work:
There's a high learning curve to getting familiar with Jura & related platforms, and users don't have to enter them often enough to get over that curve. Thus, the user interface remains unintuitive & unfamiliar.
It's frustrating for users to have to contact a developer at Ubiquity Press to implement a change they would like made. Users want to change their settings easily and be confident it will be executed correctly.
Above all, users seem to want clarity. Jura was an unwelcoming place, where nobody was really sure if they were in the right place or doing the right thing. Clear navigation and confirmation are top priorities.
Problem Scoping & HMWs
Getting started on the project, we spent some time to figure out how we wanted to approach it. With the main problems I mentioned earlier in mind, we spent some time to figure out what questions should be guiding our ideation and design work.
In addition, we made a user permissions matrix for the main buckets of user roles to make sure we were including all the right functionalities for each. This proved to be helpful later on while defining key flows for each role and creating different prototypes for each individual persona.
User Flows
With an understanding of the different user cases, roles, permissions, and requirements, we began putting together user flows to lay the groundwork for the experience. Here’s an early example of a flow for Ubiquity Press Admins, who would be able to access every aspect of Central Station.
We also made user flows for more complex flows that needed approval and feedback from management. One of those was the flow for creating a press, with one of the sample flows we made below:
Ideation & Low Fidelity
Research insights in mind, we began brainstorming and sketching. We didn’t ideate too much with regards to new features to include, because at the beginning of the project, the scope was rather clear cut as a redesign. In the sketches and lo-fi mockups below, we worked on the overall layout, figuring out how to place each element to create a hierarchy to keep users aware of where they are and what they’re doing at all times.
Iteration
At this time, our main source of feedback for this project was from internal stakeholders, who would also become users given that Ubiquity Press staff were a key user group as well. During our calls, we showed them our progress and gauged usability through some quick user testing questions.
Because the project spanned so many screens and features, I’ll show a a couple evolutions of certain screens here to demonstrate our general iteration process.
Dashboard Evolution
Press Settings Evolution
Typesetting: Article View Evolution
Style Guide & Design System
Around the time we started iterating on mid-fidelity designs, we put together a design system that covered the text styles, colors, icons, and components we used throughout the platform.
Testing
As soon as we had a prototype ready to test with, we began conducting concept and usability testing with the UP employees who would become the regular users of the platform. Later on, I also hopped on video calls with customers of Ubiquity Press and conducted usability testing with our Figma prototype. Here are some of the findings we learned:
Users appreciated the relatively simple and clean desgin. One journal manager appreciated the intentionality in choosing which features are and are not included in each page in comparison to the old Jura.
Since many journal managers only manage journals as a volunteering opportunity, it's important to use clear language, avoid jargon, and include more help text in our designs.
Testing also revealed some usability tweaks and other changes to make, which you can see below:
People Settings
Press Settings
Final Designs
Though testing is ongoing, I’m excited to show some of the final designs that I haven’t already showcased that are being developed right now.
Once we got to making high-fidelity screens, I also had the chance to put together a few illustrations for it, which I’m very thankful about! Working purely with Figma for visual design was a fun exercise and the tool is always surprising me with how versatile it is.
Reflections & Conclusion
Thanks for reading to the end! This project has been immensely rewarding, and I’m so grateful for the chance to work with Mimi and You Jin for a good portion of the project. As to where this project is going, the first stage of the design work is more or less done. Though we’ll continue testing it and receiving feedback from customers, we’re basically waiting for it to move into development now.
This project was interesting from a design perspective, because my colleagues at Ubiquity Press were essentially a main user group. Designing something that stakeholders/management would also be users of was interesting and enjoyable in a sense; it was good to get feedback and know that the changes we were implementing would be satisfying two key groups: our supervisors/stakeholders and our main users.
Designing for a SaaS platform that would eventually allow for up to 19 different user roles was also a challenge. Especially in the beginning, it kind of complicated the process and threw us off guard and required a few meetings with stakeholders to get a better sense of the scope. Making prototypes for each of the main user buckets was also a bit arduous, but definitely gave good experience as to how make multiple prototypes in a quick and efficient way.
Lastly, working remote for a good duration of this project with my teammates was a really interesting transition. Though I definitely missed their company, You Jin, Mimi, and I tried different ways to stay connected and focused on work. One of my favorite things that we tried out was making daily prioritization boards, like the one to the right. Though we didn’t do this every day, it was a useful practice for keeping us on track and in-sync when there was a lot on our plate and we were hundreds of miles away.
Related Case Studies
