Competitive Analysis

Competitor analysis to determine best features to add to our designs and to figure out what is missing from already existing applications

Important Features to consider:

• Social networking integration
  - people usually like sharing their success stories on social media
  - creates community and trust among friends and other peers
  - could be helpful for marketing purposes

• Push notifications
  - notify about unfinished tasks
  - suggest new courses/new updates to games
  

• Library
  - completed courses
  - previous lesson plans to review

Ideation Phase

User Journey

I then created a user journey to visualize how a user interacts with our product and allowed us to see Lotus Learning from a user point of view.

User Pain point: "I have to commit to this app in order to explore"

In order for a better experience with the app we would allow users to explore a limited amount of content without having to commit to a membership (pay wall). We also added "quick logins" using social accounts such as gmail, Facebook, etc so users weren't turned away from the thought of having to commit to a long form sign up page.

Sitemapping

Once we found out what features and pages were to be added from our market research, we moved on to site mapping in order to visualize what particular pages were to be prioritized, linked and labeled.

Implementation Phase

Wireframing

We began the wireframing process to establish the structure and flow of the design solutions. We built out the main pages first and then branched out the interface layout to demonstrate what elements will exist on key pages.

Differentiating between sign up pages and new profiles versus login page and an already existing profile page

Course catalogue page and games page - two of the main pages needed for both a new profile and an already existing one.

Following the selection of the course catalogue all the way until the first lesson page where a user actually starts the course.

Navigation change to allow the user to quickly browse main pages of the app

At this point in the wireframing process we began branching out pages.

Menu Pages

Games Pages

Low Fidelity Prototype

Mockups Phase

Visual Design & Branding

After completing the wireframe process we began brainstorming colours, icons, and a logo to start the visual design of the app.

After discussing with the client on what he envisioned the app to look like we wanted to go with these colours to create a learning environment surrounded/in a pond. Purples represent wisdom, as such can be used to stimulate concentration, critical thinking and philosphy. Plenty of classes require you to stretch your mind and interpret challenging concepts, so utilizing purple and can give an extra push behind the design. Green is also known to boost concentration, low wavelength colours pomrote restfulness and calm, and they improve efficient and fondus. Apart from being one of the easiest colours on the eyes, it reminds us of nature.

Thick, bold lines are used to draw focus and creates attention to where they appear.

Logo that represents 'Lotus Learning', where the bottom of the lotus is an open book in order to represent learning and education.

Key Screens

Login Screen vs. Sign Up page

New user view with recommended courses and games. (X) acts like a filter to help the user decide what they are or not interested in. Exisiting user page allows the user to see their progress of the day (this encourage "streaks" during the week), a user can see their most recent lesson, and allows quick access to the course and games catalogue pages.

Course catalogue page and games page are the main pages where users can explore the content of the app. Users are able to explore the most popular courses and games and serves as a recommended content.

Course Pathway

Games Pathway

Menu Pages

Next Steps

The next steps after the mock up phases is to revisit accessibility considerations, create a high-fidelity prototype, conduct more testing and then finally iterate based on testing results.

View More of my work