SCIENCE EVERYWHERE
An Application dedicated to facilitating children to interact with each other over science. The initial programs aim was to serve under-represented communities. SE approached me to help with the GUI design of large screen displays that would be installed in schools and churches.
MY ROLE
I was brought in as the lead designer in November of 2016. My role was to design the exterior look of the system.
OVERVIEW OF PROCESS
DISCOVER DEFINE PLAN LAUNCH
Discover
RESEARCH
The system has to work for middle school-aged children. Elementary and middle school aged children, ranging from eight to fourteen. In addition, teachers (of all ages) who will be posting content to these screens. The user will not be able to post on the screens themselves, rather these screens will be used between classes for minutes at a time. There is the possibility of more than one user working in the system. This means that the screens would have to be quickly learned in order to interact with new content.
Define
USER GOAL
Design a screen that takes into account a younger user, and makes interactive learning fun.
Define
BUSINESS GOAL
Have the system be intuitive so that users will want to post from the mobile application on the lafge screen display. In short, have this system attract more users to the mobile application.
Plan
KEY FEATURES
The system has to accommodate more that one user, take into account the varying range of height among children at that age, and must be very easy to move through posts. For ease of use, there should be no more than the following four tasks that can be completed simultaneously while interacting with the system. Posting a challenge, responding to a challenge, scrolling through posts (multiple users) and "liking" or "tagging" posts.
Plan
INITIAL WIREFRAMES
Using Adobe XD I mocked up the following system design. XD gave me the flexibility to create a live mockup so that my client could clickthrough the entire system. Eventually, I looked at dividing up the posts so that the user could choose the type of post they wanted to look at.
Plan
CHANGES AFTER TESTING
The wireframe only was made for one user to be on it. The system needed to accommodate at least two users. Also, as we tested, it became clear that the user would not like to go into a pop-up box for the posts. We therefore got rid of post-specific pop up box. Also, we decided that the user should not be able to post on the large screen, as there were some concerns over curation of the new content.
Plan
INITIAL DESIGNS
Below are my initial three designs. I wanted to give the team a variety of very different options. The first design is more of a grid design, where the user could click an image to open a post. The second design uses angles and displays very minimal information about the post. The third version uses a gradient and bright colors to convey the fun of the system.
After presenting these options there were a few changes we needed to make, so I went back to the drawing board and I re-wireframed out the system. My feedback for the above designs were that the color was very inspiring, but perhaps we can make the system design more transparent, so that the user focuses on the content. I decided to work on a system that would more adequately accommodate two users.
Second Science Everywhere Wireframe
Plan
GAMIFICATION
Within the initial talks of the design we spoke of giving "badges" to users that used the system in 4 different way: investigator, insightful, collaborative, and curious. There would also be two types of additional badges which would be assigned to the user, not the posts. Those are: author and collaborator. Below are my initial sketches of the badges and then the actual badges that were implemented in the system.
LAUNCH
After I received feedback from the wireframes I took all into account and applied it to the final design. I also implemented the final badges (above) into the final design.
A post overview showing badges on the actual screen.
The final screen in broken into two sections so that two users can use the system simultaneuosly
A user can customize their author view color.
The bottom menu gives the user an idea of where they are in the system.