Pinnacle

Streamlining the mobile user experience for competitors at Pinnacle: The Olympics of Hackathons.

Mobile mock-up of app design "uDirect"

Role.

UI/UX Designer

Prototyper

Team.

Arlene Chen (me)

Michael Yoo (Design Director)

Tools.

Figma

Duration.

5 months

View Prototype
Problem.
As young adults navigate independence, they often find cooking to be a daily challenge—time-consuming, complex, and tedious, yet essential for nourishment.
Solution.
YaasChef is an application that simplifies and electrifies the cooking process for young adults by suggesting easy recipes based on their inventory, in turn encouraging them to prepare their own meals.

Onboarding

Pick your favourite cuisines and set your dietary restrictions.

Add Ingredients Manually

Type in the ingredient you wish to add and watch it populate in your foodie stash! The more ingredients you add, the more recipes we will recommend.

Add Ingredients by Taking a Photo

Upload or take a photo of ingredients to add them to your foodie stash.

View Your Foodie Stash

Input ingredients manually or by uploading photos to get recommended recipes based on your inventory. Add expiry dates to get notified of impending spoilage.

Personalized Recipes Under One Hour

View recommended recipes based on your inventory and favourite cuisines.

Hands-Free Step-by-Step Tutorials

Learn to cook with our simple tutorial, broken down into key sections. Each step is supported with text and video.

Save Recipes

Create an account and login to save recipes for later.

Inventory Adjustments

Add expiry dates to get notified of impending spoilage for your ingredients. Filter by category, add quantities, and delete any ingredients.

Create a Grocery List

Planning your next meal? Add groceries to the list for your next trip to the store.

Survey & Interview Insights.
Examining the cooking behaviours of
young adults.
As a young adult, I experienced the struggles that many others face when trying to cook for themselves. In order to better understand the specifics of these issues and the habits of young adults cooking, I released a survey and hosted user interviews.
The main barriers to cooking:
Young chefs are saying...
Overview.
Pinnacle invites the winning team from each of the world's top 50 collegiate hackathons to compete in an epic finale event.
For convenience, the organization wanted a mobile app design for the elite hackers to use during the event. This would give them quick access to announcements, schedules, and important information prior to and during the event.
The Challenge.
Make the attendee experience more fluid.
Instead of using Pinnacle's user portal, Discord, main website, and exclusively physical badges which could be lost, everything would be consolidated into one app.

The Problem.

Many students miss out on opportunities to connect with their school community such as joining clubs and events that cater to their interests. This is especially true amidst a pandemic when promotions for clubs are scattered on many different social media platforms. Both introverted students and those who are inactive on social media may miss out on opportunities to mingle with like-minded individuals, become a leader, and stay organized.

How might we design a prestigious, accessible mobile application for Pinnacle competitors that satisfies the required features and branding guidelines?
I prioritized features based on user importance, project goals, and feasibility.
When survey participants provided feedback on desired features for a cooking app, I compiled their responses and had interviewees rank them in order of importance. Using these rankings, I created an ‘Importance x Feasibility’ chart to identify features that are both highly important to users and feasible to design and implement technologically.
Personas.
Empathizing with the users’ goals and
pain points.
Focusing on young adults in post-secondary school helped to paint a better picture of the target audience. I created two personas to get a better understanding of the different types of people that would use my product.
Early Iterations.
Creating a high-level basic task flow.
Early on in the design process, I mocked up a few low-fidelity wireframes to get a sense of the flow a returning user would take when entering the app. It was difficult to imagine fun visuals and interactions in this stage, which made it challenging to make concrete decisions.
Competitive Analysis.
Evaluating the landscape of cooking apps.
Although many of the apps I tried were of high-quality, I identified a few opportunities for my own product to include that would set it apart from the others. Using feedback from my primary research, I was able to validate these opportunities.
Visual Design.
Sassy, bold, and fun.
From ‘YesChef’ to ‘YaasChef’, a name change suggested by my supervisor meant more than just a simple alteration. This change led to an entire rebrand in vision and tone. Initially, I had used more pale colours that were not as popular amongst Generation Z. The push to use bolder colours was inspired by the name change as well as the interest that young adults have in bolder colours.
The Scope.
Meeting the MVP of the product.
As a member of a larger team, I was given the requirements and stretch goals for the app. Using the requirements, I began thinking about the architecture of the information.
Research.
The previous iterations lacked intuitiveness.
Prior to starting on the wireframes, I analyzed the previous mobile app iterations that were designed. Through this audit, I found a few key issues with this version.
User Flow.
A high level overview of the two main user journeys.
I created two user flows to give me a sense of direction for the screens needed when designing and prototyping. Since each Pinnacle attendee would have an personal account, there needed to be two flows for pre-login and post-login.
Visual Design.
I designed a component library to align with Pinnacle’s brand of prestige and elegance.
Using their branding guidelines, I designed an entire component library for the mobile app. This made the design process more efficient, consistent, and allowed me to sharpen my technical skills in Figma. Working with auto-layout, components, variants, and variables was a lot of fun.
Challenges.
Navigating the app.
Initially, I had debates on which type of navigation to use for this app. The previous iterations seemed to play with a unique type of interaction; however, I deemed it to be too confusing for most users because the Pinnacle directors were unable to explain how it functioned to me and I could not figure it out myself.

