🌱 Empowering the Nation Website 🌱

Click here for the App 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:

• HTML5
• CSS3
• Javascript (ES6+)

❔ 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. As we had taken a Web Development module the previous semester, we made use of HTML, CSS and Javascript.

📓 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 website must provide the same functionality as the app
• 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 website (Gérard) and unstyled app (Matthew)
6. Unstyled website and app were styled (Kate)
7. Pass the website and app back and forth to add features, fix bugs and update styling
8. Release website and app

IIII. Presentation (Group)

9. Present the website and app 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 second venture into developing a website, so while I didn't learn too many new things, I did find myself spending far less time developing the site as compared to my first site.
• 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.