MAJOR PROJECT: INKU
Alicia Teng Yi Ling (0345159) / Bachelor of Design (Honours) in Creative Media
Major Project (202404)
Blog
DIRECTORY
- Lectures
- Week 01
- Week 02
- Week 03
- Week 04
- Week 05
- Week 06
- Week 07
- Week 08
- Week 09
- Week 10
- Week 11
- Week 12
- Week 13
- Week 14
- Week 15
- Week 16
- Final Outcomes
- Feedback
- Reflection
Lectures
[03/04/2024]
Only in the first week will class be held in D8.11. There will only be Monday classes if stated so.
2 dates to remember:
- Next tuesday (30th April) 14:00 - alumni (2018) will be sharing their fyp and their books
- 14th May (Tuesday) - Workshop on Intellectual Property & Copyright
- The entire semester is consultation based
- Topic/proposal to be finalised by week 3
- After that will be assigned a supervisor Consultations will be set yourself weekly (any time)
- Supervisor will take attendance for you (they are not responsible to chase you)
- Changing topics is not advisable week 5 onwards
- Major project should not feel like an assignment
- Effort does not equal a good mark
- Based on your dissertation topic:
- Is it viable to pursue it to become a major project?
- Find an actual live brief from a real company/client - disclaimer: client has to be approved by lecturers
- Find any topic from scratch but must have:
- A purpose (what?)
- 2. Who benefits? (target audience, consider your market)
- 3. What problems are you solving (can be a simple problem)?
- We can have groups or a partner (amount of people = scale of project)
Week 01
I began thinking of ideas for my final year project which were primarily along with lines of game design or game development.
Idea 01: Interactive Website Prototype (Figma)
- A website design prototype based on a video game aesthetic (Hogwarts Legacy)
- Focuses on micro-interactions and small animations to engage users and take them along the site seamlessly
- Goal: either help promote up and coming game or to promote merch
- I want to focus more on user-centered design, consistent layouts, visual hierarchy and interactive elements
- UI design should be highly detailed, tailored and focused on reflecting the art style and aesthetic of the game: including art, typeface and colour scheme
- Would like to incorporate skills from entertainment design and animation as well as graphic design
- Problem Statement: Lack of Engagement in Video Game Promotion Websites, Difficulty in Communicating Game Features and Merchandise Value, Ineffective User Onboarding and Engagement Strategies and Difficulty in Visualising Game Content and Storylines
Idea 02: Platformer Exploration Game (Unity)
- Inspired by haunt the house the game and haunting of hill house the TV series
- Storyline: A girl ghost seems to be unable to pass into the afterlife (no memories of why she remains there) and lives in an old rickety manor.
- There are other ghosts in other rooms that cant pass on either but they know why.
- MC can interact with the real world unlike the other ghosts and so begins a quest to help the other ghosts because she's searching for her memories, thinking it will help her remember why she died and why she remains
- Idea: Big manor: 25-30 rooms, 6 other ghosts, 6 main quests, 3 side quests
- Win: She completes all quests successfully and the other ghosts pass on and she remembers and also passes on
- Lose: Failure to complete more than 3 quests successfully and the other ghosts remain stuck for eternity with her
Inspiration:
 |
Fig 1.1 Hogwarts Legact UI |
 |
Fig 1.2 Don't Starve Together UI |
 |