I tested out a dropdown style pop up menu because I felt as if there were too many pages for a bottom navigation and a lack of differentiating icons to properly convey the content in each section. This proved to be confusing during a review with a previous co-worker of mine and went against the common pattern of mobile apps and bottom navigation.
The switch to standard bottom navigation.
Due to the feedback I received from my previous co-worker and the standard convention of bottom navigation on mobile apps, I decided to switch. I solved the problem of having too many pages by placing the profile section in the top right corner and consolidating the About and FAQ page together. By combining the two pages, I was able to solve the other issue of having confusing and indistinct icons.
The Solution.
Delivering a streamlined attendee experience for the world’s brightest hackers.
What is Pinnacle?
New users can access information about the prestigious event on the About page.
Quick access to event information
Participants can login to view announcements, scheduling, rules, financing, travel information, frequently asked questions, and their unique profile.
Personalize your profile
Competitors can add their pronouns, biography, and social links on their profile. Each participant will receive a unique QR code, which will be used throughout the event for networking and authorization.
Interaction Design.
I created wireframes and prototypes to test and ensure intuitive interaction.
Below are some of the key screens and flows from the current version of the app. During user testing, participants navigated the app with ease. All 3 participants were able to identify the meaning of the navigation icons. In addition, the indication of the active page in the top section supported the iconography. However, the settings icon on the profile page was disliked. Due to this, a discussion to redesign the settings icon was conducted with the Pinnacle team.
Conclusion.
Design is a non-linear process and requires many iterations for optimal results.
As Pinnacle prepares its event aiming for Fall 2024, the designs for the mobile app are quickly coming to finalization and beginning to hand-off to developers. Our goal for this app is to create a more fluid hackathon experience for attendees, to mitigate the usage of multiple platforms for event information and participation, reducing confusion.

The opportunity to design this app was a valuable learning experience and a great way to see a solo project come to fruition. Meetings with the directors helped me understand their requirements, feedback, and next steps. I used the feedback provided during critiques and applied it to my revised designs. If everything goes according to plan, the mobile app should be built and ready to use in time for Pinnacle 2024!

The Challenge.

Write and assemble a 60-second video trailer that reveals the plot points about a fictional television series or film story of your life, with you as the protagonist (main character). The trailer must communicate your unique personality.

The Challenge.

In accordance with the hackathon theme, we were required to build a project relating to the cinema.

We established our inspiration from MadLibs and tried to put a twist on the concept with a final film animation of the story that users compiled.

The Solution.

Twenty: A Pandemic Story, solves the presented challenge by telling the story of Arlene’s experience during the pandemic and the thoughts she had while reflecting.

It communicates these ideas through a pandemic horror-dramedy where the character ponders the thought of life in an alternate reality without the pandemic.

After considering the possibilities and the ‘ideal’ life for a 20 year old, she comes to the conclusion that the pandemic helped her slow down, harbor her relationships, discover new interests, and find her passion.

