• PROJECT BENTO

    Mobile App for creating and consuming bite sized e-learning content on-the-go.

    DESCRIPTION

    Mobile App for creating and consuming bite sized e-learning content on-the-go.

    TIME FRAME

    July 2019 - July 2021

    TEAM MEMBERS

    • John Kwan (UI/UX Designer)

    • Brian Plank (Product Owner)

    • Monica Tsai (Associate Product Owner)

    • Nikhil Singh (Software Engineer)

    • Alex Ference (Associate Software Engineer)

    • Veronica Zammitto (UX Researcher)

    TOOLS USED

    • Figma

    • Sketch

    • InVision

    • ProtoPie

    • Animaker

  • BUILDING SOMETHING FROM SCRATCH

    In 2019, I was brought on by Kabam to work on Bento, a mobile app that allow users to create and consume delightful e-learning content on-the-go.

     

    As the sole designer on a team that's trying to a build a product from scratch, this was a huge opportunity for me to learn by taking ownership of the product from conception to final design.

    broken image

  • DISCOVERING AN OPPORTUNITY WITHIN A PAINPOINT

    The corporate onboarding e-learning experience these days is impersonal and non-interactive. As a new employee, it is difficult to be engaged by such an archaic way of learning.

     

    On the flip side, as a hiring manager who wants to create an effective and engaging onboarding experience, it is equally difficult. Most people do not want to invest extensive hours into expensive recording equipment and software......therein lies the opportunity for us.

     

    We want to eliminate this barrier of entry by allowing users to create delightful e-learning content easily with a mobile app.

     

    Our MVP goal was to first release this as an onboarding tool for organizations, before expanding it to the mainstream market for everyday users to create e-learning content in general.

  • broken image
    broken image

  • MY CONTRIBUTION

    As the sole UX/UI Designer of a small team of 4, I advocated that our design decisions be validated by constant user testing throughout development as our product is continuously evolving.

     

    I was responsible for all design activities/deliverables including wireframing, hi-fi mockups, prototyping, design system and design quality assurance.

     

    Since our UX Researcher had only joined us later in the product cycle, I took on the initial research and user testing responsibilities before it was passed on to her.

  • RESEARCH

    Since Bento was being built from scratch, the product owner felt that the right strategy was to not over commit to the initial research efforts, but to focus first on getting to the MVP stage instead.

     

    Nonetheless, a reasonable amount of research was conducted given the time constraint.

     

    To better understand how users feel about their previous onboarding and e-learning experience, we interviewed 4 people from Kabam.

    We found that:

    • The hiring managers preferred a more personable way to connect with the new employees
    • They wanted an easy way to keep track of individual onboarding progress
    • Everyone generally found their previous corporate e-learning experience boring and would've preferred a more modern and engaging experience (possibly gamified)

  • LETTING THE IDEAS FLY & SKETCHING THEM OUT

    This was the really fun phase of the project. We had a vision of what Bento could be, and we were trying to piece together the product features and guiding principles of our design based on our findings.

     

    The following key points came up during our discovery phase:

  • 1

    TOY-LIKE

    Bento must be toy-like, as in the user will not be afraid to make mistakes throughout the app. For example, instead of pressing 'save', content is automatically saved into a draft file when 'back' is pressed.

    2

    SOCIAL

    We wanted a social aspect so that there is a sense of community and connectedness. Users should be able to view other people's profiles and also show off their trophies.

    3

    INTERACTIVE

    We didn't want to just feed 1-way information to the user, but we wanted the user to feel engaged and have input as well in their learning journey. Hence we knew that we wanted a quiz and chatbot feature.

    4

    FUN

    Bento is all about making learning fun. This became the basis of our future UI design decisions, as reflected in our bright playful colors and rounded visual design.

  • broken image

  • WIREFRAMES

    After our brainstorming sessions, sketches and wireframes were made so that the team can see an overview for the product and how users can navigate around the app. This also helped us establish the core functionalities early on.

     

    Specifically, we settled on having a:

     

    Homepage: For discovering new content made by other users.

     

    Profile page: For personalizing your account by adding a picture and bio.

     

    Create button: For quick access to creating and uploading content online.

    There were other key functionalities that we knew we wanted to explore later on but wasn't 100% confirmed yet at this point, so they were left out in the initial sketches/wireframes.

     

    For example, the Learn page (content assigned BY others), and the Teach page (content assigned TO others).

  • broken image

  • PUTTING IT ALL TOGETHER, QUICKLY

    Given the scope of our project and our small team size, we broke up the most difficult areas of our app into 2 week sprints in order to keep our workload manageable. This is where the high-fidelity screens came in.

     

    Keep in mind that throughout this process, there had been a lot of design iterations and internal testing amongst team members to figure out how to make content creation as user friendly as possible.

  • SPRINT 1 - VIDEO VIEWING EXPERIENCE

    The first sprint was to tackle the video viewing experience of users when they open up a lesson.

     

    Originally, there was a time control bar at the bottom where you can slide to different times freely. Through research, we found that this was unnecessary as the length of the lessons offered on the platform are meant to be short in length.

     

    Also, with considerations of video aspect ratios, we decided to keep the bottom navigation bar during video playback so as to eliminate empty space.

    broken image

  • SPRINT 2 - CONTENT CREATION

    Content creation was arguably the toughest design hurdle in this project, as we were trying to find the right balance between functionality and ease of use.

     

    After many iterations resulting from user testing and research, we made sure that:

     

    • Everything felt guided without always needing explicit instructions
    • User did not have to relearn new behaviours as we followed best practices from other mobile video editing apps
    • We kept the functionalities as basic as possible to avoid a steep learning curve
    • The design was technically feasible to implement by our engineer.
    broken image

  • SPRINT 3 & 4 - LEARNING PATH

    A key feature of Bento is the ability for content creators to create something called Learning Path.

     

    A Learning Path is a curation of lessons that a teacher can package together and upload or assign to another user.

     

    One of the hurdles we ran into was determining a layout that allowed users to skip lessons WHILE still encouraging them to follow a certain curriculum path.

     

    I experimented with different creative directions; while they were fun, they were scrapped in the end because it was too impractical from a content creator's perspective.

     

    For example, having lessons visually branch out into different directions meant that the design would not be scalable (when you have too many lessons) long term. Furthermore, it certainly did not encourage a path for the student to embark on.

     

    In the end, we drew inspiration from DuoLingo and opted for a 2 column vertically scrolling layout that was much more clean.

     

     

    broken image

  • SPRINT 5 - CHATBOT

    The Chatbot feature is first introduced as part of a quiz that a content creator can add to their lesson.

     

    While there weren't any complex UX issues to solve and design for, communicating the micro-interactions involved was the most challenging aspect. For example, when do buttons fade in? How much should the size change when you press on them?

     

    Micro-interactions like this help Bento provide a more delightful experience to our users in a subtle way.

     

    Since the micro-interactions of the chatbot did not involve any complex animations, I had annotated the animation for our engineer in a step-by-step format in Figma instead of using another prototyping tool.

     

    The main things I focused on were how the size, opacity and positioning of the shapes transitioned over time.

    broken image

  • EVALUATING AND REITERATING

    Now that we had a basic working prototype of Bento, we could start doing usability tests to evaluate the value proposition and the ease-of-use.

     

    Using the new information, we could then make changes to existing designs and come up with new iterations to address any potential problems.

  • REMOTE USABILITY TESTING

    To do this, we conducted live video sessions where users had to put on the teacher's hat and was tasked with:

     

    1. Creating a lesson
    2. Uploading it
    3. Assigning it to another student.

     

    While they did this, we observed them to look for any major friction points.

     

    Finally, the session is wrapped up by a series of questions to help us measure the following KPIs:

    • Complexity
    • Aesthetics
    • Comperative
    • Motivating
    • Valuable
    • Innovative
    • Speed

    QUANTITATIVE RESULTS

     

    For our initial wave of user testing, some notable KPI measurements that stood out were:

     

    • Ease of use: 2.7 out of 5
    • Visual appeal: 2 out of 5
    • Valuable: 4.3 out of 5

     

    Based on this, this was our summary:

     

    "Users found Bento as an app with a compelling value proposition, however it was not found visually appealing, and although usable it needs improvement"

  • broken image

  • REDESIGNING THE HOMEPAGE

    We received a lot of feedback regarding our homepage:

     

    • For our 1st iteration, apparently the visual treatment to section titles were confusing as it shared the CTA's colour and shape, prompting users to think they could interact with it.
    • Users felt it was inefficient to navigate through all the content without it being horizontally scrollable. Furthermore, having the thumbnail images large and greyed out made people think the images were not loaded properly.
    • For our 2nd iteration, the full-width thumbnails were now replaced by smaller rectangle ones and the CTA colours for the category titles were also removed.
    • Although usability has improved, we were still receiving feedback that the aesthetics did not seem "fun and clean" enough and users still felt like they were not seeing enough content at a glance due to the inefficient use of space by the rectangular lesson cards.
    • For our 3rd iteration, the overall aesthetics style has been changed to something that is more fun and playful.
    • Spacing between each row has been increased
    • Lesson thumbnails are now squares which allows users to see more at a glance while solving any potential aspect ratio issues regarding images in the future.
    broken image

  • ADDING POP-UP ONBOARDING TIPS

    Another common user testing feedback that we got was the high level timeline screen struggled to communicate the gestures for interaction, thus users tend to miss discovering the detailed timeline or couldn't remember how they got there.

     

    Therefore, we added onboarding pop-up tips for first time users to help them discover different editing modes.

     

    broken image

  • AS A RESULT OF CONTINUOUS TESTING AND CHANGES...

    Our KPI had improved from...

    broken image

    2020 Q4

     

     

    To

     
     
    broken image

    2021 Q2

    Cookie Use
    We use cookies to ensure a smooth browsing experience. By continuing we assume you accept the use of cookies.
    Learn More