Digital wireframes

Taking the time to draft iterations of each screen digitally ensured that the elements that made it to digital wireframes would be well-suited to address user pain points. For the tutorial screen, I prioritized a quick and easy layout with a focus on the video with a background colour separation to help users enrich their experience.

As the initial design phase continued, I made sure to base screen designs on feedback and findings from the user research.

Creating a simple and clear layout with a focus on learning or watching as quickly as possible was the key.

Low-Fidelity Prototype

Using the completed set of digital wireframes, I created a low-fidelity prototype. The primary user flow I connected was onboarding for the user and their needs, so the prototype could be used in a usability study.

Usability study: Findings

I conducted two rounds of usability studies. Findings from the first study helped guide the designs from wireframes to mockups. The second study used a high-fidelity prototype and revealed what aspects of the mockups needed refining.

Round 1 findings

1. Users appreciate the simple layout
2. Users like that they can pick by category and by tags on similar videos
3. Users appreciate having the video time amount information being visible on the card

Round 2 findings

1. Users wanted to be able to filter by tutor
2. Users wanted more features on the watch pages
3. Users wanted the ability to revisit tutorials

Responsive Designs

The designs for screen size variation included Desktop, Tablet and Mobile. I optimised the designs to fit specific user needs of each device and screen size.

Mockups

1. Users wanted to be able to filter by tutor & to revisit tutorials they had watched or had not completed.
   
   
2. Users wanted more features on the watch pages.
   Ability to follow their favourite tutors and better video controls.

Please see before and after images below.

High-Fidelity Prototype

The final high-fidelity prototype presented cleaner user flows for filtering, watching and checkout. It also met user needs for matching users to appropriate listings.

Accessibility considerations

1. Provided more filtering options and adopted a matrix style sitemap for access to different parts of the website quickly
2. Used icons to help make navigation easier.
3. Included more features such as transcripts for videos for those that are hard of hearing.

Going Forward - Takeaways

Impact:

The web app helps people get access to education that they want to learn as quickly and easily as possibly.

What I learned:

While designing the Creative Supply app, I learned that the first ideas for the app are only the beginning of the process. Usability studies and peer feedback influenced each iteration of the app’s designs.

Next Steps

1. Conduct another round of usability studies to validate whether the pain points users experienced have been effectively addressed.
2. Conduct more user research to determine any new areas of need.

Thank you!

Thank you for your time reviewing my work on the Creative Supply! If you’d like tosee more or get in touch, my contact information is provided below.

Email:

joshua@mcleandesign.co

Website:

mcleandesign.co