task[2]

lim jia sheng,
0344034.

BDCM
.Minor Project
::task[2]






task[2]: Design development

todo:

  • Create Gantt chart
  • Create user journey map
  • Formulate marketing strategy
  • Create branding
  • Create marketing materials
  • Create app prototype

process:

Gantt chart

This shouldn't have been such a painful journey, but it was. Me, hellbent on it being more dynamic/flexible, decided to use Trello as the backing for our Gantt chart. This would've been all dandy, & even a superb experience compared to Google Sheets & a template, which was what was recommended. Unfortunately, I also actively refuse to pay for Trello, which locks away the built in functionality, they call "Timeline". This thus relegated us to use third party solutions, which to my demise, also all cost money for some reason. Whilst yes, food on table, something lunch free never blah blah blah, but man, it was really annoying. We initially went with BigPicture, but that ended up being paid beyond single-person use. Then, we tried many solutions, some free, but unmaintained & broken-ish, some paid, but still unmaintained & broken-ish, some even just flat out broken completely. Finally, we ended up with a combination of Trello for task management, & TeamGantt for Gantt, accessible for people through a manually exported doc (automation tools to Google Sheets on Trello were broken).

Yeah, I'm probably going to switch to Slack next time...

User journey map

This part was not so eventful, relatively. Our first iteration of the map did not consider the fact that it would be kickstarting the project as a whole, meaning we had no prior users, & nothing for us to build upon. This meant we had to take into account starting up word-of-mouth & user FTUE's from scratch. After that though, our second iteration, whilst still a little wonky, only had the comment of "more".

Marketing strategy

This part was also not so eventful. Our strategy ended up being, we'll market only online, because our presence is only only, & parents already use online platforms. Since we can't spark word-of-mouth without parents using it anyways, our Phase 1 marketing can simply be solely through social media, &, as suggested by Mr. Mike, word-of-mouth generators, like bloggers & influencers.

How we were going to do it though, would be mainly to exploit the fact that we're the only people doing something like this, as well as try to enlighten everyone still using the traditional platforms (our competitors) that we're the more streamlined & optimised tool to fill the gap they reside in.

Branding

Oh no, this part was very eventful. What should've been a breezy phase, having two people experienced in branding & three other people specialising in graphic design, turned out to be the main factor that held us up this project.

Our first notable attempt at consolidating on a brand, beyond the art direction at the start, started out with our three graphic designers being tasked with exploring a direction for the brand. Eventually, we got three directions, but unfortunately, they all had properties that blocked them from being completely utilised, such as legibility concerns & misaligned concepts. Even more unfortunately, since we were surprised by the fact that we needed to do 3x the number of posts & stories that initially thought would be our upper limit, I really wanted to be tight on the deadlines. This then lead to a guerrilla-style design session between Ellis, Amber, & I, where we sat in a room together & came up with a brand that combined the elements that we, at least thought, would encapsulate all 3 directions.

  • Playplan v2-next.1
  • logo 2-01
  • logo 3-01
  • logo 4-01

Figure 1.1.5, Iterations of the v2 series of Playplan's branding, 7/11/2022

With a little voting, deliberation & discussion, we decided to go with the 4th iteration, but change the """nipples""" to something non-reminiscent of literal womanhood. We then simply proceeded with our marketing materials, including socmed posts & stories, in line with our marketing strategy, & now our branding, to be put up on our Instagram & Facebook pages, as well as used as advertising. Besides that, a little spotlight for our app prototype too, which you can read about in app prototype.

Our brand v2 guidelines, 9/11/2022

Figure 1.1.6, Our brand v2 guidelines, 9/11/2022

https://ljslol.notion.site/ljslol/Playplan-Brand-v2-Guidelines-c297c8529629400780798c1be7efe6e2

With all our artefacts well under way, we showed them off to Mr. Mike. He though, seemed to think that the branding itself wasn't quite strong enough, even potentially "violating core graphic design rules". He suggested, basically, we were to go back to the drawing board.

