MarketScale Studio
Website Application Redesign
I led the redesign of MarketScale's website application from research to design, I shipped features including Studio Mail and Course Builder, and received positive feedbacks from stakeholders.
Role
Lead Designer
Durations
8 weeks
Team
The Product
MarketScale Studio helps B2B companies engage their communities, by building, deploying, and broadcasting original content that educates, inspires, and informs.
Users (SME that want to share their industry product expertise) create and contribute content via “cards” in the feed, including features to upload, record, request from channel partners, and publish content as earned media.
Contraints
Change the UI and revamp the user pathway
Task I Owned
Define the project scope and priorities with PM and engineers
Conduct competitive analysis to understand competitor strengths
Conduct user interviews, translated insights into design tasks
Create design solutions and iterations for Course Builder and Studio Mail
Final Design Snapshots
Problem
data insights
5 courses / month
user pain points
The icons and terms used on the landing page are confusing, made it hard for users to navigate.
Design Principles
Alternate the icons and terms of the CTA button to communicate the core idea
Put a reminder on the landing page, and place notifications all in one place
Refine user flow and include a progress bar to avoid user abandonment
Design Decisions
Moved main navigation bar on the left side so it is easier for users to spot it, added a description to each tool icon to encourage action
Before
The icons are similar for two different features unless hovering to see the tooltips, users find it hard to navigate
After
Changed the icons so that users will be able to navigate through the new icons
Through tactical user research and competitive analysis on similar products, I noticed that the competitors have notification bells on their menu bars, which makes it a lot easier for users to notice and accelerate the feedback loop. The team decided to put a banner reminder on top of the production cards.
Then, I performed user testing on 3 of my colleagues who never used the website before. I sent a request for a video to them, and assign them as the approver of the request. On average, the time on task decreased from 2 minutes to 90 seconds, a 25% decrease in time.
Before
Old landing page not clearly show notification icons
After
New landing page with banner reminder
I mapped out user journey to present a visual story of user’s interactions and points of friction, which implied the areas of improvement. For each friction points, we stepped into their customer’s shoes and see their business from the customer’s perspective.
Studio mail is a feature that, from gogrow.com engagement statistics, has relatively low usage (75 per month) compared to 950 per month for media upload.
Before
Users have to scroll through the page in the current studio mail to reach “Draft”. Sometimes the user just forgets to scroll and does not know that draft existed. The result is that users decide to come back and reopen studio mail, and create a new studio mail.
After
Putting the draft on the right side horizontally aligned with “create a studio mail”, it is much easier for users to see and will increase the usage of studio mail function.
From assessing the current usage by features on gogrow.com, the usage of CourseBuilder is only 5 per month, which is the lowest among the other tools.
Before
Steps includes create a course, upload content, and preview the content, but the user is not aware until scrolling down after finishing one step.
After
Replaced the step buttons with a progress bar. Offering users a clear idea of how many steps it takes to get to the final target.
Testing
I reached out to 5 participants, and asked my clients for feedback on the functionality and clarity of my prototype. Below are some user insights with corresponding design decisions.
I love those, these are what we want in terms of a sleek look and a clear user pathway!
Handoff
The team arranged stakeholders to review and update the design specs including font, effect, spacing to get a better interactive and visual understanding.
What I learned
→ Inconsistency within website design. There were 4 UX designers in the team, and each of us was assigned 4 different editor tools for the studio. We designed the tools based on the UI guide, however, there were a few discrepancies when we showcased the design. What I did was facilitate regular sync meetings with cross-functional teams to identify inconsistencies in our brand element and evangelize design thinking.
→ Defining the scope in the early stage. In the kick-off meeting with the client, the team discussed the project and a rough scope and timeline, which later has been an issue for the team since the scope is a bit big for a 1-month project. Throughout the project, we have to constantly sync and make sure the team is on the track. What I would do differently for my next project is to stay on top of the tasks and create a shared perspective of the project scope.