SSC


Wireframing + UX Design + Visual

Why


People find it difficult to access the SSC database on mobile. They also have troubles finding what they’re looking for and downloading the videos on their phone

Who


The Scottish Sensory Centre students and people with hearing difficulties.

How


A mobile app with a playful yet easy interface that gives the user the option to find results quickly, watch and download videos.

Design process


Working in an Agile environment each project was treated in a very similar way at Roller. The SSC (Scottish Sensory Centre) app was briefed to me during a half an hour meeting, although being the youngest designer in the team I was also nominated lead of the design for this project. Unfortunately because of time constrains we weren’t able to spend much time on the research part which would have probably saved us a few iterations. With the brief in my hand my next step was to look for references and try to have a better understanding of the target user. The app had to be a tool that people with hearing problems could use on their mobile, as an alternative to the SSC website. A few requirements were clear, like the ability to download a video and to remove it from within the app. 

Research and sketches

The first draft had to be ready in 2 weeks. This gave me just enough time to have a quick look on what are the best practices to design for deaf people, being careful on the words you use and the way you present your content. Our Senior Design told me this has to had a playful design because our target user was in the 6-10 age range. After a quick brainstorming I was focused on 3 main features: search bar, favourites and categories. We also had a review with the design team to get the approval to proceed, I explained why my points were useful and they gave me freedom to explore different design options.

Designing for your user

Because we were dealing with really young people and as a design pattern per se, I didn’t want to overload the first screen with loads of informations. I then proceeded on a hierarchy approach where the content is moved down into each section/topic. Looking at an enciclopedia is sometimes seen as a time wasting activity, however in this particular project playing with more than 1 level was necessary. Also, the search bar would have helped in finding the content quickly. The first option that I decided to explore involved using a carousel-ish approach with all the categories being a “page”. One gesture to scroll through each category then taps and animations to guide the user inside each topic. The entire design was made around the concept of being playful and not boring. The animations were carefully crafted in After Effects and implemented in a prototype built using Marvel. This prototype was then showed to the client for a feedback.

Shifting to a older user

After the first meeting with the client, the age range of our user target was increased. This time we were talking about teenagers (12-19 years old), hence the first design wasn’t approved and needed an entire new approach. It was also highlighted that while the main target was going to be in the newly defined age range, older people could have used the app as well so the design had to be young and simple. I got rid of the carousel and moved to a less playful design, pushing every category into the homepage meant less scrolling but also more content in a single screen. Because everything was on one screen, the animation that I made this time was focusing on a smooth transaction that could keep the layout similar to the previous screen. Again, a new review was done with the Senior Design who helped me creating a better user flow. The new layout ended up being less dynamic but still meeting the client’s requirements. I also took care of the handoff which happened in couple of days, working closely with the developers so that they could understand how the animation was meant to work. For the handoff I used a plugin called Sketch Measure, being a small startup a free alternative to Zeplin was highly appreciated and the developers didn’t have any problem in getting used to it.

Conclusions


While working on this small project I had a chance to test once again my skills in communicating with the team. I also led the design which gave me a lot of responsibility that I was not used to have. Creating a visual identity, justifying my choices, sketching a flow, drafting a UI and going through the client’s feedbacks helped me understanding more about the design process and some aspects related to business and development. While we didn’t have lot of time to explore other design options and test our choices on a real life scenario, SSC was still really interesting because of the particular user target. It was one of those projects where I had to think outside my boundaries.

⇧ Back to top