UX / UI Design – Share A Meal

Client

Sector

Challenge

My Role

Project Time

Share-A-Meal is an app designed to help a user get a home cooked meal delivered to their location. It is also an app that allows a user to be able to either purchase a meal or sell a meal within the same app.

Food eCommerce, Home Meals, Home Delivery

Create an app that serves as a platform for a user to buy a meal but also allows that same user to sell their meal. While creating this platform, add features that make this entire process seamless and user friendly.

Research, Problem Solving, Wireframing, Interface Design, Information Architecture, User Experience Design, Agile Project Management.

11 weeks (Research + UI + UX)

Your favourite meal, home cooked

It started with an idea to allow people to get home cooked meals delivered to their location.
What made it unique was those same people could also one day share or sell their home cooked meals if they felt like cooking.

Bringing this idea into life and providing an end-to-end design user experience is an opportunity I was happy to have to fulfill.

What’s on this page?

The Research Stage: Problem Solving

Problem Solving through research required me understanding a global audience and their pain points. It was not just through translation, but reimagining research so that it’s effective in cultures around the globe which led to me thinking beyond the digital screen and conduct interviews for human emotions and interactions in the physical world.

Discovery: Interviews, User Personas, User Journey

  • Created a product design from research to conception, visualization and testing for a company with an annual turnover of $1.5 – 2 million. It was important for the website to portray their dominance in their industry.
  • Collaborated and coordinated with teams from different departments to collate and disseminate information.
  • Understood their requirement and initiated work by creating wireframes and rough prototypes of the vision for the website.

Buyer User Persona

Seller User Persona

Buyer User Journey

Seller User Journey

Building a Scalable Design System

Building a design system that can be scalable means cataloging every component in meticulous details. It’s a massive undertaking that calls for both a big-picture view and a focus on specifics. Here’s how I accomplished a successful design system.

Colors

Typography

Icons

UI Microinteractions – Interactive Components

Buyer Profile – Buy A Meal

Design Iterations

Seller Profile – Share A Meal

My role

  • Collaborated with senior management, product managers, engineers, and cross-functional stakeholders to understand their requirements to provide creative, thoughtful solutions.
  • Iterated designs based on user feedback and business needs. Communicated the user experience at various stages of the design process with wireframes, flow diagrams, storyboards, mock-up’s, specs, and/or lightweight prototypes. Explored a variety of design directions, analyzing the pros and cons of each.
  • UI Design: Translate UX concepts into beautiful, engaging and user-focused UI designs, working within a cohesive design system and collaborating with engineers to achieve fidelity to your vision.
  • UX Development: Created work from user stories to map efficient, enjoyable customer journeys from problem to resolution.
  • Visual Designs: UI layouts (widgets, patterns, color palettes, graphic assets, typography, iconography, and user interface elements).
  • Technology: Created the website using a CMS platform and coded it with a combination of HTML, CSS, PHP and JavaScript.

The Process

Creating a vision: Research, Wireframe, Prototypes

  • Created a product design from research to conception, visualization and testing for a company with an annual turnover of $1.5 – 2 million. It was important for the website to portray their dominance in their industry.
  • Collaborated and coordinated with teams from different departments to collate and disseminate information.
  • Understood their requirement and initiated work by creating wireframes and rough prototypes of the vision for the website.

Structuring the Content: Sitemap, Redirects, Backlinks, Buttons

  • Commenced development of the website with a detailed sitemap which helped to form the overall website architecture.
  • Even at this early stage, plans for page linking so as to ensure effective SEO which is integral to the site, was already in place along with mapping to all backlinks.
  • Given UNiCORN’s massive database of content, one had to carefully classify them into the various industry types and projects with each of these industries. The project page has a clear content structuring that leads to the 16 industries UNiCORN’s serves and the multiple projects within each industry

Homepage Slider: Impactful First Impression – Particle Effect, Interactive Animations, Page Direct Buttons

The Challenge

  • Build an impactful lasting first impression by using interactions, effects, animations.
  • It was important to be able to capture the attention of a visitor and to retain that attention by redirecting their hand movements to explore additional information and pages.
  • The slider was also required to serve as a platform to access other essential pages of the website.

The Solution

  • It began by starting to sketch and generate a big-picture idea for an early-stage light prototyping of how I wanted to create a first impression of the website.
  • The idea was to demonstrate UNiCORN as a dominant player in the industry, wherein the sliders showcased the scale and magnitude of the work that they have done.
  • I used different effects, animations, interactions, call-to-action buttons on different sliders. This also helped in allowing the slider to have buttons redirected to other pages of the website.

The Home Page Design

The Challenge

  • One of the most important elements of the website was the homepage design. Unicorn Engineers wanted a powerful homepage that would deliver impact, engage website visitors and direct them to the relevant content on the website. The firm wanted a one stop shop page that would provide brief information from the entire website on one page.  This was a real challenge – but it was one I embraced!
  • To not compromise on design and creativity to achieve client requirements.

The Solution

  • The solution to create an engaging landing page for every visitor to stay on the website for longer than the average 8 seconds was the final Home Page design that came into effect.
  • The site was extremely data heavy and it was important to use clean design redirection to help leverage visibility of that data.
  • The Homepage design acts like a parent page having small snippets of information about every other page of the website.

Interactive Animations: Improving User Experience

The Challenge

  • I decided to use Functional Animation for the purposes of reducing cognitive load, prevent change blindness, establish better recall in spatial relationships.
  • Identifying places where animation has utility and using it as a successful tool for interaction.
  • To animate with a purpose. To prototype and test the animation.
BuyerAccount

The Solution

  • These animations were done correctly to make sure it could transform the digital product from a sequence of screens into carefully choreographed memorable experiences.
  • Made sure the animation was a natural part of the design process.
  • Worked harder on the following aspects of animation – duration, easing, choreography and interface.
SellerAccount-03
BuyerAccount-01

Designing Custom Icons for their Services

  • The service icons were designed after a careful study into the world of icons. These icons are designed to reflect the universal engineering services and are designed to grasp the underlying service offered easily. Several drafts and multiple revisions were made before finalizing the final design for the icons.
  • To help with navigation and to create a universal language for the website, I designed a set of icons which would be used consistently across the website.
  • These were created to give the appearance of signs that would be universally understood within the engineering space.
  • To perfect the design multiple revisions were carried out.

Collaboration and Iterations to Achieve Client’s Vision

  • Throughout the project, the client was kept informed of the progress and was given regular product demonstrations at each development phase. I encourage my clients to participate actively and provide feedback to get the desired outcomes from their projects.
  • Designs were finalized only with the client’s approval.
  • Client feedback was considered for every aspect of the website design and content structuring. Using an interactive process to develop the site, refining it, and working with the client helped to ensure that the vision we had developed at the start of the project was fully realized on completion.

View the Prototypes

BUYER
User Journey Prototype

Please use the password given to access the above link.

SELLER
User Journey Prototype

Please use the password given to access the above link.

The Impact

  • The new site has helped to increase the firm’s brand values and has strengthened their position in the industry. It has already attracted new clients and is slowly starting to deliver great SEO results as well.
  • The site has helped further cement UNiCORN’s digital brand identity and has helped them reach a wider audience.
  • A robust online presence worthy of their actual business acumen.
  • Enhanced brand value and ability to showcase their achievements.
  • UNiCORN now has a website that complements the face of their company.

Evaluation and Feedback

Feedback from everyone in the business has been highly complementary. The team at Unicorn Engineers were universally delighted with the new website. They now have an online presence that confidently promotes their history, experience, and ambition, and which showcases their skills, expertise, and track record across multiple sectors.