There is an arc throughout the trailer parodying the initial horrors of the pandemic through a comedic lens, a vibrant alternate reality, and a sentimental montage of Arlene being satisfied with the memories she made, despite the rough beginnings.

The overall theme is acceptance and the discovery of oneself through environmental challenges in young adulthood.

Script.

The Solution.

UniHub is a centralized system for university scheduling where students can view upcoming assignment deadlines, club events, applications, lectures and more.

View classes, clubs, and upcoming deadlines.

Check upcoming sessions for clubs and applications to join executive teams.

Toggle between three calendar views to organize school assignments, clubs, and more.

Research.

To enhance our understanding of the positives and negatives students experience while engaging with their university after-hours, we came up with several research questions which were used in question boxes posted on social media. Key inquiries included:

  • What was simple and/or difficult when reaching out to a club or event?
  • How did they normally go about finding clubs or extracurriculars?
  • What methods did they use to organize their schedule, lectures, and deadlines?
  • What is convenient and/or inconvenient about their university's calendar?

Pain Points.

Due to the 36 hour hackathon time constraints, a limited number of students replied to our inquiries on social media. As university students, we included our own pain points in addition to our friends on social media to highlight some key factors.

Personas.

To get a better understanding of our targeted demographic, we created two user personas. Both are in university; however, one is in her first year while the other is in his fourth year. This was done to get an idea of the different student perspectives, as they are at opposite stages in school.

Features.

After the research process, we identified several important design requirements and features that would be the most beneficial for users.

Low-Fidelity.

For efficiency, we worked on our low-fidelity wireframes and added some text in order to clearly visualize our ideas.

Style Guide.

The design of UniHub is meant to appeal to students and have a more playful edge in comparison to a strictly corporate feel.  We wanted it to feel fun and casual so that students would not feel overwhelmed.

High-Fidelity.

After creating our style guide, we designed the high-fidelity wireframes with usability in mind.

Revisions.

Minor changes to the design were made after the hackathon to preserve the original and enhance it for accessibility.

The Solution.

uDirect is an eccentric interactive storytelling mobile application for movie lovers.

Inspiration.

The inspiration for uDirect came from MadLibs; a phrasal template word game that is known to be funny and entertaining. Our love for story-based adventure games and iconic movies inspired us to create this cinematic twist on MadLibs. Furthermore, we thought it would be fun for users to have control over the narrative and be pleasantly surprised with the visual results.

What it Does.

uDirect is a mobile entertainment application that allows users to make their directorial debut and take control over one of many quirky scripts that require their masterful final touches. Once a script has been chosen, players can name their main character and cast their main character based on the headshots provided.

Many elements of the offbeat story can be controlled such as the setting (users can choose if they want the story to take place on the beach, in outer space or the jungle), pets, names, vocabulary, food, and musical score.

After all the components are selected, uDirect allows players to watch the completed film containing cinematic visuals and witty dialogue featuring your decisions. With over 27,000 possible combinations, the fun is endless!

Low-Fidelity.

For efficiency, we worked on our low-fidelity wireframes and added some text in order to clearly visualize our ideas.

Style Guide.

The design of uDirect is meant to be bright and playful. Each colour is bold and often associated with fun games.

High-Fidelity.

After creating our style guide, we designed the high-fidelity wireframes with usability in mind to ensure a smooth game experience for players.

Before RBC, I was a third-year Interaction Design student at Sheridan College with no corporate work experience.

My design experience was limited to collaboration with peers of a similar age from school, participating in hackathons, and volunteering in extracurriculars. Therefore, I was a little intimidated by the thought of working with experienced adults.

During the first week, I was introduced to my manager, Robin, my mentor, Ryan, and the entire design team. Soon, I learned about the team HomeX and its purpose. Since HomeX is focused on simplifying the client and mortgage application and servicing experience, I had to quickly learn a lot about encumbrances.

Goals.

