top of page
![front1.png](https://static.wixstatic.com/media/b9fa2a_4912952f116748c8b9b40aa153b9d34d~mv2.png/v1/fill/w_796,h_446,al_c,q_85,usm_0.66_1.00_0.01,enc_avif,quality_auto/b9fa2a_4912952f116748c8b9b40aa153b9d34d~mv2.png)
Timeline
-
January - April (12 weeks)
My Role
-
UX Researcher
Tools
-
Adobe XD, Figma, and XMind
Group Formation
Group members and their roles
For my User-Centered Design class, I was able to be in a group to create an app of our choice. We listed our responsibilities and added our roles in an organized chart. One piece of information that really helped was to see what connections each role has so we can be as collaborative as possible.
![groupformation.JPG](https://static.wixstatic.com/media/b9fa2a_9bd6276b9c6542408ea6af1919ffb713~mv2.jpg/v1/fill/w_644,h_534,al_c,q_80,usm_0.66_1.00_0.01,enc_avif,quality_auto/groupformation_JPG.jpg)
Group Idea & Mind Map
Combining all of our ideas into one
Originally, each individual member had an idea that was created into a mind map. When we formed into a group, we decided to put all of our ideas together into one collaborative mind map.
![mindmap.JPG](https://static.wixstatic.com/media/b9fa2a_afe07851c6594c8ba08b95aadda41a6d~mv2.jpg/v1/fill/w_813,h_479,al_c,q_85,usm_0.66_1.00_0.01,enc_avif,quality_auto/mindmap_JPG.jpg)
Market Matrix
Researching what is in the market
Each of us researched what is in the market and stated the product's current features and functions.
![zest.png](https://static.wixstatic.com/media/b9fa2a_4de46559600f472694d5a002f841cd51~mv2.png/v1/fill/w_600,h_352,al_c,q_85,usm_0.66_1.00_0.01,enc_avif,quality_auto/zest.png)
![food network.png](https://static.wixstatic.com/media/b9fa2a_87b353b0a9b5415ab26c6765ca6a1810~mv2.png/v1/fill/w_600,h_352,al_c,q_85,usm_0.66_1.00_0.01,enc_avif,quality_auto/food%20network.png)
![instagram.png](https://static.wixstatic.com/media/b9fa2a_51f02ad4bc0b4538862cfc18f6c55280~mv2.png/v1/fill/w_600,h_352,al_c,q_85,usm_0.66_1.00_0.01,enc_avif,quality_auto/instagram.png)
User Personas and Stakeholders
Documenting the users, stakeholders, their goals, and purpose
As a group, we defined the users and listed how they use the system, what they really need, and how they want to go about it. As for the stakeholders, we listed the importance, goals and motivations, and roles that they play.
![chefs.png](https://static.wixstatic.com/media/b9fa2a_cada3e224f72438d9f69f6adc4a80a2e~mv2.png/v1/fill/w_690,h_405,al_c,q_85,usm_0.66_1.00_0.01,enc_avif,quality_auto/chefs.png)
![college students.png](https://static.wixstatic.com/media/b9fa2a_f8406c3e6aaa4b1e83a4406d913c3553~mv2.png/v1/fill/w_690,h_405,al_c,q_85,usm_0.66_1.00_0.01,enc_avif,quality_auto/college%20students.png)
![stakeholders.png](https://static.wixstatic.com/media/b9fa2a_c2b20e9f72294599a87eb9448de7bb09~mv2.png/v1/fill/w_690,h_405,al_c,q_85,usm_0.66_1.00_0.01,enc_avif,quality_auto/stakeholders.png)
User Survey
Getting input from our users
We sent out a survey to our users and received a lot of feedback that helped us in the design of our app.
![1st survey.JPG](https://static.wixstatic.com/media/b9fa2a_5f276a3c697a4d64af6293414e53fcc5~mv2.jpg/v1/fill/w_600,h_380,al_c,q_80,usm_0.66_1.00_0.01,enc_avif,quality_auto/1st%20survey_JPG.jpg)
![2nd survey.JPG](https://static.wixstatic.com/media/b9fa2a_c1f56553536248d68868f2f9e8a3d325~mv2.jpg/v1/fill/w_600,h_374,al_c,q_80,usm_0.66_1.00_0.01,enc_avif,quality_auto/2nd%20survey_JPG.jpg)
![3rd survey.JPG](https://static.wixstatic.com/media/b9fa2a_66a584bc2faf4149b316246422ec943c~mv2.jpg/v1/fill/w_600,h_380,al_c,q_80,usm_0.66_1.00_0.01,enc_avif,quality_auto/3rd%20survey_JPG.jpg)
Use Case
Visualizing the user's tasks
Through the user survey responses, we implemented a use case to visualize what steps need to be taken to achieve a particular goal.
![food blogger.png](https://static.wixstatic.com/media/b9fa2a_30458867c1b144c58e4249e59631f823~mv2.png/v1/fill/w_738,h_469,al_c,q_85,usm_0.66_1.00_0.01,enc_avif,quality_auto/food%20blogger.png)
Information Architecture
Creating the navigational experience
We constructed hierarchies of information for the Cookbook app to provide a better view of what we will put into our application.
![ia1.png](https://static.wixstatic.com/media/b9fa2a_06f2c68ddff74984b89607671b41d1e6~mv2.png/v1/fill/w_736,h_432,al_c,q_85,usm_0.66_1.00_0.01,enc_avif,quality_auto/ia1.png)
![ia2.png](https://static.wixstatic.com/media/b9fa2a_ac756f19c8c549f5babc2c23fd16fd86~mv2.png/v1/fill/w_736,h_432,al_c,q_85,usm_0.66_1.00_0.01,enc_avif,quality_auto/ia2.png)
Mid Fidelity Wireframing & Task Analysis
Initiating the wireframes and documenting responses
With the information architecture established, we designed the mid fidelity wireframe and implemented a task analysis to improve the user experience. Through the task analysis, we learned that placing the buttons in a certain format would increase the speed for the user to accomplish their tasks.
![midfid.png](https://static.wixstatic.com/media/b9fa2a_94efbd71dd634244af17a64e041b7ae6~mv2.png/v1/fill/w_791,h_464,al_c,q_90,usm_0.66_1.00_0.01,enc_avif,quality_auto/midfid.png)
Style Guide
Visuals time!
For the stye guide, our theme was to be conversative but also bright and vibrant. The colors represent a warming and inviting feel to the individuals using the application.
![style guide (1).png](https://static.wixstatic.com/media/b9fa2a_cea105b520ea498085966d8429e632d5~mv2.png/v1/fill/w_715,h_420,al_c,q_85,usm_0.66_1.00_0.01,enc_avif,quality_auto/style%20guide%20(1).png)
High Fidelity Prototype
Final Design
With the extensive research that we put in, along with hearing from our users, we curated a design that caters to the user to help find easy to make recipes.
IDK
![hifi.png](https://static.wixstatic.com/media/b9fa2a_8e160f7cff4947f5870c3559909732f8~mv2.png/v1/fill/w_690,h_405,al_c,q_85,usm_0.66_1.00_0.01,enc_avif,quality_auto/hifi.png)
User Feedback
Post experience responses
![resonse3.png](https://static.wixstatic.com/media/b9fa2a_263ac2f7ec4a4069a561d90cb382e563~mv2.png/v1/fill/w_277,h_202,al_c,q_85,usm_0.66_1.00_0.01,enc_avif,quality_auto/resonse3.png)
![resonse1.png](https://static.wixstatic.com/media/b9fa2a_06c8dfc8a6b344b8a618afe5039ed4c5~mv2.png/v1/fill/w_277,h_202,al_c,q_85,usm_0.66_1.00_0.01,enc_avif,quality_auto/resonse1.png)
![resonse2.png](https://static.wixstatic.com/media/b9fa2a_4d32c88a89a44f33a3cefee68f0ee748~mv2.png/v1/fill/w_277,h_202,al_c,q_85,usm_0.66_1.00_0.01,enc_avif,quality_auto/resonse2.png)
bottom of page