TRADISH — Mobile App Case Study
A UX solution to preserving the tradition of passing down family recipes
OVERVIEW
As UX designers, our task was to design, build, and launch an iOS mobile app in 5 weeks, which includes app development. In total, we had about 3 weeks to do user research, design prototypes, test, and redesign our app.
THE PROBLEM
For many people, food and family are intimately connected — modern families have a difficult task when it comes to preserving this connection.
THE GOAL
Bring family recipes into the digital world to preserve them for generations to come.
- Family recipes are still being passed down.
- Individuals like add their own personal touches while keeping the original.
- Families are loosing recipes to damage or memory loss.
- It’s important to keep recipes within the family.
- Other apps lacked the ability to collaborate privately within a family.
- Preservation
- Accessibility
- Organization
- Privacy
After compiling all of our research findings, my group and I created our persona, Mae Bryant.
Mae is someone who’s own mother is getting older and is raising kids of her own.
We kept her in mind throughout our design process to maintain our vision of the project.
Create a way for families to preserve, share and collaborate on traditional family meals, all in one convenient and organized place.
As a team, along with our iOS developers we grabbed our sticky notes and listed out user goals, tasks, and all ideas for possible solutions.
We decided to include our iOS developers in the process to help us understand what was possible and what was realistic in our short five-week turnaround to ship.
This was a really beneficial learning experience.
We sorted through what we had to determine what was needed and what we could take away until we established our MVP.
- Allowing customization options for members
- Staying within iOS parameters
- Keep a streamlined app that focuses on what’s important
| Our biggest challenge would be to figure out how all the content and features should be structured to maximize accessibility and ease of use.
I started out sketching in my notebook but quickly switched to sitting in front of a large table with a stack of 3 x 5 cards.
I personally liked doing it this way for a mobile app because as I sketched it felt more natural to sketch something I was able to hold in my hand.
Another benefit was as I sketched I was able to layout the screens, rearrange them, and collaborate easily with my team members allowing us to better visualize our solutions.
We cycled through the same process multiple times: sketch, design, user test, and repeat.
Designing a mobile app vs a desktop site with the difference in transitions, interactions, and responsive design was a new challenge for me.
| Taking our designs from lo-fi to hi-fi proved to be a time of enormous personal growth. I’ve had a lot of experience designing digital, print, and web design but not a mobile application. Not only is the UX design different you have to visually design differently and I was thriving on the way this pushed me as a designer.
We wanted our app to be simple, clean, and inviting.
We made a mistake at this point.
Early on — and obviously prematurely — we had a color pallet in mind. We had established an idea of our style well before we had really dived into the project.
This was a mistake I am happy we made in retrospect.
When it came time to build our style guide that premature design concept had become so cemented in our minds that we didn’t even revisit the idea.
As we would take further steps into designing we noticed that the colors and style did not work.
From headers, buttons, images, and icons the bad color palette would affect the user’s overall experience and even interfere with their ability to use the app.
One specific example of this mistake was that our color scheme would not work well with the recipe images that the users might upload. We wouldn’t have control over how perfect and pretty a users recipe image would be.
After a couple days of designs and redesigns I had a light bulb moment of going with a modern traditional style. This style creates empathy, bringing generations together through food.
Before I could confidently finalize our style guide and move forward with our designs I tested out a screen with several images to make sure our color and style would work.
Once I was confident I moved forward with finalizing our designs into a functioning prototype.
If we used colors and icons instead of images we would lose that empathy of using actual images of family recipes.
Designing our navigation and structuring the tab/icon layout was a huge defining point in our project.
Our navigation needed to answer these three questions:
- Where am I?
- Where else can I go?
- What will I find when I get there?
Navigation is how users interact with your product.
How do we achieve this to create a positive user experience that is:
- Visible
- Clear
- Easy to manipulate
If I’m being honest this was probably our biggest challenge.
The tab bar option felt the most natural at first and we continued to go back to it.
However, our devs had mentioned a slide out hamburger menu and we ended up making that decision without actually thinking about it.
We eventually went over the pros and cons.
PROS
Aesthetically, the hamburger menu looked pretty as it slid out from the side.
CONS
It needed to be visible on every screen. Visibility became an issue because it interfered with the placement of back buttons, options menus, and icons.
We had several additional features we needed on our screens that didn’t belong in a menu: Share, Delete, Edit, and Timer to name a few.
At this point, our screens were over crowded with icons and our side menu felt forced.
We would redesign, test and repeat.
It felt like we were banging our heads against a wall as to why our navigation pattern just wasn’t working.
We were able to do it, but our designs looked clunky and did not produce a positive experience in testing.
Several iterations later, we as UX designers took back control.
We said, “forget it” and designed the tab bar.
I know what you’re thinking: the tab bar was the most natural and obvious decision. However, working with developers for the first time, we let that take over what we knew as UX Designers. This was a lesson well learned.
The tab bar fulfills all three requirements and it’s visible on every screen.
The tab bar also allowed us to design an Options menu on the necessary screens.
Based on all our challenges, research, and testing here is the final result.
It wasn’t easy and it’s not perfect but we met our 5 week ship goal and are really excited with how it turned out.
It won’t stop here. We already have a round of updates being pushed soon to keep the progress going.
TAKEAWAYS
- I learned to find a balance between working alongside developers, letting them excel in what they do while also owning my own tasks. It’s the fine line of being open but not persuaded to go against what you know. Aside from any challenges we worked and communicated really well together.
- Working with multiple designers will always have its pains and gains. The goal is to figure out each others strengths and support each other in those. You won’t get anywhere alone.
- A lot of mistakes and errors you come across can often be avoided. The UX process of research, user story mapping, site maps, and building a style guide are crucial building blocks. If you have patience and put in the work before jumping into the fun part of visual design you have the ability to produce something great vs good.
This was nothing short of a positive experience that brought with it a lot of learning.
MY ROLE + TEAM
I was paired with two other UX Designers and a team of three iOS developers on our first ever mobile app project.
We worked together through the research and ideation phase to establish our core features of the website. We then went on to design the user experience from lo-fi wireframes, user-testing, to the hi-fi prototype.
I’d like to thank Gretchen Walker,Steven Warren , and our IOS developer team for their teamwork in making this project come together. Also, thanks to my fellow class mates and mentors for the extra advice and guidance throughout.
Please leave a comment below with suggestions to help me create more in-depth, understandable, and meaningful case studies.