With that, we paused everything ongoing in our project, with much relunctance, & had our most intense meeting yet. It was pleasant though, we were at a nice coffee shop & their coffee was actually really nice. We started out basing our ideas off of one of the other variations pre-2.0 that Mr. Mike suggested we could explore. With it not working & our hopes quickly deflated though, we switched quickly to looking at inspiration on Pinterest.

Our pinterest board for brand v3, 18/11/2022

Figure 1.1.7, Our pinterest board for brand v3, 18/11/2022

With a lot of exploration, sketches, blood, sweat, & tears, we eventually, collectively came up with brand v3.

Our brand v3 guidelines, 24/11/2022

Figure 1.1.8, Our brand v3 guidelines, 24/11/2022

https://ljslol.notion.site/ljslol/Playplan-Brand-v3-Guidelines-a2aaa1c8239b4aac845869c44c765968

Showing this then to Mr. Mike, he... still didn't like it, stating how he wasn't a fan of the thick strokes & their distractingness. We had a meeting after that & collectively decided that we were going to ignore him.

...Okay that sounds a bit harsh, but we thought we just hadn't shown enough material to justify it, & we truly believed that where we were going had potential... also the fact that it was week 13. Thus, we chugged along & cemented v3 as our final branding.

Marketing materials

Our marketing materials included social media posts & stories. These would initially be split into 3 kinds:

  1. Key features
  2. Safety
  3. Ease of use/user flow

We had a few sets made initially, based on the key visual found in brand v2. However, in line with what Mr. Mike gave as feedback, those were shelved in favour of the re-rebrand. However, contributions from our graphic peeps came to quite a halt at this time, & the final artefacts didn't manage to really trickle correctly into the categories. Thus, we had to reorganise them a little, ending up as:

  1. Solve a problem
  2. Threaten a good time
  3. Relieve an anxiety

In order to ensure consistency across all works produced under the "Playplan roof", every single produced work was revised & done-up at the end, & relayed back to their original creator for feedback. This, fortunately, seemed to be relatively effective at catching small things that may hint to an organisation's disarray, such as stroke colour mismatches, out of specification blobs, & even typos.

Besides the posts though, we also had to work on our plan for our internal, externally-facing materials, like our website & possibly even a blog. For those, deriving heavily from our brand v3, as well as suggestions from Mr. Mike to add things like an endorsement, & strong call-to-actions, we managed to do it quite tightly just before our final presentation.

https://www.figma.com/proto/l5dnt3r3fp8ZgiSsGOLknx/Connected-Village%E2%80%94Playplan-team-library?embed_host=share&kind=&node-id=775%3A9569&page-id=775%3A9568&scaling=min-zoom&starting-point-node-id=775%3A9569

Figure 1.1.9, Site prototype, 7/12/2022

https://www.figma.com/proto/l5dnt3r3fp8ZgiSsGOLknx/Connected-Village%E2%80%94Playplan-team-library?embed_host=share&kind=&node-id=967%3A12455&page-id=775%3A9568&scaling=min-zoom&starting-point-node-id=967%3A12455

Figure 1.1.10, Blog prototype, 8/12/2022

App prototype

For the app, this was my first time using Figma. Being an XD person switching over, most concepts weren't completely unheard-off, but there were enough differences that made it sorta uncanny. I was mainly impressed though, by how well it ran, even though it was a web app. Folks that's what WASM'll do for ya, I guess. The main thing I was really unimpressed about though, was how buggy prototyping seemed to be. There would be misrendered chunks, components switching to incorrect states, components disappearing entirely, desynch on undos/redos, & just a bunch of state machine bugs. XD's prototyping, whilst a little more limited & """dumber""", at least worked deterministically.

Rant aside though, we initially wanted to use a component library for the app prototype, so save us a little hassle. One that looked pretty swell was Nucleus UI, it was free too! Thus, importing that into our project, Ellis & I started our journey putting & plotting. Unfortunately, we ran up against its limitations real quickly, & in no time, we had more of our components in the project than theirs. We'd eventually completely take our components in-house, & we're proud to announce that we'd spent way too long on it.

