My ideas build upon stories that write and rewrite the narrative of products and businesses to create value. To care about the social impact of design, my work aims to support sustainable design that's human experience focused.
That is the final prototype AKA Purified Prototype -- try it -- Mobile (first!) + Desktop
The Unveiling (⊙ _ ⊙ )
Crafting User Centered Design Epics on a Mobile first approach for a Museum website has never felt so spooktacular. Our client is a Heritage House Museum, NY haunted by a bad digital presence.
Spooky tales ヽ(°〇°)ﾉ
The user problem we, a team of four Pratt Institute, NY - graduate students are trying to solve is a case of a non responsive (pun intended) website and mobile design offering cognitive overload on the website, poor legibility on mobile, and overall unfitting UX and unsightly UI design and resulting information overkill. I am one of the four Specter squad members who was part of the redesign ritual. ༼ つ ╹ ╹ ༽つ
Ethereal Objectives ⋆.ೃ࿔*:･
IA accessibility / ease of navigation / discoverability
Spectral Research Phase ଘ(੭ˊᵕˋ)੭* ੈ✩‧₊
Phase 1: We took 9 user interviews, transcribed them for insights and quotes to analyze usability and IA issues using Affinity diagrams / Empathy maps to capture Personas. I did 3 user's data analysis and while the links will take you to these reports, you may access the data of the 6 users here; Tools used: Lark Suite - Minutes for transcription, and Miro for AD and I love them!
Phase 2: We did Competitor Analysis of 8 prominent museums in New York to understand their best and not-so-best user practices in mobile friendliness, responsiveness, layout, aesthetics, functionality, navigation, accessibility, and ticketing experiences.
Phase 3: We did Card sorting, Tree Testing, with 8 new users through moderated and unmoderated formats via Optimal workshop, to generate the site map in combination with all UR phases.
Phase 4: We designed a new site map bases on the revised IA based on user data from testing, and we built a mid-fidelity prototype.
Bewitched Information Architecture .°˖✧
Phase 5: We became the devil's advocate and evaluated our mid-fidelity prototype post testing with 4 new users on moderated tests with two tasks on mobile first (intentionally) and then desktop, and based our analysis on Nielsen's Heuristics Evaluation.
Ghostly challenges ⊂(•̀﹏•́⊂ )∘˚˳°
The MMH as we fondly call the museum, has a pressing need to promote it's building, history, the owner's legacy, collections, events, exhibitions, donation drives, tickets, et al.
This is a unique museum because it promotes itself -- the Heritage house with a touch of spook - yes, it has a YouTube channel of paranormal activity that can be booked to experience! With so much to categorize and offer to the audience, we had to start from scratch *screeches*.
Our users had little time for museums and demands. *eye roll*
Otherworldly Wireframing (skeletal) ☠︎︎
We redesigned our prototype based on user feedback. Our IA is based on two key user stories:
“As an art / history lover, I want to know what exhibition is on, so that I can decide whether to go to the museum or not."
“As a young couple, we want to see what types of tours are offered, so that we can buy general admission tickets for our second date.”
Supernatural Design Concept ⋆˖⁺‧₊☽◯☾₊‧⁺˖⋆
What we are doing differently:
1) We use a Calendar first navigation, followed by listing all events, exhibitions, tours offered that day, then the ticketing. We want the user to have better reach and to be exposed to more information, in a timely and organized manner.
2) We have merged extensive global navigation bar categories of the old website, such as General Admissions, Book a Tour, all under "What's On" which is a trendier and more action oriented title -- which is the pattern for all our IA.
3) We have realized how frustrating a membership log in prompt can be for some users (and a lot based on our research) so to not have them abandon the website (which was the case), we designed a separate and exclusive checkout experience for both Guest and Members, so they will not interject.
Purified Prototype ₊˚ʚ₍ᐢ. ̫.ᐢ₎₊˚✧ ﾟ.
This is the final prototype that we built and I have highlighted our team's most notable revisions post mid-fidelity testing (in the diagrams below).
How about testing the user flows for Mobile and Desktop?
Here are both the Mobile Flow and Desktop Flow of the final prototype! To test them, you can access the Figma links for mobile and desktop, that'll work on any device, you don't need to install anything ﴾´•ᴗ•`﴿_✌
Alternate Ending
Working on the High-fidelity prototype could visually change things.
"If it were to me, and I were permitted to think purely form a big idea perspective x UCD mash up, I see 1) the MMH building as a prominent visual landmark on the website, and 2) add user reviews to the site + 3) add 'time' required to visit each experience at the museum + 4) design an audible & expandable map with details + 5) propose an immersive experience design to the client for the museum, and 6) request them to add assistive devices in multiple languages to boost accessibility."
But that's how I picture it, and I think although it could look drastically different from the current prototype, it would still retain the new IA. As visual beings, we should keep thinking and be open to change.
Specter Squad (^>^)+(^>^)+(^<^)+(^>^)
I am grateful for the talented team I have had the opportunity to work with, with them I have experienced great discovery, empathy, learnt Figma as a collaboration tool, and really enjoyed the process! Let us hear it for my friends and teachers: Chieh, Emily and Gil! ヾ(´⌣`)ノ
All images are expandable upon click.
All "green" colored texts are hyperlinks that expand to a full report, or information.
Oh, if you're viewing this post from Home, and if you click on the title of this post, you'll be taken to a full view for better legibility 👀
Know lessons learnt from an European Ed-Tech App in the US through UXR
Knowunity is a learn and earn Website and App for school with a problem to solve.
Our UXR identified (soon you'll see why):
Founded in 2019 by former High School students, the online platform that's available in multiple countries, allows students to share their notes, summaries, flashcards and quizzes with one another, to provide a true peer-to-peer perspective to help students understand a wide range of subjects while studying for exams, and working on assignments or homework.
Project Goals
1. How do US students do homework?
2. What is the student’s "happy flow"?
Both to understand how well Knowunity supports its users, and where the competition supersedes and how we can help Knowunity uncover the gaps to attract millions of students across the United States.
Our team at Pratt
We are a team of four students, studying our Masters in Informatics, all paired in the Usability Fall 2023 class. Namely, Yizhu, Priyanka and Phil and myself (alter-ego).
Process
Usability Evaluation + User Research + Interviews with target audience + Testing of the App
For the client kick-off meeting which we did via Zoom, we had our questions based on an agenda outline that was mapped, and we had weekly check-ins with the client that greatly helped us stay on track with the process. Post every kick-off meeting we also did a group meeting on Zoom to discuss ideas, next steps and meeting key-points while they were fresh in our memory, and also took notes. I had my OtterPilot AI assistant to summarize meeting minutes that were emailed to all the participants.
Collaboration
We did all our work in Figma and used it as our main collaboration and presentation tool. Here, is also where I learnt Figma beyond design use, and for collaborative documentation purposes. We also created a Calendar of availability and tracked team progress and planned next steps after each client meeting.
How we recruited our participants based on a user profile, via the survey, emails and face-to-face circling among people we knew, and suggested. The 8 that best suited the client brief were recruited for the moderated interviews, all under the age of 18 hence we took parental consent to interview them over an online videoconferencing platform for our research and used screen-share to interact with the user on the Ed-Tech Apps, and document our findings.
We emphasized on the incentive (Amazon $10 gift card) during our communications with the recruits and their parents before, during and after to help boost our chances and reduce no-shows. And it worked! And post interviews we followed up with them to make sure they were incentivized, also to reassure them of our support, and appreciation for their participation.
Tasks and Scenarios
Scenario: You got your homework due tomorrow (insert actual homework that student is currently solving for).
How are you currently solving for it? (Ask friends/Use Google, Knowunity, ChatGPT, or any other app?) Why you choose this method? *Choose the task & test the feature based on the user answer
Task1: Test AI Feature in Knowunity
Task2: Search Feature
Task3: Chat (Group OR PVT)
Task4: Quizzes (Test prep, worksheets practice)
You can refer to the details of each task here.
We took notes on Usability insights, user quotes, homework routine on preferred Ed-Tech App, then on Knowunity App, and also on their "happy flow" AKA where they go for answers from the interviews. Each of the teammates analyzed the data of two users based on the project goals, user homework habits, and unique user flows. Here are the users I worked on, Leo is from High School and Cedric is from Middle School.
Our approach during our one-on-one interviews was based on our research goals, but also serendipitous based on the user feedback. This helped us discover more about what was working in terms of Ed-Tech App features, and where the pain-points lie.
Our tone for interview questions asked was casual which reflects in our Interview protocol, as we knew we were dealing with Middle and High School students, and the friendly and sometimes humorous tone of voice helped students warm up quickly.
Our data analysis which we will delve in soon in the results section of this post, was collectively generated from the user interviews and survey, as we had 15 responses on the latter, based on which we concluded the happy flow concentration is Google, and for some it's 'Homework tab' is the comfort place for students.
What we primarily tested
Mainly, how well US High School / Middle School students are supported by Knowunity when working on homework or assignments.
Results
Based on the user insights we generated from our 8 users, each teammate put together data in sticky notes initially and the data was collected to analyze students' homework habits.
We did a grouping analysis of the users' feedback on features highlighting Knowunity Usability Issues where we collaboratively added inputs from the user's we analyzed. The Knowunity features tested were Search, QuizzWhiz / Study sets, Group chats, AI, Smart scan. Smart scan seemed to be one of the most critiqued, followed by AI, Search and group chats. There were lots of suggestions made by students that we can observe in the group analysis data collection. In my case, Cedric had no major negative feedback for Knowunity hence we do not see his data in the Usability issues nited for Knowunity -- also because he is prominently a Google Homework Help user, but Leo had some useful insights and you may see how his interview was conducted by viewing the transcripts. In fact, Cedric really liked the Grade listed under answers and felt there were adequate amount of answers in the Knowunity App given a query when we tested the App for Math which was his choice of subject for the user test.
Furthermore, from our group's research we found 2 Top issues that we offered the following recommendations followed by bonus tips.
What were the issues found?
Top Issue #1
6 out of 8 users rely on teachers for resources. Here are some user quotes noted in support of our finding.
Top Recommendation #1
A virtual classroom feature to be introduced on the Knowunity App is our Topmost recommendation as it will increase user engagement with the Knowunity App, and also the content will gain trust, authenticity and reliability as it's coming straight from the teachers. The interesting aspect of this feature would be the autonomy of student's given primary importance as teacher's involvement is minimal, and the Knowunity App still remains a student first hub.
Top Issue #2
8 out of 8 users don’t think Knowunity is credible for homework.
Top Recommendation #2
Speaking of the bonus recommendations, we made two:
Issue #3
3 out of 8 users found that the Chats in Knowunity lack personalization, resulting in the proliferation of similar topic groups. Absence of clear distinctions for high activity groups.
Bonus Recommendation for Issue # 3
Issue #4
8 out of 8 users are confused about inconsistent search results.
Bonus Recommendation for Issue #4
We made some general observations and offered recommendations.
Recommendation on observation #1
Improve the accessibility by change contract radio for AI chat-bot above 4.5 : 1, which is fail at 3.51:1 now.
Recommendation on observation #2
Users prefer the search button in PDF view is searching keywords of the file, instead of go back to search page.
Conclusion
Of course, this project had a successful final presentation, all because of the support of my teammates, whom I would like to thank in addition to Team Knowunity, and we cannot miss the important mention of our client face Linda, all who supported our research work through the entirety of this project. Special mention and shout out to Prof. Taylor Valore, who is also the PM at Knowunity, and he played both roles with ease + remarkable suave and supported all teams equally!
Our client -- which were a series of packed virtual rooms of Knowunity folks, since we did our final client presentation over Zoom -- was very interactive, receptive of our top recommendations and observant of our bonus recommendations. We received live feedback and questions from our client during and after the presentation. We also emailed them our final presentation so we were all on the same page during the virtual meeting. I would say, it was a positive experience and we feel the hard work paid off!
Digital Website created as an Architect’s look book
Designed for an #architecture firm that (also) works w/interiors + #comprehensive planning as their #design focus is on #ecology I was brought to its conceptualization and relation to the word #kinetic which means to #move. My client believes in the statement “God is in the details”; keeping all such observations in mind, I began my design journey with the letter ‘K’ which is the first initial of the firm’s and the lead architect’s name.
Ideation journey: When we make an observation of moving or #growing objects and desire to capture the #trails of growth or #motion in a single image or noting, using #photography, what we get is a terrific moving image that’s actually steady. It was challenging to show movement and growth which is the nature of my client’s business, in an identity that achieves #dynamism without using animation.
Say we take an instance of growth in nature - of how a plant flowers, or a human movement like dance #gestures, and the likes, we require it to be shot in #high speed or what can also be known as #multi #exposure. Such a photo captures each development of the flower, from a bud to maturity, or the body’s movement of the #dancer frame by frame. What this looks on a single shot, is a multi-exposure photo or what looks like an echo effect or motion trail of the same object, while depicting it’s movement and growth.
We can see this ideation of Kinetic here, aesthetically incorporated, and the motion trail concept, and movement in the actual still imagery and the identity created. Here, the letter K has an animated trail of motion that looks like an #echo being created on a #spiral movement - spirals are also found a lot in #nature + used in architectural concepts.
While creating this identity I also felt inspired by this quote: “I move, therefore I am.”― #Haruki Murakami; and I referred to typefaces that have been developed to showcase motion, hence to satiate my need to create something original while referring to a great body of work out there on the internet. I use #google a lot + minimally too - mainly so that staying #original in a growing world is necessary to me as a creative and ethically so as a human. Image on the left-side: used as a point of reference only; all copyrights reserved by the creator.
Over to the website now, from where we left to explain the concept in writing.
The main objective of this product design is to hold the newspaper. I thought since it is a traditional brand that primarily delivers local news, why not create something on the indigenous lines? So there we are. One concept uses Al Sadu and another represents the famous emblem of a ship that we find in the country’s coinage as it also represents the a similar visual as present in the logo, highlighted in red color. I just lifted that element and juxtaposed it as a cut out over the box, and it fits the sail visually.
While I was running an office in the capacity of a Creative Director in Dubai, I enjoyed working on some concepts for an odourless and chemical free paint brand. This is just WIP and usually the method I use to pitch ideas with visuals and text that support the conceptualisation for a creative brief.
I saw something similar a year later to this work, that was done in the same region, but of course, two people can think alike they say. I believe it is an established case of multiple discovery :)
Anyway, I really enjoyed the process on this one, as I used the forest metaphor to depict the environment advantage of the product, and health benefits to the end user, no matter if they are in their living, office, kitchen, playroom, and the target audience is really every human that takes their health and their family’s health as a priority.
Credits ~ All images are used for reference only and belong to the source.
Digital Logo and Website for a Film Institute and Fest
The moving images and arts are compiled and showcased as a collective fest in the Middle East. Also, new talent is welcome to submit their entries and make a break. I designed a bilingual logo and a website for the Kuwait International Film Festival. This work highlights a simple UI design and clickable media files using photo film as a visual marking of the brand.
This bilingual identity work was made for a high fashion crystal jewellery house. Conceptually, I thought of associating jewellery in its geometric entirety and kaleidoscope like beauty. I also made a visual reference to the Rorschach test to depict intelligence or to put it in context of the customer, I would say to showcase an intelligent choice / audience. Another reference is of a self reflection, to denote that this brand and its products are a crystal clear reflection of the wearer and their beauty, so its not the jewellery that adds to the beauty of the wearer but rather the vice versa. Overall, I feel the brand is mystical and I have tried to show that through the design.
Bi-lateral symmetry, used in this logo option, is scientifically proven to be the most pleasing to the eye. The perfect symmetry represents the symmetry that naturally occurs in crystals.
Credits ~ Images in the mood-board are for reference purpose only and the sole rights belong to the source.
Branding Logo, Stationery and Packaging Design for a Fusion Beauty Brand Zareen
Using the origins of how traditional Arabic fabric is made (it’s made by sewing together a golden and a silver thread forming a loop), I created the logo for Zareen which means Golden. Using the unique built structure of the fabric, I designed the logo word mark. The dots depict the phonetic quality of the alphabets, and these were made to look like sequins because the traditional wear also uses sequins heavily in their fusion creations. The stationery, and packaging was designed, sometimes we used a seamless motif pattern or an emblem (created by another team member using the typography I made for Zareen) to denote the visual language. The product packaging follows a bohemian yet traditional pattern. I made a look-book using actual fabric samples and the store front was built as a 3D sign. I hope to get my hands on a photo of this signage in the near future and I shall post it here once I do. This is a premium retail brand and is located in Grand Avenues Phase III, Kuwait so if you are around there, please do pay a visit. Oh, and to say the least, I love working with different languages, and have worked with about four languages this far and yearn to work for new scripts. I see languages that I speak as assets and the ones I do not comprehend fully or at all, I see them as amazing forms to be explored. Usually, I have worked with a lot of bilingual logo and collateral design work.
A lateral concept created for a skincare brand which works on serious body conditions through cutting edge technology but prefers showing a friendly approach to it’s clients so there is no hesitation in the customers’ minds, and the process looks easier and approachable vs. showing medical equipment that may seem intimidating. This was a really interesting project as I worked with my copywriter to create something of an unusual visual quality by stressing on the bodily problems, but without making them unsightly and rather easily understood.
As the slogan suggests, the website is designed using the organic and handmade feats of the brand. This is not any ordinary synthetic burger, rather a made to order experience. I used a handmade paper feel to augment the website elements in a 2D layered illustration style, creating a visual narrative that is playful and innocent.
To have individual rugged mirror slabs placed inside the booth to enclose the booth space. Each mirror will have a corresponding mirror to create a optical illusion of a multiplicity effect that visually has no end. These mirrors can be arranged in a way that a person can enter this space and be a part of the optical illusion, where his/her reflection appears in multiple ways all over the booth mirrors to signify unlimited.
Looking at the elevation: The opening in the contour marks the entry point of the visitor. This is also the exit point. Actual mirrors will be placed as individual slabs standing from the ground to give the visitor an optical illusion experience of ‘unlimited’ inside the booth.
I remember this project being my first in James Walter Thompson. I have fond memories of some of the best six years of my creative life that I was privileged to spend in such a cool and global environment. There is an entire case study on this work that I have patiently written on this website. Please do give it your two minutes, and I promise it is worth your time. You should find the page on the left side bar menu, under case ‘case study’ section. Enjoy.
We did a series of Campaign work in Dubai for Atlantis F&B Brands. It was interesting building idea boards for a luxury brand that is primarily known for its hospitality in the service industry.
So out of sheer bravery and seated boredom, I realised a few years in to my creative journey that the way forward is remote. Yes, way before the WFH days, were the gig days. I craved me some too. So I moved out of my cozy office life (I really miss that window view of the city from the 21st floor *sigh*), to some creative head opportunity, only to realise that the city traffic needed some serious urban planning, okay on a serious note, I realised that what I was looking for was solopreneurship* (whatta loverly wor(l)d). And I gave it a go, and enjoyed long years of willfully toiling within a variety of roles, and ran a one human show with a dash of networking and worked on my soft skills.
You may see how it started here: www.otherhalve.tumblr.com (It used to be www.otherhalve.com with a FB and IG presence. You can still find traces of these in my Instagram for good reason)
This is how I found academics and this year I have gone independent (yeah, more than solo, imagine) - details on my LinkedIn
I aim to study and through this prospective goal, that I have been tediously chalking since 2019, I intend to find my nest AKA next. *Fingers crossed*
Sustainability is a striking concept adapted by the business domain the world over. I worked on five (yes!) concepts for a well known Textile business, that also produces a variety of GMO Free crop. So, sticking with the theme of organic, and handcrafted, a story was scripted for Arvind Mills, visually narrating various produces cultivated by them, and their heartfelt partnership with nature friendly products for a better today. I started with illustrations which became the landing page and dynamic User Interface for their website. Here I designed the concept, illustration and navigation of the Home page UI. You can view the entire process in another post titled “Process...”. Yeah, how original right?! *No pun intended*
Showcased is the approved idea, with trial and errors of the illustrated concept narrative, and R&D on the drawings, followed by the wireframes / scribbles and the website. It is live and can be viewed here: arvind-agri.com So, sticking with the theme of organic, and handcrafted, a storyline was scripted for Arvind Mills, visually narrating various produces cultivated by them, and their heartfelt partnership with nature friendly products for a better today. I started with illustration tracings to create different visualisations of the main concept map, and the final crafting became the landing page and dynamic User Interface for their website. Further, I designed how each visual prompt would depict a relevant section of the site.
I have attached a live example of the website with a live run in another post.
I may include the other two concept visualisations someday, as one Home page and one inside page. Who knows!