Fig 1.3 Haunt the House UI |
Week 02
After being warned about the many difficulties and time constraints it would take to build a game, my focus has mostly shifted to web design for adorable and interesting concepts that I'd love to design interfaces for. After the first week, I decided to focus my energy on researching areas that I thought had a gap in the market in terms of innovative and interactive web design, also within the Asian market. However, I did leave in one game design idea where I was suggested to simply reskin an existing game, so I would design the game UI and art. I'd still love to do anything related to a game :')
At the end of the week, I ended up grouping with Adena from Graphic Design! We decided to work together to create a tattoo card Brand named In
Week 03
In this week, Adena and I had our first meeting with our supervisor, Mr. Zeon, as a group. Hoping to get feedback from him, we presented the proposal as well as our aims, objectives and planned outcomes from both GD and UI/UX side so that we might get a clearer direction to work towards.
Also as a recommendation to readers, the writing in each week is a general summary of what was done + my thought process but the actual work details are in the slides so please do take a look through :)
Week 04
Following last week, Adena and I continued refining, planning and researching our ideas and objectives. For me that included:
- Website:
- Moodboard
- Process Flowchart
- Low Fidelity Wireframes
- Mobile Application:
- Moodboard
- Process Flowchart
- Low Fidelity Wireframes
- AR Advertising
- Moodboard
- Sketches
Week 05
This week, Adena and I sent out a survey to acquire more first-hand data for our brand that would assist us in determining what our target audience wants and needs. I also refined the web process flowchart based on feedback and continued working on its low fidelity wireframes.
Week 06
In this week, I worked on more of the website's low fidelity wireframes, created the draft UI style guide and also began testing designs for the high fidelity wireframes to establish a detailed version for the overall design direction.
Week 07
For this week, I continued working on the website's lo-fi pages but also started more progress on the mobile pages. I'm trying to make more interesting, unique and dynamic visual design based off of the feedback I've received for the previous two weeks.
Week 08
This week I set a list of goals to accomplish to take full advantage of this study period:
- Finish the majority of web lo-fi wireframes
- Work on finalising 20% of hi-fi wireframes
- Finish 50% of mobile app lo-fi wireframes
- Update the UI style guide
- Try prototyping some high-fidelity pages to show Mr. Zeon during the next meeting what it will look from the user's side
Week 09
In this week, I began prototyping the website so that meant creating the component library to neatly store all the future ones. I've learnt that organisation is key to having a mess-free efficient work flow when prototyping that makes it even more enjoyable. Then I recorded a short video playthrough of the home (landing) page prototype. On the mobile side, I furthered my work with the lo-fi wireframes and also began colour experimentation for the high-fidelity designs.
Week 10
This week, I experimented with different prototype effects and components for the website to see what would provide the desired visual outcome. I also made quite a chunk of progress for the mobile's high-fidelity wireframes and hope to start prototyping some pages soon. At this point everything feels like it's starting to take shape and come together. I'm also preparing for the week 11 progress check presentation so I hope to be able to show at least 70% by then.
Week 11
Over a very hectic weekend, Adena and I managed to hash out our presentation slides. On my end I worked on:
- User research
- Competitor research
- Presenting the lo-fi wireframes
- Presenting the hi-fi wireframes
- Presenting the UI style huide
- Website mock ups
- Prototype playthrough videos
Week 12
Over the previous weekend, Adena and I filmed our Inku introductory video for the website's home (landing) page so I worked on editing that. It had been a long time since I used Adobe Premiere Pro so I was a bit rusty but I had managed to trim, colour edit, audio edit and stablise the video so I was pretty pleased with it. Additionally, I worked on some more refinements to the website's and app's design. Lastly, I finalised the iconography. I took most from free sites then tweaked the stroke width and curve degree to suit the look we're going for (smooth curves).
Week 13
This week, Adena and I worked on our visuals and mockups for the coming up exhibition at the end of the semester. Also, after Mr. Zeon's feedback, I updated large sections of the black shade over the website and app to a lighter one that would be more easy on the eyes.
Please do come and visit our booth!
Week 14
In this week, it was just prototyping, prototyping and more prototyping. The component library is very extensive now. I updated the design for the website's product customisation pages to feel more modern and match better with the other pages aesthetics. I also made a checklist of what I hope to achieve in week 15 and 16 so we can have a smooth exhibition experience.
Week 15
Below are the Figma files for both the high-fidelity wireframes for both website and application. Please take a look through :)
Website
Fig 2.1 Website High-Fidelity Wireframes
Mobile Application
Fig 2.2 Mobile Application High-Fidelity Wireframes
Week 16
In this final week, I not only worked on finalising the design and prototyping for both platforms but also began the tedious process of user testing.
If you wish for a closer look at the results please click on the links below:
Fig 3.1 Website Design Documentation
Fig 3.2 Website Design User Testing Results & Observations
Fig 3.3 Mobile App Documentation
Fig 3.4 Mobile App Design User Testing Results & Observations
FINAL SUBMISSION & OUTCOMES
Website Prototype
Fig 4.1 Figma Website Prototype
Full Website Playthrough Video
Fig 4.2 Full Playthrough of Website Prototype
Mobile Application Prototype
Fig 4.3 Figma Mobile App Prototype
Full Mobile Application Playthrough Video
Fig 4.4 Full Playthrough of Mobile Application Prototype
If you wish to view our project's documents and details more in depth, please click on this Google Drive link here.
Final Submission Slides
Feedback
Week 02 [30/04/2024]
- How can I make the major project more UI/UX interactive?
- It can't be just one outcome
- Games:
- I'm likely not going to join a game studio as a developer but probably want to aim for becoming a UI/UX designer for games so the aim is to come up with HUD/interface + character design. So I can take the base code & mechanics from an existing game, & essentially reskin it and alter the code myself for certain details I want.
- Website:
- Think about what job I want and focus on a project for that I want to showcase my UI/UX skills, so has to be for different devices, cannot be just website multiple views for different devices (desktop, mobile app, kiosk, etc.) My project should have a unique feature & purpose (customisation, high interactivity, engagement, fun to play with, etc.)
- My assigned supervisor is Mr. Zeon
Week 03 [07/05/2024]
- Do more competitor analysis, then based on industry swot, make your opportunities & threats
- Only from there, write up your USP and make it your brand's strengths
- Don't have 'all-in-one' as a USP
- No brand can cater to everyone
- Improve on visualisations (put in info first but then visualise it more)
- Research and info should be visualised (in images)
- Include more pictures as it's quite word heavy
- Planned outcomes slide should have pictures of design inspiration (so people can imagine it better)
- Try to avoid duplicate ideas that exist in the market. How can you be more unique (USP)?
- Is 3 functions (educational, selling, listing) too much for the platforms? Can it be a community based platform? A listing platform?
- You need content (customers talking to one another like a blog and they share and word of mouth) to generate traffic
- Focus on project direction (too big right now)
- The most important point is how we actually position the whole project and its functions
- Approved Adena and I to work together as a group
Week 04 [17/052024
- Those who have tattoos are unique and have their own thinkings (to be a bit different from others), and are artistic
- Type is user-friendly but doesn't seem to have a unique identity (does the brand reflect a person that has a tattoo?), overall typography doesn't seem to reflect the cool tattoo feeling
- Minimalist, has no identity as a cool tattoo brand (be more creative and have a strong identity), like someone that has an attitude
- Besides identity, no issues for now, good efforts, keep it up to the end
- Do button click for AR product customisation (put video of the AR function not the actual AR function) to present
- An interactive quiz is a great idea: Perhaps offer a voucher as part of the reward system after users complete the quiz. This could increase checkout rates
- After purchasing a product, we should email users with tracking information and an estimated delivery time. Alternatively, ensure there’s a tracking system on the website
- There are no next steps after users log in to the member page. What features are available there?
- Consider adding customer reviews to your homepage, as they are crucial for increasing conversion rates. It might be beneficial to place an interactive feature at the top of the homepage to pique users’ curiosity. After engaging with it, users could receive a voucher, and you could collect their emails and contact information for further marketing
- Tattoo artists are not included in the system. Consider collaborating with them since you have a user base that might be interested in their services. By integrating their services, you can offer better tattoo service packages to your users
- The two of us know what to do :'3, we're hardworking
Week 05 [24/05/2024]
- Too focused on 'pre-tattoo' and not on aftercare
- In the end, don't focus on the website or app miscellaneous functions, booking process is more important for those who are potential tattoo customers
- Tattoo artists are not reflected in the flowchart, they are missing from the user journey (since this was your initial idea, why not just integrate it?)
- Are we not a one stop solution for tattoo lovers? don't stop at just products, improve the whole process, we are an ecosystem
- Don't focus too much on the products itself (they are always and already in the market), the value should be how you give the one stop solution and make the whole process seamless, give value to your users/customers
- Web design is simple, minimalist, layout is easy to read but its safe (too safe) - challenge yourself to not be safe
- Layout is very similar to typical skincare product branding, too simple
- Not bold enough for tattoo products
- Experiment with typo size and hierarchy, element size
- Checkout suggestion: study on 'upsales' (means when they checkout, show other products like suggestions, and maybe like offer a buy 2 free 1 or cheaper price to buy extra products)
Week 06 [31/05/2024]
- We're lacking brand guideline, all designs should follow it
- GD & UI/UX guidelines should align with each other
- Add a shadow layer on top of the image to make words stand out more
- Consistency is good but its too consistent in all the pages
Week 07 [08/06/2024]
- Have an email capture page (before starting interactive quiz)
- Make bundle boxes customisable
- Design still not brave and bold enough
Week 08 [14/06/2024]
- No meeting: self-learning week
Week 09 [21/06/2024]
- Good typesizing experimentation for webpage design
- Think about how the website can convert more potential customers
- Increase revenue for the business
- For mobile application:
- Create tattoo artist profiles for users to directly contact them
- Website:
- Pink footer feels sudden
- Everything else is fine
- Mobile Application:
- Lower opacity (or line weight) of graphical Inku elements
- Onboarding Screens: is fine graphics
- Home page: reduce background graphical elements T
- Tattoo diary reduce as well
- Presentation:
- Put in as much of our designs and work as possible
Week 11 [09/07/2024]
- Vibrancy and contrast is different for GD and UI/UX
- Be careful of blue and black colours (harsh on eyes)
- Overall, it all looks good to go!
Week 12 [12/07/2024]
- Inku Insights webpage design large black background section is fine
- No other comments hehe
Week 13 [18/07/2024]
- Voucher can add darker colours since there's not much contrast for it to stand out, especially check "Vouchers for you!" title
- About Webpage: Is it possible to do a typing effect for "Curious about us?" in the hero section
- The rest is good :)
Reflection
As I reflect on the process from week 1 to week 16, it has truly been a tumultuous journey of learning and experimenting. What started as an idea flowered into an extensive project that is far beyond my initial imagining. Meaning I made a lot more wireframes than I thought and they were much more detailed (many components and variants).
Working with a group brought its own set of rewards and lessons. We collaborated, debated, and ultimately supported each other through every twist and turn. I’m incredibly grateful for my teammate, Adena, who brought her own unique talents and perspectives to the table.
One of the most rewarding aspects of this project was seeing our initial ideas take shape into something tangible. Watching the website and app evolve from rough sketches into polished pages was a painful and long process but seeing it all now makes it worth it. Each iteration, each revision, brought us closer to our goal, and with it, a sense of joy in what we were building. Cheesy as that may sound.
Also, unexpectedly as I worked these weeks in Figma, I realised that my internship company had trained me much more than I had noticed. All the little shortcuts, tips and advice they bestowed upon me had made this project so much more efficient and enjoyable than it would have been without my experience working there.
Furthermore, the feedback we received along the way was invaluable. Hearing users describe their experiences with our designs, and knowing that we had created something that resonated with them, was incredibly fulfilling. It reminded me why I embarked on this journey in the first place: to create something that would connect with people, and is cheesy as it is, something that would add value to their lives in some small way.
I’m excited to carry these lessons forward into future projects, and I’m grateful for the experience this one has given me. Here’s to the next adventure, whatever it may be.
Comments
Post a Comment