After a little designing the UI, I hit a snag, I wanted a BottomSheet-esque component. This sent me down a rabbit hole of really pushing figma's prototyping. Whilst on the surface it would seem simple, an overlay that fades in & a section that slides up. Unfortunately in practice, the final component in the project would involve 3 unique frames & 1 unique component per BottomSheet. There'd be an init, full, & hide state, which animated the overlay & a prototype component (naming scheme derived from the concept of prototypical inheritance, more specifically JavaScript ES6 classes' implementation, which would have a prototype property that's instantiated during the initialisation/construction of the class).

After a big chunk of the prototype was done, was when the news of the requirement of a re-rebrand was required, hit. This meant that major changes had to be made, which fortunately, was not that big of a deal since we made use of a very heavily component-ised working model. However that is the case, we still had a lot of work cut out for us.

The only remaining artefact of the app prototype using brand v2, 10/11/2022

Figure 1.1.11, The only remaining artefact of the app prototype using brand v2, 10/11/2022

After the work redoing most of our app prototype into brand v3, as well as further revisions after that, we had our final app prototype.

final:

Figure 1.2.1, Playplan final proposal, 9/12/2022

Figure 1.2.2, Playplan final app prototype, 9/12/2022

Figure 1.2.3, Miro board with additional miscellaneous progression notes, n.d

reflection:

ℹ️ Note
This is a mirror from our internal project document.

week[8]:

With our proposal looked over & the light above us greener than ever… it still wasn’t a time for rest. I quickly clobbered together the “errata” document asked by Mr. Damien, which after a present Google search, seemed to be mistitled as they were appendices only, not corrections. Nevertheless, we were now onto our next journey, designing the actual project. The Gantt chart was a woozy, which is probably a lesson in overcomplication or something, but I had good reason to believe my approach would’ve been a nett good for all in the team. The user journey map also took a little more longer to complete than expected, which kinda sucked because it was a bit boring, but completing it & looking through it again explained its own necessity to our project.

week[9]:

Mamamia look at all the consultation notes. Many things happened this week, but the main one would be the user journey map, as that would dictate what everyone would produce & touch on further down the road. We had to revamp a significant chunk of the user journey map, as we didn’t realise this would’ve been for the first phase of users on our platform. This changes a lot, as we suddenly lose people to spread the word, & people to push us forward. The silver lining though, is that I didn’t learn this during an actual product launch, & I feel like this journey map may be the single most important buzzword-esque diagram in this project. It fully covers the user’s entire journey (evidently), & enables us to really hone in & cater for each point they interact with. After that, the Gantt chart was attended to & our initial set of delegations began, onwards to next week.

week[10]:

The general consensus during our consultation this week seems to be “MORE” & “MORE FASTER”, which is terrifying. We needed to revise our branding too, which is horrifying. Scared out of our minds, we chugged along & chipped away at our tasks. To be fair, a lot of the brand criticism is very founded, but we were just short of time, & I guess I wasn’t so familiar with the style of work & style of production of my graphic design peers. We also worked on strengthening our marketing plan down the line, which actually included real good tips for future proposals, like placeholder testimonies.

week[11]:

Ahh, another hectic week beyond textual comprehension. Read along as I try to perpetuate comprehension for the week through textual means. This week we fall into a deeper rut as our branding rots per planck unit. We were basically told to completely redo it; a rebrand. Cue then, a time full of anxious waiting & furious designing, as the graphic designers among us (ඞ) worked on producing three different brand directions, & I at the end, consolidated them, attempting to capture every single perceivable element found from each direction. Though, I do feel bad for overriding like this, & can’t help but think it does overstep the work sharing dynamic. However there were real blockers to fully continuing any single one of the produced design directions, & we were already a week behind. Seeing the state of affairs & the speed at which our members worked at during the time, I came to the independent conclusion that it was impossible to get back on track with our current pace. In hindsight, I now know we definitely could’ve afforded to have more time to just, work through this together, & that it was irresponsible of me to just disregard & discard efforts made by all. At the time however, the urgency & just sheer stress, along with initial senses of disappointment looking at whatever was produced, made me make a rash decision. Next time, I’ll know better & I really do find a new value in the effort & doings of others. Something like, hands-on doesn’t mean hands-on only when tied. I guess now in my final defense, I did consult with at least Amber from the graphic design peoples, as well as Ellis, & made what I felt like were reasonable attempts to get everyone either onboard, or critical of the result at hand. With not much fanfare, protests, or even voices at all, I just assumed we’d all been able to accept it & continue on with our work. I would’ve hoped for more feedback & at the least reactions to tell me if I was doing anything wrong, but I don’t blame anyone but myself for missing this crucial mishap in our project. Thus, for the people involved in this whole debacle, reading this text, I am sorry.

