top of page
Serenity Heights
Full stack website
Overview
Serenity Heights is a fictional subdivision in Australia that was created for a major project at Curtin University.
​
This was a group assignment that required the team to design and build a full-stack functioning website.
Role
UX Designer, Front end & Back end Developer
Research, design, personas, mock-ups, and prototyping. Database management, server administration, application programming interfaces (APIs), HTML, CSS & JavaScript.
"As designers, we have such power to make design change the world. We really need to make better use of our platform and do stuff that is useful"
Yinka Ilori
Background
For a major project in my university studies, we were placed into teams and given a brief to design, build, test and launch a full-stack website. The topic of the website could be anything of our choice. For our team, we decided upon a fictional new subdivision that was to be opening in the near future and was selling house and land packages.
This team is hands down one of the most cohesive, productive teams I have ever been privileged to be a member of. Between our team of 6 members, we split tasks into UX Designers, back-end/front-end engineers, Information Architects and Team leaders/Lead designers. However, because of the team size and the work required many of our "positions" overlapped.
Understanding the problem
Because this was to be a large project with many components deep research was required to fully understand what the website needed. Not just in how it looked (UI) but also in what was needed to make it work. Through research we discovered..
-
The website needed to have data storage to store profiles & property details. It was decided to use MongoDB for data management.
-
The branding needed to be appealing to families and professionals so all images, colours and wording would need to promote a family-friendly feel.
-
Features could include a design your own house and appointment/viewing booking options.
Vision & Solution
After extensive research was completed we undertook the huge task of building this website.
-
A brand palette of classic, blues and neutrals was created.
-
Multiple versions of the logo were created and finally decided upon.
-
The Design Your Own Home feature, while looking to be technically difficult and likely an arduous task, was agreed to become the jewel in the crown of our website.
Serenity Heights Logo
The Serenity Heights "Site Office"
The Design Process
Early on, it was decided to use the Agile design method as the ability to design, test and make changes meant that for such a large project, it was easier to make fixes to code before the project became too big.
​
-
Feedback from testing told us that a video component on the landing would look professional.
-
The Design Your Own Home feature was fun, but not enough choices were available and it didn't feel interactive enough.
-
Some of the property details were lacking information. Features like a floor plan and house size were important to users.
​
All feedback that was reasonable for us to implement in the time frame was discussed, applied and tested again. We added more features to the DIY feature and one team member went above and beyond to get drone shots of a subdivision local to them!
The drone video for the landing page.
DIY image that had hover effects when a room was hovered over.
Designs
Landing/Home
​
Current Designs
Design expanded
About
Results & Takeaways
In the end, I genuinely believe this is one of the best projects I have ever worked on or done. The final result was of such high quality that I am certain that were it to be a commercial website, the client and users would be more than happy.
​
Key takeaways
-
The interactive features in the DIY Home feature were unlike anything I had ever worked on before. It was a risk that we took but the payoff was so good that it made all the experimentation, stress and work worthwhile.
-
The branding and UI were so classy and represented the client perfectly. The layout of the elements on the site made perfect use of white space and provided a smooth, intuitive user experience.
-
The marks received reflected the effort we put into the project, and we walked away with a High Distinction mark for it.
​
bottom of page