My Process

DEFINE & IDEATE

Defining the Problems

Now that we identified our target user, Megan, it was time to identify what actual problems we are solving for based on what we have learned about our user.

To help define these problems, I used the insights gained from research and my understanding of Megan’s needs to create POV Statements to frame the problem from the user’s perspective. I used these POV Statements to identify How Might We questions which would fuel my process to brainstorm solutions.

Brainstorming

Now that I knew what problems we needed to solve for Megan, I started my brainstorming process to come up with solutions to those problems. I used the HMW questions that I identified and used those to help me brainstorm different ideas through mind mapping.

Strategising

From brainstorming, I ended up with a lot of different ideas - now I wanted to strategize and determine which solutions we should prioritize to most effectively to help Megan meet her goals.

Project Goal

Before I could make any decisions on what kind of solutions we wanted to implement, I needed to have a clear understanding of the goals we are trying to meet. These goals would help guide the decisions made moving forward to ensure we are moving towards the right direction.

Product Road Map

Based on the goals I defined, I started making decisions on what solutions we would prioritize and implement in order to successfully and effectively meet those goals.

Information Architecture

Site Map

Focusing on the prioritised solutions, I created a site map to help define the overall structure of the content on Design Lab’s platform in a way that would be logical and easy to navigate for our user. The rest of the case study will be focusing on the platform’s design once the user had logged in

Task Flow

Next, I wanted to learn how the users would be interacting with Design Lab’s platform. I started by identifying the key tasks Megan would be completing on Design Lab’s platform, based on her goals, and the key pages and detailed requirements that would help her complete those tasks outlined in a UI Requirements document.

Using these key tasks identified based on Megan’s goals, I started to explore how Megan would interact with the platform to complete these tasks by creating task flows.

User Flow

In order to empathize with Megan further, I created user flows in order to better understand her overall journey interacting with the platform - taking a step into her thoughts and the different decisions she would make while trying to complete tasks in different scenarios.

Low-Fi Wireframe Sketches

Taking what I’ve learned throughout my process to this point, I started to make decisions on how the content on Design Lab’s website would be organised based on the project goals we want to meet.

PROTOTYPE & TEST

Building a Prototype to Test

In order to make sure the design decisions I made in the low-fi wireframes effectively help reach our project goals, I wanted to get to a point where we could test the design with real users.

Mid-Fidelity Wireframes

Taking the low-fi wireframe sketches, I digitized them on Sketch and added just enough information for users to be able to navigate through the pages and complete tasks I would present to them during usability testing. These mid-fidelity wireframes would help my focus on what needed to be improved in terms of the functionality of my design. I also created tablet and mobile versions to make sure that the design is responsive and effective across the different device screens that users would be accessing the website on.

Prototype

With the completed mid-fidelity wireframes, I built a limited functionality, desktop prototype on Invision which I would use to help test my design with users.

Usability Testing

With my prototype completed, I started working on a test plan to guide the testing that would be conducted. I then recruited participants and conducted usability testing in order to see how users interact with my design and identify where improvements to the design can be made.

Test Objectives

• Test if users can easily complete the tasks

• Observe the different paths users take to complete tasks

• Assess areas of improvement to improve the usability of the design

Tasks

We asked the participants to complete tasks such as:

1. Continue watching a course

2. See what type of Courses Design Lab offers.

3. Learn more about a course.

Summary

We conducted testing with 5 participants to made observations on how they interacted with the prototype and completed the tasks.

• Method: Remote, moderated usability testing (Think Aloud)

• Participants: 5

• Age: 39-70 years

• Average Time: 9 minutes

• Task Completion Rate: 100%

• Error-Free Rate: 99.4%

Affinity Map

To get a better understanding of all the observations from testing, I used an affinity map to synthesize my findings. This helped me to get a better look at the different experiences users had and allowed me to draw connections and uncover key insights. These insights would help me identify what improvements would need to be made on our design to make sure we are helping our users painlessly meet their goals.

Amongst the patterns I uncovered, I was able to identify common pain points amongst our participants.

Pain Points

• 5/5 want to be able to search manually

• 5/5 struggled to find their Saved Courses

• 4/5 users scrolled back to the top after browsing to start looking for a specific item

• 3/5 did not understand that tags were vertically scrollable on mobile

Based on these pain points, I was able to draw key insights which helped me to identify what improvements I should prioritize on the design.

Insights

• People want a search bar at the top toolbar

• People want to access easier their “Saved Courses”

• People want a “get to the top” button on the bottom right side of the platform

• People would prefer to view all tags on mobile without having to scroll through them
  
  

Recommendations

• Add a search bar at the top of the page

• Swap “Recommended Courses” with “Saved Courses”

• Add breadcrumbs for browsing through the menu pages

• Make more clear the category “Enrolled Courses”.

Priority Revisions

Having identified the specific design recommendations, I started making revisions to my design to improve the design:

Clear Navigation

1.Often users claimed they would prefer a simple search bar, instead of navigating through the menu.

2. Users had trouble understanding which that the “Recommended Courses” section was actually their “Saved” courses.

3. Users would often scroll back up to the top of the page when browsing through the menu to check where they were. To help make it easier for them to find out where they are, I added breadcrumbs to the menu pages.

4. Through testing I noticed that users struggled to understand that the first category at homepage was their “Enrolled Courses”. To help them navigate easier I split the Welcome and the category title, and changed the button’s to match the rest

5. The users often scrolled back up to the top of the page when browsing through the homepage to find something. Homepage was a length page, and was taking them too long to get back to the top. As a result, I added a get to the top bottom at the footer area, in order to speed up this process.

Clearer filtering through courses

Through testing it was noticed that when users were filtering through the courses on mobile, tags were provided for easier filtering. On mobile device, often users did not understand that they could scroll horizontally through the tags in order to see more. In order to make tags usage easier, I removed the scrolling functionality.

BRANDING

Branding

Now that we have refined the overall structure of our website based on what we learned from testing, the question now was - what will it look like? Before working on the UI design, I worked on refreshing Design Lab’s branding to effectively communicate their unique brand personality through their website.

Mood Board

To begin the branding process, I started by creating a mood board for inspiration and to set the direction that I wanted to take Design Lab’s branding. I focused on finding different elements (color, typography, imagery, and logos) that aligned with their brand attributes: curious, creative , supportive and exciting.

Logo Design

Now that I knew what direction we were headed towards for their branding, I started the logo design process. I first started by brainstorming different ideas related to their keywords, and then starting sketching out different ideas for logos that would align with those attributes.

After sketching out a number of ideas, I chose the two that I thought would best represent Design Lab’s brand and digitised them to visualise which one I thought was the more successful version. I decided to move forward with the chemistry inspired bubbles which I thought was more effective in expressing their brand attributes and more unique.

Style Tile

Now I worked on compiling everything together and defining the specific direction we will be taking for Design Lab’s Platform branding. Each decision we made for the branding elements were based off of effectively communicating their brand attributes.

UI Kit

Using the style tile as a guide, I applied Design Lab’s branding to UI elements on their website to convey their brand personality though their website and created a UI Kit to help with the coherence of the design moving forward.

High Fidelity Wireframes

Incorporating visual elements in line with Design Lab’s branding, I worked on the UI design of the website and created high fidelity wireframes.