week[12]:

Realising the approaches taken prior to this has not only lead to subpar work, but also a rift in our group, we decided it was best for something a little different. This week, we all got together in a cafe & truly dropped everything to get our branding right, once & for all. Since I’d already gotten most of the core UI components done, I could afford to pay 100% attention to this branding shenanigan now. I’m not proud of the cram, & not happy I’ll need to do a lot of it again after we finish our new branding, but I’m glad it’s all done, neat, & strictly componentised, really feels like my extra mile is paying off. At this point for branding, we’re on v3, & giving in every drop of our blood, sweat, tears, & determination in this cafe, we managed to find something workable, in no less than 4 hours of continuous discussion. This convergence was not without its hiccups & journeys, but it being something everyone has a sense of ownership & familiarity with, would hopefully call for a smoother last few weeks of the project. I guess, overall, a more hands on, grounded approach is truly more efficient. With that, I continued on with my dreaded redesign of the app prototype for this new branding, whilst I was officially behind on all my other modules’ assignments.

week[13]:

Another week, another branding shenanigan. After presenting our new branding & materials, we were suggested another round of revisions. We had another in-real-life meeting, & after even more hours of explorations & discussions, collectively decided to just stick with what we have, & I’m really glad that we did. I truly believed in what our branding v3 could blossom into, & now that we’ve gotten deeper into exploring it, including through posts, stories, illustrations, & other miscellaneous assets, it’s finally showing its potential. I would change nothing about the decision, other than to make it quicker next time. For the app prototype, we made our revision during the meeting to add an outline to all of our previously redesigned buttons, which, for all intents & purposes, was basically all we needed to do to bring the UI back in line with our branding.

week[14]:

We never did get the feedback from lecturers about the use of the mark, but I think that’s okay. One of the main concerns voiced by Mr. Mike was really valid though, & one that I can’t believe I totally missed — the colour of the imagery used. After a lot of scouring, I did manage to find a workflow that everyone could use to easily tune the images into a consistent look. Time was getting tight, & we still didn’t have any posts, but I did also understand that it was submission week for most of us, & decided to prethink & provide the concept & headings, as well as some visual suggestions for the remaining posts to be done by our graphic design people. This seemed to be a great idea when the work was received, as they really were some of the best done by everyone out of our project. It’s a shame it took until literally the last official semester week to come by this, but I’m glad it did happen. For next time, I suppose.

week[15]:

This week was spent with us cramming the presentation, simultaneously porting over what we had before, as well as laying out what we’d done since then. The difference in branding, & thus slide format became our one true bottleneck in this process, as I spent hours just trying to set up a Google Slides theme from scratch just to get the flow up & running. With it all done & me half asleep, we showed Mr. Mike just a day & a half before D-Day. Unfortunately, I was really disappointed when he gave the feedback to redesign the slides showcasing our marketing artefacts, as I really liked how some of them looked, & disliked how they looked alone. Whilst I do understand where he’s coming from, I just feel like our target audience wouldn’t be the type to really mind. Nevertheless, we did end up redesigning them to something clearer & sparser, to my absolute dismay. As D-Day arrived, we gave our best shot presenting it. Not many people could attend the rehearsal the day before, so it was postponed to the morning of the day itself. I really wished we could’ve had more time rehearsing, as we only ended up being able to do one pass before the actual presentation, & I ended up misremembering our delegation when we finally did it to our audience. However, what’s done is done, & I’m glad I was able to be put through this entire journey. Thank you to Mr. Mike, & every single one of my groupmates. I hope you know you truly were indispensable throughout, as bad as I am at expressing that gratitude. Thank you.

Comments