Market research
User survey
I conducted an user survey on wilderness adventure group, and thats how it looked:
27 participants
Personas
I created two personas based on previous research, a wilderness entusiast eager to learn more, and professional guide and content creator
High-Fidelity UI Design
Once the initial flow was complete, I started by creating a couple of the main screens of the app. I started by defining the fonts and colors.
Color palette
Accent, primary, secondary, tertiary, background
Font
Russo One
Regular
Open Sans
Regular, Medium
Alignment and grid
I used an 8-point grid for the project and set the margins for within groups to 24-40 and between groups at 80 and 96
High - fidelity prototype
I connected my high fidelity designs into a clickable prototype. That will allow me to test the website on a first group of users. Prototype can be live previewed at: [LINK]
Prototype validation
I validated my prototype on 5 users. Each were given a subset of the prototype dedicated to Home page, course detail, and course playlist. I wanted to be sure that users can learn more about both paid and free courses before they add them to the library.
This was tested over zoom call. Where i introduced the user to the website and asked them questions. The question were dedicated to finding out whether choosing and acquiring course were easy enough to understand
Study Results
60% of users (3 out of 5) were unsure what to do on homepage, they quickly understand how to add course to the cart but did not expect to get more information by clicking course image. That mean that the task succes rate was only 40%
Prototype update concept
Because of time constraints, I wasn't able to run second run of usability study on the updated prototype. However, I have updated it with possible solution to the problem. Button will now only move us to the detailed course page from where we can add course to the library or cart depends if its free or paid course. This way we should make sure that user will learn details about the course and remove confusion
Responsive design
After testing the desktop prototype, I designed a responsive mobile version. The navigation was moved to a bottom bar for easier access, and courses or videos are now displayed by category in a vertical grid layout.
Project summary