SiMBi Web App Redesign Concept
UX/UI Case Study
A Problem In Literacy
Currently there are approximately 793 million illiterate adults worldwide creating about a $1.19 trillion dollar drain on the economy. While this is especially true in developing nations, in a recent study in the Journal of Education and Practice notes that literacy levels in developed nations such as Canada and the United States are also vulnerable to decline due to lack of interest and incentive to read.
“SiMBi is humanity’s power in progressing literacy”
— Aaron Friedland (Founder)
SiMBi, under the umbrella of The Walking School Bus, aims to tackle this global challenge by offering a peer-to-peer reading program aimed to improve student literacy, while at the same time, gives teachers time-saving insights.
The unique value of SiMBi lies in the social impact created when students in a developed nation are able to record their reading of books and is used as a data base by students in developing nations to learn how to read.
SiMBi uses both an online platform as well as physical classrooms for this task where students can access this literacy network to record, listen (aka read while listening) and share their reading progress.
Why Literacy?
- Less Poverty — If all the children globally learned to read, there would be 171 million fewer people in poverty
- Lower Early Mortality Rates — Japan, a country with the highest literacy rates (99%) has the lowest infant mortality rate (2 for every 1000 babies born)
- Stronger Economies — No country has achieved rapid economic growth without a rate of at least 40% adult literacy
- Community Involvement — Literacy program participants in the United States were more likely than non-participants to register to vote
- Improved Personal Well-being — In the U.K. 75% of literate people are happy with their lives compared to 50% of illiterate people
Client Kickoff
For this 2 and a half week sprint, our client had asked us to take a look at improving the UX and UI of their existing platform and suggest improvements of its core functions of recording and listening while reading. Additionally, they had also wanted to evolve the organizational functions as well as overall branding.
Identifying SiMBi’s Business Goals
From our client’s expressed business goals, we decided to make our priority in the teacher’s perspective rather than the student as SiMBi as a business is targeting teachers and educational institutions to expand their customer base.
To give some context, SiMBi has a target to be implemented in 1,000 classrooms in North America by 2019, with the majority of their revenue base coming from either school/school districts or individual teachers.
Additional Considerations
It is important to note that currently SiMBi lives within the domain of The Walking School Bus, however, from our client kick off meeting it was stated that it would soon branch off to become its own entity. This meant that our team had to take into consideration of how the user would reach the web application in addition to all the regular functionality within the app itself.
A tall order for a 2.5 week sprint.
Our team, however, was determined to take on the challenge and create a better reading experience. It should be noted at this point that our team was comprised of UX designers, our main goal was to focus on the functionality of the web app. That being said, in this sprint we also wanted to go the extra mile and take on some of the UI elements as well to provide a more finished look.
Key Research Findings
In addition to the research provided by SiMBi, we also conducted our own independent research for two main reasons. First, we wanted to validate and challenge any previous research, and secondly, as the design team, we wanted to create a sense of empathy towards our audience so we sat down with some of them to get to know them a little better.
In doing so we found out that:
- It takes a considerable amount of time doing assessments
- Peer/group reading sessions are usually the most effective
- By giving kids autonomy over their reading they are more motivated to read
Understanding what teachers like about the status quo is useful because it will help us, as designers, think of new ways to integrate these ideas as features into the SiMBi platform.
Additionally, we conducted a survey among the general population of teachers which validated many claims we discovered in our interviews. While many teachers don’t particularly “hate” the assessment process, no one per say “loved it”, which let our team to believe that there were definitely opportunities for improvement that we could implement within SiMBi.
Although standardized forms of testing are efficient, they don’t into account important working skills such as creativity, collaboration, and drive to name a few. Also, after years of grading the same formatted tests, teachers eventually find it to be a mind-numbing process.
From a user’s perspective, the top three opportunities we found were:
- How can we make it easy for teachers to manage their attention more easily and effectively with their students
- How can readers be more engaged while reading so they are motivated to keep reading
- How can we create this platform so that teachers can adapt it to their varying needs
Looking At Market Competitors
We looked at inclusiveness (parent/ teacher) , engagement (gamification), Reach (Platforms), Growth ( Testing and Progress). Khan Academy turned out to be the most well-known platform hitting all of these targets.
This was useful because analyzing features offered by these companies, gave us a rough idea of what could potentially be the entire scope of SiMBi as a platform. This allowed us to make space for additional functionality in future iterations.
But, what exactly separates SiMBi from the rest of the companies we just looked at: its unique value proposition?
No other competitor gives students a reason to read out loud.
The golden ticket here is that we are more likely to engage in reading, knowing that we could be helping out another person, on the other side of the world.
UI Gut Test
While going in fully aware that the scope of the project would likely not be able to take our product to high fidelity. However, we at least wanted to have some direction so that in case we had time to pull that trigger.
We showed our client a number of different websites to get a better feel as to his taste in aesthetic and found out that he gravitates more towards:
- Simple, clean gradients
- Illustrations/icons over photography
- Likes a good amount of white space
Planning
Once we gathered all of the data, we moved forward with organizing all of the data into categories to identify any patterns and trends.
Again, just to reiterate, while we knew that there would be two primary users for this platform, given the amount of time of the sprint, our team primarily focused on the Teacher’s perspective. This is not to discount the student perspective as well, so there were many pages we would have to consider to work for both teacher and student alike.
Lucy Puffington
From our research, we were able to create Lucy, our user persona. At 33, Lucy became a teacher in order to shape the next generation through teaching. Although she invests a great deal of time and energy making sure learning is fun and engaging for her students, she struggles with having to deal with the administrative work such as assessments and grading as she feels it takes up too much time.
Feature Prioritization
During the client kick off meeting, we had asked what features our client deemed to be most important. From there we grabbed a general sense of what our he was looking for and what his vision of the end product would be.
We then filtered down these features to a couple of Must-have’s and some Nice-to-have’s if we had time to tackle them. However, in all honesty our plate was pretty large as it is and would need to be scoped down further.
Defining The MVP
To prevent the dreaded scope creep, we mainly kept focused on our MVPs — Reading While Listening (RWL) and Recording audio. That way, we knew that if a feature would not help in these areas, then it would be best to move it to later iterations.
An Ideal Scenario
We mocked up a storyboard to show how SiMBi would be able to solve Lucy’s frustrations when it came to doing assessments with her students.
- Lucy asks the student to read, the student is struggling to read
- The student reflects on his reading struggles
- Lucy suggests that the student tries SiMBi
- The student is more engaged in reading after using SiMBi
- Lucy is very proud when awarding the student the “most improved reader” award
- The student is overjoyed with his achievement and wants to help others
Tackling The UI
At this point in time, our team felt that the project was progressing quite well, so we pulled the trigger and focused on some of the UI elements. Our 5 member team divided the tasks in where Jason and myself were more in charge of the UI elements while Sat, Mana and Nadia continued to forge ahead with the overall functionality.
Developing A “Why”
With what we had gathered from the Gut Test, Jason and I created two “Why” statements to build our mood boards from. These would eventually turn into the different Art Directions we would pitch to our client.
- Students wanted to feel more empowered by collaborating with each other to tackle reading.
2. Students wanted to encourage each other to improve their reading ability.
Design & Testing
Sitemap
Before we could get into any actual designing, we had to solidify the sitemap and user flow to get a better idea of how we wanted to layout the information.
One of the major changes we were made to the web app was reorganizing the flow from going to a “Read While Listening” (RWL) and “Record” page, and then going to choose a book to a Library page in where the user would choose a book first and then choose whether they wanted to do “RWL” or “Record”.
A few other elements we added in were the Dashboard and Groups sections. These sections were created to help organize the different students and assessments needed as a requirement of Lucy’s job. Our research led us that by optimizing these flows, it would add significant value to our users so they would be more inclined to adopt the platform.
Design Studio
With our updated sitemap in place, we moved to sketching out the different major screens. Our main challenge here was because there were quite a few components to this web app, we had to make sure that the changes we were implementing would complement the system as a whole, and not just a bunch of features slapped together on a platform.
Going From Low Fidelity To High Fidelity
As we solidified our design sketches, we began to build our prototypes, first starting out on paper and then moving to wire frames, all while testing along the way (results will be covered in the “Testing” section below).
Testing
We tested our paper prototype and later on our wire frames with both students and teachers. Our testing revealed the following feedback from users in our prototypes:
- Group (Student Progress) Pages
- Implementing colour coding to differentiate reading levels
- Change name to groups → a teacher can make multiple different groups within one “classroom”
2. Recording/Reading While Listening Pages
- Would like an on boarding to help first time users navigate the page.
- Include custom settings to increase engagement with users
3. Library Page
For this page, we were requested by our client to test two different approaches for this page.
- Flow A — User would enter the library and then can click to either record or read while listen
- Flow B — User would click on the library, then decide if they wanted to read while listen or record, and then depending on what they chose, would go to the according library page
Based on the results of our tests, we ended up going with Flow A as it provided a simpler set of interactions, and was more familiar to them (“like Netflix”).
Developing The High Fidelity Screens
Solidifying The Art Direction
We presented two art directions based on the mood boards above, and our client had chosen the “Empowerment & Collaboration” direction. With that in mind, we moved toward expanding that Art Direction to include typography, colours and other elements.
Using Google’s Material Design As A Principle
As our main target user was focused on teachers, and more broadly, the education environment, it was very important for us that our users could use something that was familiar to them. Since schools are usually centered around paper products like books, worksheets, notebooks, etc., our team felt that it made sense to adopt Google’s material design as a principle moving forward. This allowed us to create our hi fidelity mockups in a quick and efficient manner.
Working Logo
Our team also looked at doing a redesign for the logo. The word SiMBi is short for symbiosis. Essentially it means that two entities work together in harmony, each benefiting from each other. We wanted to incorporate an icon that represented that link somehow in the logo, which is what our “S” turned into. In addition, we included an open faced book in blue as the baseline for the other words, changing the letter case to all lowercase.
Future Considerations
Obviously there was so much more we could’ve done to develop the app further, however within the scope of our project, we noted items of interest for future iterations:
- Mobile integration for MVP functions
- Incorporating Assignments the teacher flow — a page solely dedicated to assignments would help teachers keep track of homework assigned as well as their completion status.
- Assessment & Gamification — Implement a quiz in between certain chapters to test for comprehension and retention→ get badge.
- Gamification — Ability for teachers to create their own custom badges
- A more in depth Student progress. Teachers should be able to see students’ history from previous years or previous classes to understand their learning curve.
- Notifications for the teacher to be kept up to date in the assignments tab.
- Allow multiple administrators to sign into one classroom/group → e.g. in case there is a teaching assistant for the group.
- The owl at the moment is a placeholder Finally Custom characters or mascots for the students. We would like to create custom illustrations and iconography for a truly unique feeling.
Main Takeaways
This was quite a large project to take on given the timeline, but nonetheless I am proud of what my team and I were able to accomplish. I think this time around, the most important take away for me was to create a baseline for your deliverables, and then that way, if time permits, to push those boundaries. This way, you don’t oversell to your clients, and still have room to impress them come deadline.
