01
Context and problem
Ateliya is a management app for tailoring workshops, paid by mobile money. Its website is there to make people want to download the app and subscribe.
The old website worked, but the client no longer liked its design. The job was to redo the design while keeping the same pages, flows and APIs.
02
My role
I led the redesign on my own, from design to launch, following the client's brand guidelines: green, gold, ivory and the Cormorant Garamond typeface. The client approved each page before I moved on to the next.
- 01Design from the brand guidelines
- 02Astro development
- 03Sign-up forms
- 04Accessibility
03
Approach
I took inspiration from payment app websites: full-colour sections, an energetic tone and light animations.
A stitching pattern separates the sections and recalls the craft. A real screenshot of the app appears in the home photo, and a mockup shows customers, orders and activity.
Screenshot 1 of 5
04
Technical choices
I aimed to keep the website fast and the forms reliable.
- Astro
- React
- Tailwind CSS
- TypeScript
01Staying with Astro
I was first asked to move the website to Next.js. After three days, I went back to Astro: for a showcase website, it loads less JavaScript, so pages display faster.
02React only where it helps
React is only used on the pricing page and the sign-up page, the two pages with a multi-step form.
03Clear forms
Checks on email, phone and password, a summary before sending, and error messages people can understand.
04Text everyone can read
After an accessibility check, I darkened a text colour that lacked contrast.
05
Results
The new website is live. It keeps the sign-up and subscription flows, with a design true to the client's brand.
- pages only use React
- 2
- mobile payment methods supported
- 4
06
What I learned
Pick the tool for the need: going back to Astro after three days on Next.js was the right call for this website.
Details take time: it took me about ten attempts for the app mockups to display well on every screen.