Strengthen design thinking
End-to-end participation in projects
Improve communication
Increase Figma proficiency
Develop stronger organizational skills
Projects.
TDS Exclusions
Interaction Design
Collaboration
Prototyping
Usability Testing
Under the guidance of my mentor, I had the opportunity to design and prototype a flow for TDS exclusions. I learned a lot about designing for the needs of the business and collaborating with product owners and business analysts. Participating in research sessions to gather feedback on the flow I prototyped was very insightful and educational. During these sessions, I was able to watch real mortgage specialists interact with my prototype to gage their thoughts on the proposed flow for future refinements on the design.
HomeX Design Team Onboarding
Content Design
Visual Design
Research
Presentation
As part of my goals, I was able to lead an entire internal project end-to-end to create an onboarding document for future designers on the HomeX team. For research, I conducted two retrospectives with members of the design team to prioritize the most important information a new employee would need. Then, I synthesized the results and began laying out sections of the document for design. I presented the design to my team and chapter for critique.
MSA Access
Interaction Design
Working on this project introduced me to error states and writing interaction notes. Finding out how to direct users along the "happy path" when they interact with an interface differently than intended was fascinating.
Loading States
Interaction Design
Workshops
This project taught me a lot about the importance of smaller details in design. A simple loading screen can have a significant impact on the user’s patience and satisfaction. I also learned to lead a workshop with the design team in order to gather their ideas for various loading states on certain pages.
Prompting
Interaction Design
Workshops
I learned how to guide users and give them visibility of the system’s status using toast notifications, alerts, and progress indicators.
Challenges.
Ryan Left 🥺
Midway through my internship, my mentor, Ryan, went on leave for five weeks.
Initially, I had some concerns about Ryan’s absence:
  • I was nervous about change since we had worked together for my entire internship up until that point and he supported me day-to-day
  • Though I was well-prepared and informed of his leave, I was worried that I would not work as well with the other designers
  • Felt pressure to know details on what I worked on with Ryan so that I could update the designers taking over
Many of the concerns I had about Ryan’s absence were quickly resolved thanks to the support of the team
  • Had a great opportunity to collaborate with other designers, learn about their process, and work on new projects
  • Worked with our Visual Designer, Amanda, to audit the advisor portal for the HomeX component library and finalize mobile TDS exclusions screens on Figma
  • Hosted design stand-up meetings to discuss any blockers or issues that the team may haveLed design critique and made sure each designer on the agenda had enough time to share their work
  • Led design critique and made sure each designer on the agenda had enough time to share their work
  • Gained advice from another Interaction Designer, Simi, on explaining design decisions and thinking deeper about the scenarios that each flow could encounter, she also expanded my knowledge on the Laws of UX
Insights.
“Learning and growth” is a great mindset to have
This mindset helped a lot in an agile environment such as RBC.
Leading meetings can be awkward, but fun!
Despite the silence, it is necessary to allow others to process the information and think of a potential response.
Explaining design decisions to stakeholders is important and takes a lot of practice
Design is difficult on its own, but communicating the work to persuade others can be just as challenging. A lot can be explained through interaction notes, presentations, and context.
RBC is Really Banking Cool!
I saw this on a t-shirt. In all seriousness, I really enjoyed my time at RBC and made meaningful connections with the team as well as with others in different roles and journeys. Turns out that working adults aren’t so scary after all!
Interaction Design & User Testing.
Micro-interactions required major
decision-making.
The placement of buttons and creating a flow to add ingredients to the user’s inventory list seemed like minuscule decisions; however, a lot of thought was put into the final decisions to create the best user experience.
3/4 users picked Version 4 as their favourite.
I crafted ingredient-adding screens to enhance personalized recipe suggestions. While Versions 2 and 3 were intuitive, they necessitated leaving the inventory. Version 4 introduced a more streamlined approach. Despite considering bottom sheets and modals, direct input proved more efficient as less clicks were made and users were not directed away from the main list.
Reimagining a more intuitive and user-friendly experience.
Throughout the course of this project, I went through multiple iterations of the same screen to test the most optimal user experience.
Lessons Learned.
Deciding on seemingly micro-interactions demanded careful consideration.
As I worked through the prototype, I gained valuable insights into interaction design and decision-making processes. The project successfully achieved the goal of creating an engaging cooking app that empowers young adults to craft meals using the ingredients they have on hand.
I reaffirmed my passion for visual design
and branding.
In terms of visual design, I gained branding expertise and discovered a passion for shaping YaasChef's identity.