🌱 Empowering the Nation App 🌱

➡ Video of App showcase here ⬅

Click here for the Website version

Overview

🤝🏼 Team members:

• 👩🏼 Me (Designer and Front-End styling)
• 👨🏾‍🦱 Matthew (Web and Mobile functionality)
• 🧔🏾 Gérard (HTML)

💼 Project Brief

A local small- to mid-size enterprise (SME) would like to have a web page and mobile app developed to advertise their business, receive requests for information from potential customers as well as provide quotes to the potential customers for services requested.

Technical details

🖥️ Tech stack used:

• Kotlin
• Android Studio

❔ Why we used this stack:

This group project formed part of the Work Integrated Learning module where we had to showcase what we have learnt in other modules. We could choose to develop the app using either React Native or Android Studio (with Kotlin). The main mobile developer in our group decided to use Kotlin as they were more familiar with it.

📓 Requirements

Pages / Functionality

• Home page
• Summary of Learnerships page (with links to each learnership)
• Summary of Short Courses page (with links to each short course)
• Details of each Learnership (one page per learnership, 4 in total)
• Details of each Short Course (one page per short course, 3 in total)
• Fee Calculator (including discounts and VAT)
• Form (inputs such as text, email, checkbox, telephone)
• Error handling
• Invoice generator
• Contact page
• Ability to go back to previous page

Other requirements

• The app must provide the same functionality as the website
• Users must be able to navigate either platform comfortably

🔄 Process

I. Client & user needs, logo design and wireframes (Individual)

1. Wrote a report on the client's needs for the web page and mobile app, the user's needs and requirements (user-centered design)
2. Designed a logo for the business
3. Designed wireframes for both the app and website (desktop and mobile) in Figma

II. Prototype and mockup (Group)

4. Designed prototypes and mockups of both the app and website using Figma, integrating the best design components from each member's previous wireframe. (About 90% of my design was used in the final design).

III. Development (Group)

5. Developed the unstyled mobile app (Matthew) and unstyled website (Gérard)
6. Unstyled app and website were styled (Kate)
7. Pass the app and website back and forth to add features, fix bugs and update styling
8. Release app and website

IIII. Presentation (Group)

9. Present the app and website to an audience and explain design choices while being interviewed

✨ End Result

• 95% for Part 1
• 80% for Part 2
• 🎉 100% for Part 3

🤓 What I learned

• This was my first venture into extensive styling in Android Studio and using Kotlin, so I learnt a lot about developing for native Android apps. I learnt about (XML) styling, context and views.
• This was my first time receiving code from another person and having to implement features/styling based on their code.
• I learned about working in a group, collaborating, the important of good communication and time management.

🙃 What I struggled with

• I could have been more clear with my requests and suggestions of what people could do. This lack of clarity resulted in a team member having to do more work than they needed to, and this resulted in having to spend quite some time making changes.
• I don't know if I would count this as a struggle, but I ended up pulling an all-nighter combined with a non-stop 7-hour-long session adding features last-minute. So, my time management could be better, but this was also a consequence of the previous "mistake".
• I tend to be a perfectionist, so I worried that my constant request for changes, features and fixes could have been annoying or frustrating to my team members.