Hello,
I'm Salma.
B.Sc. Computer Science, M.Sc. Human Computer Interaction
I am a UX/UI designer.
I design and develop easy to use, interactive, and pleasing aesthetic interfaces using relative cognitive Psychology and art.
Research
Before starting the design, I study the users to understand their behavior. Remember, you are not designing for yourself, go out there and know your audience.
Responsive
How many devices with different screen size, resolution, and platform are out there? One comprehensive design should respond to the users properly, on every single of those devices.
Modern and Aesthetic
Experiments have shown that users can judge a web site's credibility in as little as 3.42 seconds merely on the basis of its aesthetic appeal. People are evolving so designs must evolve.
Implement
I bring design to live using HTML, CSS, and JavaScript, ensuring appropriate styling across all modern browsers.
Shubaloo
Shubaloo is an online radio broadcast playing songs and videos from artists coming to your city. Do you wanna know if your favorite band is playing in your town or wanna know new bands and might be interested in attending to thereir show? Oh, yeah! Shubaloo can help A LOT! You can create a personalized playlist of bands you wanna listen using filter tags, liking, following, or completley removing them from your page.
Roles
UX/UI design | User research| Logo and branding | Wireframes | Mock-ups | Usability Testing | Analytics Study
Shubaloo
My Process
Shubaloo
User Research
Tools used:
- SurveyMonkey
- Loop survey
Before starting the design it was necessary to know who our users are and what are their needs. Based on the nature of the application which is around concert discovery, we thought that people attending concerts are our potential users. Therefore, we attended several concerts to meet the music lovers and do the surveys.
During the process I created personas and storey-boards to brainstorm and better understand user needs.
- Who is going to use Shubaloo?
- How often does she/he attend concerts?
- What are the other tools she/he is already using?
- How comfortable is she/he with the technology and the Internet?
- Where and when does she/he usually use computer or mobile devices?
- What are the business requirements and the market needs?
Shubaloo
Wireframes, Mock-ups, Prototypes
Tools used
- Adobe Illustrator
- Adobe Photoshop
- Invision app
Wireframes
After understanding the needs, we identified a set of features that could meet those needs. Then, I started the design. During the design process, I created the wireframes to quickly collaborate with the team regarding how users will interact with the app. Based on the collected feedbacks, I iterated the process until the layout was finalized.
Mock-ups
Then, I created a set of mock-ups to quickly present a more realistic look of the finished app by specifying the colour palette, font family and sizes, and etc.
Prototype
After mock-ups were finalized, I created an interactive high-fidelity prototype to test the interaction using the Invision app.
Shubaloo
Usability Test
Tools Used
- User Testing (remote usability testing tool)
- In-person interviews
Through remote and in-person usability testings, I collected quick user feedbacks to observe user interactions and identify possible interaction problems.
Shubaloo
UI Implementation
Programming Languages
- HTML
- CSS
- jQuery
I implemented the UI templates for this responsive one-pager webapp, ensuring appropriate styling across all modern browsers and devices using a combination of bootstrap, hand-coded CSS, raw media queries and javascript.
AIM Language Learning
Accelerative Integrated Methodology (AIM) is a technique that enables students to develop a working proficiency in the target language.
During my employment at AIM Language Learning Inc., I worked closely with the development and management team on two separate projects. One of the projects was redesigning the main website. The other project was a portal for students who are learning a second language using AIM technique. The Student portal enables students to complete activities and receive rewards.
Roles
UX/UI design | User research | Research competitors | | Interaction design | User Scenario | Usability Studies | Wireframes | Mock-ups | High-fidelity prototype using CSS, HTML, and JS | UI development
AIM Language Learning
My Process
AIM Language Learning
User Research
As a first step after joining AIM, I studied about how does AIM, a new technique for language learning, work and who its audiences are by visiting several schools to observE the teachers and the students, as well as studying the AIM papers. AIM has two groups of users with very broad behavioral aspects, teachers (adults) and kids (ages 4-17) and it was necessary to completely understand two group's diverse needs. I also studied the existing website and identified the interaction problems, user frustrations, and proposed solutions.
AIM
Wireframes, Mock-ups, and Prototypes
Tools used
- Adobe Illustrator
- Adobe Photoshop
- Invision app
- Balsamiq
- Card sorting
In order to communicate effectively with the team, I created wireframes which were used in brainstorming sessions to collect feedback. I also created Mock-ups using the existing branding guidelines to understand the final look and process of the application.
At AIM, I worked on two projects, one was rebuilding the website and the other was to create a new student portal for kids. I had to re-use the existing branding guidelines and at the same time make the student portal attractive for kids by adding colour palates and templates to AIM's branding guidelines.
To collaborate more effectively with the development team, I created quick interactive prototypes using the mock-ups and Invision app. Prototypes were also used to collect feedback from users.
AIM Language Learning
Usability Test
Tools used
- In-person interviews
Assessed and optimized the performance of new and existing features by initiating and managing usability testings through in-person interviews.
UI Development
I implemented user interface for the student portal in CSS, HTML, and jQuery.
PlaceSpeak
PlaceSpeak is a public consultation platform where users can receive information and provide feedback on projects of their interest. At PlaceSpeak I worked on multiple projects in collaboration with the development team. I helped with designing and developing new features on top of their existing platform.
Roles:
UX/UI design | User research | Interaction design | User Scenario | Usability Studies | Wireframes | Mock-ups | UI development
PlaceSpeak
My Process
PlaceSpeak
User Research
As I joined PlaceSpeak, I first tried to understand the users and what PlaceSpeak is offering to them by meeting CEO, other employees, and users. PlaceSpeak has two user groups (participants and proponents) with completely different needs which matches PlaceSpeak's different business goals.
PlaceSpeak
Wireframes, Mockups, and Prototypes
When I joined PlaceSpeak, they had just launched their new online application with new look and feel. I was in charge of designing the new features for the application. Therefore, it was necessary for me to follow the branding and the template guidelines, when creating mock-ups, to ensure consistency.
PlaceSpeak
Usability Testing
Low-fidelity prototyping enables early stage feedback gathering to identify usability issues at the very early stage of design. Moreover, usability testing after each release enabled user experience improvements after every release.
UI Development
At PlaceSpeak I was also in charge of developing the user interface using HTMl, CSS, and jQuery.