User Interface and User Experience Design

Project Description

The goal of this project is to develop a mock mobile application which also includes user interface through user research and prototyping.

Our app is called "Salt & Pepper" which is an interactive meal planner that helps users to manage a flexible cooking schedule.

Roles and Responsibilities

I took on the role as a project manager, making sure that the team is on the right track and deadlines were met. This enabled me to oversee my team member's individual roles and their responsibilities. In addition to this, I did the sketches for our initial ideas of the interface. I also created persona and styling guide for the team so that our design decisions will be consistent. Furthermore, I created slide decks for the presentations every week.     

About

12 weeks long school project in a team of 5

Tools Used

Adobe Illustrator

Adobe XD

Axure

Ideation & Sketches

Before coming up with initial design, we had to ideate about which category we wanted to pursue for our mobile application. The team agreed on creating an app within the food domain. Then, we dove deeper into subcategories regarding the category and we decided on meal-planning aspect of the domain.

We started to sketch and came up with workflow after the brainstorming session. When sketching the workflows, I had to keep in mind why would someone use this feature and what problem does it solve? Having these intentions in mind made it easier for me to come up with various sketches and workflows. 

UI 1.PNG
UI 2.PNG

Workflow and interface sketches

Persona & Styling guide

I did a qualitative user research so the results are not completely objective and reproducible. I asked friends and family members which I identified as potential users and talked and interview them to gather data. After sorting through the research result, I created personas for the team so that the team had a shared understanding of the real users in terms of their goals, capabilities, and contexts.

When coming up with these personas, in order to better identify goals, I focused on data related to the domain and look for information that provides insight into the categories. I avoided assumptions and made it clear and relevant and made visuals that were easy to interpret. 

Personas based on user research

Styling Guide

I created a styling guide for the team because each team members was working individually  most of the time. In order to create a consistent design while working individually, I came up with the overall style guide of our app design such as the color, icons and fonts that reflected our unique application.

Styling guide for Salt and Pepper

Feedback and challenges

After we were satisfied with our design elements and workflows, one of the team member did digital prototyping. We were fortune that our instructor managed to arrange a meeting with designers from SAP for the class. 

They pointed out that some of our UI elements were not legible and types were hard to read. Strokes widths are small and some color contrast issues were pointed out to us. With these feedback, we changed our mistakes and we finalized our interface to be more legible and easier to navigate.

UI SS.png
salt and pepper.png

Before and after feedback

One of the challenges we faced when designing the whole app is when we were linking every page of our app to their respective links. We used Adobe XD for creating the layout and prototyping the app. Since there were a lot of interfaces, we faced with the issues of dead-links and links that were wrongly connected.  

This issue was due to the time constraint that we had and lack of task distribution. Only one team member was assigned to do the whole workflow. After we found out it was difficult for one person to handle, we distributed the tasks to other members to help out with the linking of the pages.  

Prototyping

Work space in Adobe XD

Reflection

This course led my interest into the UI/UX field. Even though this was my first course relating to the field, I learned a lot about design decisions and the process behind every decisions. I enjoyed the feedback aspect about the design because it allowed me to improve my work over and over. I also realized that when sometimes, we would jump to digital prototyping fast. This is not a good approach since our core values can be refined and prototype before this stage. Paper and verbal prototyping is the best and most effective way to achieve this. 

Also, from managing the small team, I've learnt that it is not easy to achieve the goals that I had since all the members work separately and on their own pace. This made me realized that not all the features can be incorporated in a given time and I need to come up with a minimal viable product (MVP). 

Working in UI/UX field is very engaging since it challenges my mind to find problems and solve for solutions. Design is never a finished product by rather an improvement after every iteration. 

Final Design

UI XD SS.png
UI SS.png
XD.png
Asset 1.png
This site was designed with the
.com
website builder. Create your website today.
Start Now