Website Redesign

Banner 1.png
Problem to solve

How can we enhance program pages to help potential students with course details and gain student leads?

Role

UX/UI Designer

Client

Wyncode Academy

Year

2019

OVERVIEW

With a growing list of products and features, the company's key goal was centered around scaling. An interface that allows customers to successfully create and manage their own products is a key stepping stone in that process. Prior to being on the project, there was an initial CMS interface in place but was mostly managed by internal team members. The company wants to change its approach and hopes that clients are able to take ownership of their products. From service-based to product-fueled. 

User and business win-win: Add elements to the program pages t that is intuitive, informative, and enjoyable to use so that internal resources can be relieved and redirected, while customers make updates in a more quick and direct manner.

THE PROCESS

UNDERSTANDING THE USERS

Understanding someone who's interested in the UXUI framework. 

In many instances, they are adding custom content, redesigning based on new brand guidelines, or creating promotions or ads to display. Auditing the current CMS, I found that the gap between the interface and the intended user (client) is communication.

Why aren’t clients willing or able to use the CMS interface? Clients’ responses centered around the high learning curve, lack of confidence in managing high-risk tasks, and frustration with the tedious and repetitive duties. 

STRATEGY

The new design would tackle these problems of information, trust, and frustration through the dialogue between user and software. 

Step 1

Navigation

To start, the products or features have to be easy and intuitive to find and return to. Adding quick links for relevant pages whenever possible.

Step 2

Forms

Create a consistent composition of titles, descriptive text, and supporting elements to explain each section of a task. Separating tasks into clear paths with end goals of completion.

Step 3

Interactions

From affordances to feedback, the user should have control over saving, editing, and deleting items. They should be notified about their errors or system errors to build confidence in using the interface.

IDEATION

1. Navigation

existing nav.png

Existing Navigation

○  Cognitive overload: does not group pages intuitively into larger categories based on phase and use

○  Not clear which pages are language-specific and need to be repeated for each language available

○  Lack of a hierarchy between types of pages, i.e. a setting change v.s. creating a custom item 

○  No separation between high-risk items 

NEW INFORMATION ARCHITECTURE

New Sitemap.png

Level of risk

 Frequency of use of page

 Priority to product

Stage in the user flow 

Key elements focused on

The new approach separates the pages by a breaker point in the user flow. All features and settings required to launch exist in the first section driving the user to a clear end goal - a live product. This benefits both the business and clients who believe a quick launch is critical.  The second section is for features available as a playground to create custom assets and enhance the products. Once the product is live, the interface focuses on these features instead, while reducing the cognitive load for a user to navigate between the initial set up pages, as well.

WIREFRAMES

Below, I experimented with different versions of the navigation.

Option 3.png
Option 2.png

After many iterations, the final navigation followed a step by step process to launching a product. The user is able to see an overall section with the required tasks within it to complete. The system will track the progress of the tasks completed for returning clients to quickly jump back into their workflow.

Group 11.png

Once all the tasks are completed, the system will notify the internal team to review for launch. This step is high risk and hence supported in the back end by the product team. The client is able to reach out with any questions.

Home page 2.png

Once launched, clients would receive notification of their live product. 

Home page Copy 2.png

Lastly, if the client selects customize (or when returning to the CMS post-launch) the interface will reduce the set-up pages into one completed step and focus on the customize options available. This part does not have a progress tracker as it is not time or goal-driven. 

Homepage Part 2 Copy.png

2. Forms

EXISTING FORM

Forms existing.png

○  Long lists of input fields with little visual separation

○  Lack of verbal explanations.

NEW FORM COMPOSITION

Forms.png

○  Separates sections into groups by relevance 

○ Uses additional elements such as masked inputs or helper text to assist users in completing the form.

○ Maintains horizontal input fields for compact visual scanning

○  Makes sure there is consistency in design elements to increase predictability and reduce the learning curve in completing a new task


 

Forms: key learnings

- Should relate to the name or action that brought the user here

- Be informative and specifis

Main Page title

- Should explain in a sentence more details about the use of the page

Page subtitle

- Should be clear and not use names related to only internal team knowledge

- Be informative ex: include “URL” when users are expected to input a URL

Input title

- Used to explain important format information, especially important in error handling.

- Error messages should pertain to the user inputting correct format, not just completing required field.

Helper text

- Used as a suggested text for what the user should input - Should follow the exact format needed for that input 

Placeholder text

- Use whenever possible to reduce additional explanation needed to communicate requirements to users faster.

Masked Inputs

- Use visual cues to make quick references to separate sections

- Should be used to distribute relevant information into groupings and give clarity to users about associated inputs 

Separate sections

- Include for complex or high-risk inputs that require further explanation 

- Keeps streamlines UI but on hover the popover text can include details

Tool tips

3. Interactions

In order to build trust and communication between the user and the interface, dialogue boxes prompting users to save their work or confirming a delete action are key elements. 

Save and close.png

Progress trackers create a clear path to completion and present the user with what to expect next. It allows them to take control of multi-step tasks without support of in person team to guide them.

Progress tracker.png
Notifications.png

Error-handling and system messages are literal forms of communication between the interface and the user. Having a consistent pattern for errors allow the client to quickly react to an expected pattern. 

Errors messages persist waiting for user acknowledgment, but success and information messages 

time out after 10 seconds.

I added in the progress message banner to capture the in-between moments such as 'loading' or 'exporting' to give confirmation to every user action.

FEEDBACK

Overall, the responses and interviews with phase 1 users (the internal team) have been positive. Suggestions on how features functioned best guided many of my iterations throughout the process. The feedback to the navigation from the product teams and developers prompted me to use more simple components and be resourceful with what we already had, instead of building a complicated navigation. This in turn lead to separating the navigation into the checklist version you saw above. Its a more streamlined approach and fits directly with the goals of providing the user with a clear path to launching their product. 

OUTCOMES

This project is broken down into phases of slowly integrating this design strategy into upcoming plans. 

As an ongoing project, the next steps would be to formalize testing to first versions and make iterations based on usability responses around our KPIs: clear communication, trust in the system, and reduced time investment in updating or making changes.